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

Question

设置:

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

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

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

我面临的问题是，我需要这些[[[data]]]在 TinyMCE 文本编辑器中禁用或只读或不可编辑的标签，以便用户在构建这些电子邮件模板时，不会意外更改标识符 token 。 [[[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 内容，但确定更改是否在 [[[data]]] 内进行。事实证明，在比较整个文本区域的新旧值时标记标签是不可能的。
• 有一种方法可以告诉 TinyMCE 或 HTML 解析器本身忽略/禁用/只读具有特定 id 或 insideText 的 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>