我为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 === ' ' || content.trim() === '<br>';
}
function checkForEmptyTagWithSpace(content) {
return content.trim().length === 0;
}
})();我正在寻找一种像SCAYT插件那样的可能性：用一个类添加跨度标签，以在字典中找不到的单词上添加波浪下划线。
我将亲自收听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;
}
}
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句