设置：
我正在使用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(' <span style="color:red;">[[[' + item.Token + ']]]</span> ');
}
});
});
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一次删除整个标签，或继续箭头，这将导致光标在整个标签上移动到下一个角色 .
1 回答
你想要的是TinyMCE中的
noneditable插件：https://www.tinymce.com/docs/plugins/noneditable/
如果将非编辑类应用于包装特殊文本的范围，TinyMCE会将整个字符串视为单个字符 . 这仍然允许某人删除特殊代码，如果他们想要，但他们将无法以其他方式操纵特殊字符串中的文本 .
例如：