8

私は TinyMCE が textarea / iframe バージョンの代わりに contenteditable をサポートしていることを読みました

ソース：

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

それは言います：

TinyMCE v3.5.2 のソース コードで、「content_editable」という構成プロパティを発見しました。このフラグは、iframe がレンダリングされないようにします。

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>

私が変えたこと

  • tinyMCE が div を受け入れるようにするには、「exact」モードを使用します。 http://www.tinymce.com/wiki.php/Configuration:elements
  • JS の要素として ID を追加します。
  • クラスに一致する editor_selector があります。
  • content_editable を追加し、JS で true に設定します。

これは起こった

何もない。スクリプトが実行され、エラーは発生しません。ヒントはありますか？

4

2 に答える 2

6

TinyMCE 4 では、この機能が公式にサポートされています。「インライン」の例を参照してください: http://www.tinymce.com/tryit/inline.php

于 2014-05-02T05:16:17.610 に答える
2

「content_editable」と呼ばれる公式の構成パラメーターはありませんが、ソースで見つけました。

tinymce が contenteditable iframe を使用してコンテンツを編集しているのは事実です。私は議論に従いましたが、スポークが言ったように、多くのトレードオフがあり、新しいブラウザーでは、そのようなエディターがどのように反応するかは決してわかりません. そのようなエディタは使用しないことをお勧めします。

于 2013-02-22T09:22:38.117 に答える