语境：
TinyMce有一个noneditable插件,允许使元素不可编辑.如果元素具有mceNonEditable类,则TinyMce将使元素不可编辑.
问题：
我希望能够使用基本样式标记包装此不可编辑的元素.
例如,如果我有：
Hello <span class="mceNonEditable">user_name</span> how are you today ?
如果我单击user_name选择不可编辑的范围,然后单击TinyMce Blod按钮.
我希望结果如下：
Hello <b><span class="mceNonEditable">user_name</span></b> how are you today ?
但不是这样,没有任何事情发生.当我单击TinyMce Blod按钮时,代码不会改变.
我创建了一个小的jsfiddle来演示这个：https://jsfiddle.net/timotheejeannin/2hhpenm5/
我尝试了什么：
>以不同方式配置不可编辑的插件(https://www.tinymce.com/docs/plugins/noneditable/)
>单击按钮时,使用data-mce-contenteditable属性覆盖不可编辑的行为. (See usage in TinyMce source code in DOMUtils.js line 1739)
>绕过内容可编辑检测. (See in TinyMce source code in Formatter.js line 609)
>构建我自己的插件(看起来不可能通过插件解决问题)
我真的希望你能帮忙！
解决方法
这是我的解决方法.可能会出现故障.
tinyMCE.init({
/*your initializer settings*/
setup: function (ed) {
ed.on('ExecCommand',function(e) {
var selection = tinyMCE.activeEditor.selection.getContent();
var el = document.createElement( 'html' );
el.innerHTML = "<head></head><body>"+selection+"</body>";
var datapoints = Array.from(el.getElementsByClassName('mceNonEditable'));
if (datapoints.length>0) {
var styletoggle = function(key,value) {
var criteria = (datapoints.map(function(datapoint){
return (datapoint.style[key] == value);
}).reduce(function(a,b) {
return a&&b;
}));
if (criteria) {
datapoints.forEach(function(datapoint){
datapoint.style[key] = "";
datapoint.contentEditable = false;
});
} else {
datapoints.forEach(function(datapoint){
datapoint.style[key] = value;
datapoint.contentEditable = false;
});
};
}
switch (e.command) {
case 'mcetoggleFormat':
switch (e.value) {
case 'bold':
styletoggle("font-weight","bold");
break;
case 'italic':
styletoggle ("font-style","italic");
break;
case 'strikethrough':
styletoggle ("text-decoration","line-through");
break;
case 'underline':
styletoggle ("text-decoration","underline");
};
tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML);
break;
case ("mceApplyTextcolor"):
styletoggle ("color",e.value);
tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML);
break;
case ("FontName"):
styletoggle ("font-family",e.value);
tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML);
break;
case ("FontSize"):
styletoggle ("font-size",e.value);
tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML);
break;
case ("RemoveFormat"):
datapoints.forEach(function(datapoint){
["font-weight","font-style","text-decoration","color","font-family","font-size"].forEach(function(key){
datapoint.style[key]="";
})
datapoint.contentEditable = false;
});
tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML);
break;
};
}
});
/*more stuff*/
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
