CKEditor 4.7：是否可以仅在WYSIWYG模式下将css类应用于特定元素？

Question

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

我想要的场景

我已经为CKEditor 4.7创建了一个插件，用于搜索具有特定内容的特定标签（例如，在最终网站上可能导致无意图＆＃34;空格＆＃34;的空段落）并添加css类到标签。该类添加了一个红色边框，以通知编辑关于＆＃34;空＆＃34;标签。 我实际上使用editor.document.$.getElementsByTagName(tagName);和普通javascript来添加css类rte-empty。

我的问题

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

在发布问题时，我的代码在这里：

＆＃13;

＆＃13;

/**
 * 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;
	}

})();

＆＃13;

＆＃13;

＆＃13;

因此

我正在搜索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