TinyMCE với contenteditable

Question

Tôi đã đọc rằng TinyMCE có hỗ trợ cho contenteditable thay vì phiên bản textarea/iframe

Nguồn:

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

Nó nói:

Tôi đã phát hiện thuộc tính cấu hình có tên 'content_editable' trong mã nguồn của TinyMCE v3.5.2. Cờ này ngăn chặn iframe từ hiển thị.

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> 

gì tôi đã thay đổi

• Tôi sử dụng chế độ "chính xác" để làm cho tinyMCE chấp nhận một div. http://www.tinymce.com/wiki.php/Configuration:elements
• Tôi thêm ID làm phần tử trong JS.
• Tôi có một trình soạn thảo phù hợp với lớp học.
• Tôi thêm content_editable và đặt nó thành true trong JS.

này happend

Không có gì. Kịch bản chạy và cho tôi không có lỗi. Bất kỳ gợi ý nào?

Answer 1

Không có chính thức configuration parameter được gọi là 'content_editable', nhưng tôi đã tìm thấy trong nguồn.

Đúng là tinymce sử dụng khung nội tuyến có thể chỉnh sửa để chỉnh sửa nội dung của khung nội tuyến. Tôi theo dõi sự ngắt quãng, nhưng như Spoke cho biết sẽ có nhiều sự cân bằng và với các trình duyệt mới, bạn không bao giờ có thể chắc chắn một trình soạn thảo như thế sẽ phản ứng như thế nào. Tôi khuyên bạn không nên sử dụng trình soạn thảo này.

Answer 2

TinyMCE 4 có tính năng này hỗ trợ chính thức - hãy xem phần "inline" Ví dụ: http://www.tinymce.com/tryit/inline.php