Ich habe gelesen, dass TinyMCE haben Unterstützung für contenteditable anstelle der Textarea/iframe VersionTinyMCE mit contenteditable
Quelle:
http://www.tinymce.com/forum/viewtopic.php?id=22164
Dort heißt es:
Ich habe eine Konfigurationseigenschaft namens 'content_editable' inentdecktder Quellcode von TinyMCE v3.5.2. Dieses Flag verhindert, dass ein Iframe von gerendert wird.
Javascript
tinyMCE.init({
// General options
mode : "exact",
element : "my_id",
theme : "advanced",
plugins : "table,inlinepopups",
editor_selector : "tinymce",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,formatselect,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "external",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
content_editable: true,
// Example content CSS (should be your site CSS)
content_css : "/js/tinymce/examples/css/content.css",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'},
customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
},
});
HTML
<div class="tinymce" id="my_id" contenteditable="true">test</div>
Was änderte ich
- Ich benutze den Modus "exact", damit tinyMCE ein div akzeptiert. http://www.tinymce.com/wiki.php/Configuration:elements
- Ich füge die ID als Element in der JS hinzu.
- Ich habe einen Editor_selector, der der Klasse entspricht.
- Ich füge content_editable hinzu und setze es im JS auf true.
Dieses geschah
Nichts. Das Skript läuft und gibt mir keine Fehler. Irgendwelche Hinweise?
+1 interresting tinymce Forum-Thread – Thariama