2013-02-21 15 views
7

Czytałem, że TinyMCE mieć wsparcie dla contentEditable zamiast wersji textarea/iframeTinyMCE z contentEditable

Źródło:

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

Mówi:

Odkryłem właściwość konfiguracyjną o nazwie "content_editable" w kod źródłowy TinyMCE v3.5.2. Ta flaga zapobiega renderowaniu elementu iframe z .

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> 

Co zmieniłem

To wydarzyło

Nic. Skrypt działa i nie daje mi błędów. Jakieś wskazówki?

+0

+1 interresting forum TinyMCE wątek – Thariama

Odpowiedz

2

Nie ma oficjalnego configuration parameter o nazwie "content_editable", , ale znalazłem go w źródłach.

To prawda, że ​​tinymce używa contenteditable elementu iframe do edycji jego zawartości. Podążyłem za dyskusją, ale jak powiedział Spoke, będzie wiele kompromisów i dzięki nowym przeglądarkom nigdy nie będziesz pewien, jak zareaguje taki redaktor. Nie zaleca się używania takiego edytora.

+1

Dziękuję, głosować aż tak daleko! Potrzebuję jednak edytora, który dostosowuje się do jego środowiska i znalazłem ten http://tifftiff.de/contenteditable/editor.html. Wygląda jak piekło, ale działa dobrze. Nie tak doskonały jak TinyMCE, ale ok. Myślę, że redaktorzy z contenteditable to przyszłość, nawet jeśli muszą działać poprawnie. Standard W3C. –

+1

CKEditor obsługuje edycję wewnętrzną. Sprawdź http://ckeditor.com/demo#inline i np. http://nightly.ckeditor.com/standard/samples/inlineall.html – Reinmar

+1

Ta odpowiedź jest już nieaktualna, ponieważ MCE4 zawiera edycję wbudowaną jako opcję do ustawienia init: http://www.tinymce.com/wiki.php/ Konfiguracja: wbudowana – NoBugs