TinyMCE保留了预定义的html结构

时间:2016-05-03 13:21:19

标签: javascript tinymce

我正在寻找TinyMCE在编辑时强制执行预定义HTML结构的方法。

例如,假设我有以下结构。我希望用户能够在各部分之间添加内容,但不能删除部分标题本身。

我目前通过在单击每个部分时动态打开TinyMCE实例来实现此目的,但我宁愿将整体内容加载到单个编辑器中,这将为用户提供更好的体验。

  1. 第1节

    在此处编辑文字

  2. 第2节

    在此处编辑文字

  3. 第3节

    在此处编辑文字

  4. ...

1 个答案:

答案 0 :(得分:1)

TinyMCE有一个名为noneditable的插件,可以让你这样做:

https://www.tinymce.com/docs/plugins/noneditable/

以下是一些利用此插件的示例HTML:

    <table style="width: 60%;" border="1">
        <caption class="mceNonEditable">Ephox Sales Analysis</caption> 
        <tbody> 
            <tr class="mceNonEditable"> 
                <th style="width: 40%;">&nbsp;</th> 
                <th style="width: 15%;">Q1</th> 
                <th style="width: 15%;">Q2</th> 
                <th style="width: 15%;">Q3</th> 
                <th style="width: 15%;">Q4</th> 
            </tr> 
            <tr> 
                <td class="mceNonEditable">East Region</td> 
                <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
            </tr> 
            <tr> 
                <td class="mceNonEditable">Central Region</td> 
                <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
            </tr> 
            <tr> 
                <td class="mceNonEditable">West Region</td> 
                <td>100</td> <td>110</td> <td>115</td> <td>130</td> 
            </tr> 
        </tbody> 
    </table>

包含该类(及其所有子代)的任何标记都是不可编辑的。