javascript – 将基本样式应用于TinyMce中的不可编辑元素

2019年7月28日 387次阅读

语境：

TinyMce有一个noneditable插件,允许使元素不可编辑.如果元素具有mceNonEditable类,则TinyMce将使元素不可编辑.

问题：

我希望能够使用基本样式标记包装此不可编辑的元素.

例如,如果我有：

Hello <span class="mceNonEditable">user_name</span> how are you today ?

如果我单击user_name选择不可编辑的范围,然后单击TinyMce Blod按钮.

《javascript – 将基本样式应用于TinyMce中的不可编辑元素》

我希望结果如下：

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",
           "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*/
  }
});
点赞