Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE with contenteditable

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?

like image 935
Jens Törnell Avatar asked Feb 21 '13 16:02

Jens Törnell


2 Answers

TinyMCE 4 has this feature officially supported - see the "inline" example: https://www.tiny.cloud/docs/tinymce/6/inline-demo/

like image 124
NoBugs Avatar answered Nov 15 '22 21:11

NoBugs


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.

like image 2
Thariama Avatar answered Nov 15 '22 21:11

Thariama