语境:
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*/ } });