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;
}

我考虑过的事情，但无法提出实施：

当光标位于[[[data]]]标记内时，捕获keydown事件仅允许箭头键。我可以访问该事件，但无法确定光标的位置，并检查左侧是否有开始[[[并检查光标右侧是否有结束]]]
在keydown事件中，我还可以访问目标innerHtml和innerText，但这是唯一的整个textarea表示，而不是内容背后的当前HTML标记，例如我的span <span style="color:red;">[[[' + item.Token + ']]]</span>。
我曾尝试$观看内容，但确定更改是否在[[[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>

在wysiwyg

设定：

代码：

目的地：

1 个答案: