设置:
我正在使用 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(' <span style="color:red;">[[[' + item.Token + ']]]</span> ');
}
});
});
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 来删除整个标签,或者继续指向箭头,这将导致光标移动到整个标签上并移至下一个字符。
最佳答案
你想要的是TinyMCE中的noneditable
插件:
https://www.tinymce.com/docs/plugins/noneditable/
如果您将不可编辑的类应用于包含特殊文本的范围,TinyMCE 会将整个字符串视为单个字符。这仍然允许某人根据需要删除特殊代码,但他们将无法以其他方式操作特殊字符串中的文本。
例如:
<span class="mceNonEditable" style="color:red;">[[[' + item.Token + ']]]</span>
关于javascript - 禁用/忽略所见即所得中的自定义字符串和标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42218148/