Disable/ignore 所见即所得的自定义字符串和标签

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，但这是唯一的整个文本区域表示，而不是内容后面的当前 HTML 标签，就像我的 span <span style="color:red;">[[[' + item.Token + ']]]</span> 事实并非如此。
我已经尝试 $watch 内容，但是在比较整个文本区域的新旧值的同时确定更改是否在 [[[data]]] 标签内进行被证明是不可能的。
告诉 TinyMCE 或 HTML 解析器本身到 ignore/disable/readonly HTML 具有特定 id 或 innerText 的标签的方法？

目的地：

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

Answer 1

你要的是TinyMCE中的noneditable插件：

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

如果将不可编辑的 class 应用于包裹特殊文本的范围，TinyMCE 会将整个字符串视为单个字符。这仍然允许某人删除特殊代码，但他们将无法以其他方式操作特殊字符串中的文本。

例如：

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

Disable/ignore 所见即所得的自定义字符串和标签

Disable/ignore custom strings and tags in wysiwyg

html

javascript

tinymce

angularjs

设置：

代码：

目的地：