TinyMCE with contenteditable
contenteditable, javascript, tinymce, wysiwyg
Solution
There is no official configuration parameter called 'content_editable', but i found it in the sources.
It is true that tinymce uses a contenteditable iframe to edit its contents. I followed the disscussion, but as Spoke said there would be many tradeoffs and with new browsers you can never be sure how such an editor would react. I would advise not to use such an editor.
Problem
I have read that TinyMCE have support for contenteditable instead of the textarea / iframe version Source: http://www.tinymce.com/forum/viewtopic.php?id=22164 It says: I discovered a configuration property called 'content_editable' in the source code of TinyMCE v3.5.2. This flag prevents an iframe from getting rendered. 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> ``` What I changed - I use mode "exact" to make tinyMCE accept a div. http://www.tinymce.com/wiki.php/Configuration:elements - I add the ID as element in the JS. - I have an editor_selector that matches the class. - I add content_editable and set it to true in the JS. This happend Nothing. The script run and gives me no errors. Any hints?