TinyMCE 保留 pre-defined html 结构

Question

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

例如，假设我有以下结构。我希望用户能够在部分之间添加内容，但不能自己删除部分 headers。

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

第 1 部分

在此处编辑文本
第 2 部分

在此处编辑文本
第 3 部分

在此处编辑文本

...

Answer 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>

任何包含 class（及其所有子项）的标签都将不可编辑。

TinyMCE 保留 pre-defined html 结构

TinyMCE retain pre-defined html structure

javascript

tinymce