CKEditor 4.7：是否可以仅在所见即所得模式下将 css class 应用于特定元素？

Question

是否可以使用 CKEditor 的另一个功能在编辑时为所见即所得模式添加 css class（而不是结果内容）？ （例如 spellchecker/scayt 仅在所见即所得模式下添加带有波浪下划线样式的跨度）

我想要的场景

我为 CKEditor 4.7 创建了一个插件，它搜索具有特定内容的特定标签（例如，一个空段落可能导致最终网站上的 "spaces" 不是预期的）并添加 css class 给标签。 class 添加红色边框以告知编辑器有关 "empty" 标记的信息。 我实际上使用 editor.document.$.getElementsByTagName(tagName); 和纯 javascript 添加 css class rte-empty.

我的问题

我的方法也将 css class 添加到 <textarea /> 的最终内容中。

这是我发布问题时的代码：

/**
 * Check for empty tags plugin
 */

'use strict';

(function () {
 CKEDITOR.plugins.add('emptytags', {
  lang: "de,en",
  onLoad: function(editor) {
   CKEDITOR.addCss(
    '.cke_editable .rte-empty {' +
     ' border: 1px dotted red;' +
    '}'
   );
  },
  init: function (editor) {

   // Default Config
   var defaultConfig = {
    tagsToCheck: {0: 'p'}
   };
   var config = CKEDITOR.tools.extend(defaultConfig, editor.config.emptytags || {}, true);

   editor.addCommand('checkForEmptyTags', {
    exec: function (editor) {
     var editorContent = editor.getData();
     // Stop check and inform editor if the editor has no content.
     if (editorContent === '') {
      alert(editor.lang.emptytags.AlertEditorContentEmpty)
      return;
     }
     // Check if tag name's to check are set
     if (config.tagsToCheck.length > 0 && config.tagsToCheck[0] !== null) {
      var index;
      for (index = 0; index < config.tagsToCheck.length; ++index) {
       var tagName = config.tagsToCheck[index];
       var tags = editor.document.$.getElementsByTagName(tagName);
       for (var i=0; i < tags.length; i++) {
        if (checkForRealEmptyTag(tags[i].innerHTML)
         || checkForEmptyTagWithSpace(tags[i].innerHTML)
         || checkForEmptyTagWithNbsp(tags[i].innerHTML)
        ) {
         if(tags[i].className.indexOf("rte-empty") < 0){
          tags[i].className += "rte-empty";
         }
         var noEmptyTagFound = false;
        } else {
         tags[i].classList.remove("rte-empty");
        }
       }
      }
      // Inform editor that no empty tag can be found (anymore)
      if (noEmptyTagFound === true) {
       alert(editor.lang.emptytags.AlertEditorNoEmptyTagFound);
      }
     }
    }
   });
   editor.ui.addButton && editor.ui.addButton('Check for empty tags', {
    label: editor.lang.emptytags.ToolbarButton,
    command: 'checkForEmptyTags',
    toolbar: 'insertcharacters'
   });
  }
 });

 function checkForRealEmptyTag(content) {
  return content.length === 0;

 }

 function checkForEmptyTagWithNbsp(content) {
  return content === '&nbsp;' || content.trim() === '<br>';
 }

 function checkForEmptyTagWithSpace(content) {
  return content.trim().length === 0;
 }

})();

因此

我正在寻找像 SCAYT 插件那样的可能性：添加带有 class 的 span 标签，用于为字典中找不到的单词添加波浪下划线。

Answer 1

我会亲自聆听 toDataFormat and toHtml 事件，然后将 CSS class 添加到您想要的元素中。这样，用户在从 CKEditor 检索数据或切换到源模式时将不会看到 class。

更新后的代码如下（您还需要根据自己的需要进行自定义）：

CKEDITOR.plugins.add('emptytags', {
    lang: "de,en",
    onLoad: function(editor) {
        CKEDITOR.addCss(
        '.cke_editable .rte-empty {' +
            ' border: 1px dotted red;' +
        '}'
        );
    },
    init: function (editor) {

        editor.on('toHtml', function (evt) {

            markEmptyChildren(evt.data.dataValue);

        }, null, null, 14);

        editor.on('toDataFormat', function (evt) {

            unmarkEmptyChildren(evt.data.dataValue);

        },
        null, null, 14);

        function markEmptyChildren(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                var child = children[i];
                if (child.name == "p") {
                    if (isEmpty(child)) {
                    child.addClass("rte-empty")
                    } else {
                    child.removeClass("rte-empty")
                    }
                }
                markEmptyChildren(child);
                }
            }
        }

        function unmarkEmptyChildren(element) {
            var children = element.children;
            if (children) {
                for (var i = children.length; i--; ) {
                var child = children[i];
                if (child.name == "p") {
                    child.removeClass("rte-empty")
                }
                unmarkEmptyChildren(child);
                }
            }
        }

        function isEmpty(node) {

            if (node instanceof CKEDITOR.htmlParser.element) {
                if (node.name == "br") {
                    return true;
                } else {
                    var children = node.children;
                    for (var i = children.length; i--; ) {
                        var child = children[i];
                        if (!isEmpty(children[i])) {
                            return false;
                        }
                    }
                    return true;
                }
            } else if (node instanceof CKEDITOR.htmlParser.text) {
                return node.value.trim().length === 0;
            } else {
                return true;
            }

        }
    }
});

See JSFiddle here.