在所见即所得中禁用/忽略自定义字符串和标签

Question

设置：

我正在使用 TinyMCE 的 Angular 包装器来允许我的用户构建自己的电子邮件模板。这些电子邮件会发送给每个用户组织内的多个人。我创建了自定义工具栏按钮，用于在每个收件人人口统计信息所在的光标位置插入小块文本 [[[data]]]（标签）。

Dear [[[Full_Name]]], the class [[[Class_Name]]] has been canceled, etc.

用户可以保存这些电子邮件模板以供以后使用，当他们决定通过电子邮件发送它们时，我将保存的模板发送到解析器，该解析器将所有 [[[data]]] 替换为收件人的实际数据。

我面临的问题是，我需要在 TinyMCE 文本编辑器中禁用或只读或不可编辑这些 [[[data]]] 标签，以便用户在构建这些电子邮件模板时，他们不会意外更改标识符令牌。 [[[Ful_Name]]] 在我的解析器中不会被识别并且在服务器端失败。

TinyMCE 将任何 HTML 转换为可编辑的文本表示（我并不完全清楚），使我插入的工具栏标签无用，允许它们直接编辑插入的 HTML 的内容。

代码：

<textarea ng-model="vm.Body" ui-tinymce="tinymceOptions" required></textarea>

$scope.tinymceOptions = {
    toolbar: 'generalitems',
    setup: function (editor) {
        editor.addButton('generalitems', {
            type: 'menubutton',
            text: 'General Items',
            icon: false,
            menu: fac.generalMenu(editor)
         });
}

fac.generalMenu = function (editor) {
    return setupMenuItems(editor, fac.variablesGeneral);
}

function setupMenuItems(editor, variables) {
    var menuItems = [];
    angular.forEach(variables, function (item) {
        menuItems.push({
            text: item.Name,
            onclick: function () {
                editor.insertContent('&nbsp;<span style="color:red;">[[[' + item.Token + ']]]</span>&nbsp;');
                }
            });
        });
    return menuItems;
}

我考虑过的事情，但在想出一个实现时遇到了麻烦：

• 捕获 keydown 事件以仅在光标位于 [[[data]]] 标记内时允许使用箭头键。我可以访问该事件，但无法确定光标的位置并检查左侧的起始 [[[ 并检查光标右侧的结束 ]]]
• 在 keydown 事件中，我还可以访问目标 innerHtml 和 innerText，但这是唯一的整个 textarea 表示，而不是内容后面的当前 HTML 标记，就像我的 span <span style="color:red;">[[[' + item.Token + ']]]</span> 一样，它不是。李>
• 我曾尝试 $watch 内容，但在比较整个 textarea 的新旧值时确定是否在 [[[data]]] 标记内进行了更改是不可能的。
• 告诉 TinyMCE 或 HTML 解析器本身忽略/禁用/只读具有特定 id 或 innerText 的 HTML 标记的方法？

目的地：

理想情况下，我希望任何[[[data]]] 标记都表现为字符串中的字符。用户可以将箭头移至标签，使其选择（突出显示）它，他们可以通过按 Del/Backspace 一次删除整个标签，或继续箭头，这将导致光标在整个标签上移动并移到下一个字符。

Answer 1

你想要的是 TinyMCE 中的 noneditable 插件：

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

如果您将不可编辑类应用于包装特殊文本的跨度，TinyMCE 会将整个字符串视为单个字符。这仍然允许某人根据需要删除特殊代码，但他们将无法以其他方式操作特殊字符串中的文本。

例如：

<span class="mceNonEditable" style="color:red;">[[[' + item.Token + ']]]</span>