Zum Inhalt springen

Wysiwyg

Erstellt am 23. Oktober 2006 · 3 Antworten · letzte Antwort am 24. Oktober 2006

Tags: Frage

NickD ·

hallo,

ist es mögich den wysiwyg-editor in einem formular einzubinden? ich möchte gern einige eingaben in einem eigenst geschriebenen modul über den wysiwyg eingeben lassen. gibt es dafür module, welche ich an der stelle einbinde oder muss ich das auf herkömliche weise machen?

was mir auch nicht klar ist, wie ich das generell über ein modul mache, ohne es direkt ins template zu schreiben!?

NickD ·

ok ich erweitere meine frage und setze ein neuen post, damit diese frage wieder aktuell wird 🙂

ich möchte z.b. tinymce nutzen (ein freeware editor, sozusagen ein erweiterter wysiwyg. eine testseite würde beispielsweise so aussehen:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Full featured example</title>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
		theme_advanced_buttons1_add_before : "save,newdocument,separator",
		theme_advanced_buttons1_add : "fontselect,fontsizeselect",
		theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor,advsearchreplace",
		theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_path_location : "bottom",
		content_css : "example_full.css",
	    plugin_insertdate_dateFormat : "%Y-%m-%d",
	    plugin_insertdate_timeFormat : "%H:%M:%S",
		extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
		external_link_list_url : "example_link_list.js",
		external_image_list_url : "example_image_list.js",
		flash_external_list_url : "example_flash_list.js",
		media_external_list_url : "example_media_list.js",
		file_browser_callback : "fileBrowserCallBack",
		theme_advanced_resize_horizontal : false,
		theme_advanced_resizing : true,
		nonbreaking_force_tab : true
	});

	function fileBrowserCallBack(field_name, url, type, win) {
		// This is where you insert your custom filebrowser logic
		alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);

		// Insert new URL, this would normaly be done in a popup
		win.document.forms[0].elements[field_name].value = "someurl.htm";
	}
</script>
<!-- /TinyMCE -->
</head>
<body>

[Full featured example] <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a>  <a href="example_word.htm">[Word example]</a>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
	<h3>Full featured example</h3>
	This page shows all available plugins that are included in the TinyMCE distribution. Some of these plugins will only be visible on MSIE due to the lack of some support in FF. For more details on the various options on TinyMCE check the <a href="../docs/index.html">manual</a> or for more third party plugins check the plugin section.<br /><br />
	<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
		&lt;span class=&quot;example1&quot;&gt;Test header 1&lt;/span&gt;&lt;br /&gt;
		&lt;span class=&quot;example2&quot;&gt;Test header 2&lt;/span&gt;&lt;br /&gt;
		&lt;span class=&quot;example3&quot;&gt;Test header 3&lt;/span&gt;&lt;br /&gt;
		Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1. &lt;br /&gt; This editor instance has a 100% width to it.
		&lt;p&gt;Some paragraph. &lt;a href=&quot;http://www.sourceforge.net&quot;&gt;Some link&lt;/a&gt;&lt;/p&gt;
		&lt;img src=&quot;logo.jpg&quot;&gt;
	</textarea>
	<br />
	<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>

</body>
</html>

diese möchte ich nun, mit anderen formularfeldern anzeigen und dann in die db schreiben. das alles soll über ein modul geschehen. ich arbeite mit quickform,...gibt es eine möglichkeit, ohne den code direkt ins template zu schreiben, das einzubinden?

NickD ·

ich habe versucht den javascriptteil im template einzubinden, leider bleibt danach die seite komplett weiß und nach einem blick in den seitenquelltext, musste ich leider feststellen, das kein javascript in den header aufgenommen wurde....

hier mein tS:

headerData = COA
headerData.11 = TEXT
headerData.11.value = <script language="javascript" type="text/javascript"  
                       src="fileadmin/tiny_mce/tiny_mce.js"></script>
                      <script language="javascript" type="text/javascript">
	               tinyMCE.init({
		                     mode : "textareas",
		                     theme : "advanced",
                                     plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
		theme_advanced_buttons1_add_before : "save,newdocument,separator",
		theme_advanced_buttons1_add : "fontselect,fontsizeselect",
		theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor,advsearchreplace",
		theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_path_location : "bottom",
		content_css : "example_full.css",
	    plugin_insertdate_dateFormat : "%Y-%m-%d",
	    plugin_insertdate_timeFormat : "%H:%M:%S",
		extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
		external_link_list_url : "example_link_list.js",
		external_image_list_url : "example_image_list.js",
		flash_external_list_url : "example_flash_list.js",
		media_external_list_url : "example_media_list.js",
		file_browser_callback : "fileBrowserCallBack",
		theme_advanced_resize_horizontal : false,
		theme_advanced_resizing : true,
		nonbreaking_force_tab : true
	});

	function fileBrowserCallBack(field_name, url, type, win) {
		// This is where you insert your custom filebrowser logic
		alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);

		// Insert new URL, this would normaly be done in a popup
		win.document.forms[0].elements[field_name].value = "someurl.htm";
	}
</script>

was mache ich falsch? sind die funktionen das problem, wegen den klammern ({}) ?

NickD ·

ich habe das problem jetzt behoben (mehr oder weniger)...
ich habe die einfach version von dem wysiwyg genommen und somit waren die funktionen nicht mehr nötig. jetzt wird alles schön übernommen. ich denke das es an den geschweiften klammern lag, da sie ja auch bestandteil der ts syntax sind.
vielleicht muss man diese maskieren oder so!?
wenn jemand trotzdem noch ne lösung hat, bitte posten, ansonsten erklär ich das für erledigt. selbsthilfe-foren sollte man mal aufmachen, scheint noch ne lücke zu sein 😉