CKEditor 4.7 : Is it possible to apply css class to specific elements only in the WYSIWYG mode?

Question

是否可以使用 CKEditor 的另一个功能在编辑时为所见即所得模式添加一个 css 类(而不是为结果内容)？ (就像拼写检查器/scayt 仅在所见即所得模式下添加带有波浪下划线样式的跨度)

我想要的场景

我为 CKEditor 4.7 创建了一个插件，它搜索具有特定内容的特定标签(例如，一个空段落可能会导致最终网站上出现意外的“空格”)，并向标签添加一个 css 类。该类添加了一个红色边框来通知编辑器“空”标签。 我实际上使用editor.document.$.getElementsByTagName(tagName);和纯 javascript 添加 css 类 rte-empty .

我的问题

我的方法也将 css 类添加到 <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 这样的可能性插件的作用:添加带有类的span标签，用于为字典中找不到的单词添加波浪下划线。

Answer 1

我个人会听toDataFormat和 toHtml向所需元素添加然后删除 CSS 类的事件。这样，用户在从 CKEditor 检索数据或切换到源模式时将看不到该类。

以下是更新后的代码(您仍需要根据需要进行自定义):

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 .