TinyMCE con contenteditable

Question

Ho letto che TinyMCE hanno il supporto per contenteditable invece della versione textarea/iframe

Fonte:

http://www.tinymce.com/forum/viewtopic.php?id=22164

Dice:

Ho scoperto una proprietà di configurazione chiamata "content_editable" in il codice sorgente di TinyMCE v3.5.2. Questo flag impedisce l'iframe da durante il rendering.

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> 

Quello che ho cambiato

• Io uso la modalità "esatta" per rendere tinyMCE accettare un div. http://www.tinymce.com/wiki.php/Configuration:elements
• Aggiungo l'ID come elemento nel JS.
• Ho un editor_selector che corrisponde alla classe.
• Aggiungo content_editable e lo imposto su true nel JS.

Questo happend

Niente. Lo script viene eseguito e non mi dà errori. Qualche suggerimento?

Answer 1

Non esiste un numero ufficiale configuration parameter denominato "content_editable", ma l'ho trovato nelle fonti.

È vero che tinymce utilizza un iframe contenteditable per modificare il suo contenuto. Ho seguito la discussione, ma siccome Spoke ha detto che ci sarebbero stati molti compromessi e con i nuovi browser non si può mai essere sicuri di come reagirebbe un simile editor. Vorrei raccomandare di non usare un simile editor.

Answer 2

TinyMCE 4 ha questa caratteristica supportata ufficialmente - vedere la "inline" Esempio: http://www.tinymce.com/tryit/inline.php