在伪元素之前和之后插入空白P标签 [英] Inserting blank P tags before and after fake element
问题描述
我是 CKEditor 的新手，写我的第一个插件，我只是找不到这个地方的答案。
I'm new to CKEditor, writing my first plugin and i just can't find the answer to this one anywhere.
我有一个插件，在源文件中创建一个div元素，只包含文本 !!!!! NEWSTABLE !!!!! 。类属性设置为 newsDiv 。在WYSIWYG编辑器上，我只想让它显示一个假的占位符元素。这工作正常，问题是，当我切换回WYSIWYG模式后，在源模式，它插入空白段落标签上下插入的div。
将enterMode切换为 CKEDITOR.ENTER_BR 修复了这一点，但我仍然希望输入键可以创建一个段落而不是一个空格。
I have a plugin which creates a div element in the source containing just the text !!!!!NEWSTABLE!!!!!. The class attribute is set to newsDiv. On the WYSIWYG editor, I just want it to display a fake placeholder element. This works fine, the problem is that when I switch back to WYSIWYG mode after having been in source mode, it inserts blank paragraph tags above and below the inserted div.
Switching enterMode to CKEDITOR.ENTER_BR fixes this, but I would still like the enter key to make a paragraph rather than a break-space.
我的插件代码（灵感来自flash插件源代码）如下：
My plugin code (inspired by the flash plugin source code) is as follows:
(function() {
function isNewsEmbed(element) {
return (element.attributes.class == 'newsDiv');
}
function createFakeElement(editor, realElement) {
return editor.createFakeParserElement(realElement, 'cke_news', 'div', false);
}
CKEDITOR.plugins.add('newsTable', {
init: function(editor) {
var pluginName = 'newsTable';
editor.ui.addButton('NewsTable', {
label: 'Add News Section',
icon: 'https://d26h7uo9h7bqnn.cloudfront.net/famfamfam/newspaper_add.png',
command: pluginName
});
editor.addCommand(pluginName, {
exec: function(editor) {
var node = new CKEDITOR.dom.element('div');
node.setAttribute('class', 'newsDiv');
node.setHtml('!!!!!NEWSTABLE!!!!!');
elem = editor.createFakeElement(node, 'cke_news', 'div', false)
editor.insertElement(elem);
}
});
var css = 'img.cke_news{' +
'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
'background-position: center center;' +
'background-repeat: no-repeat;' +
'border: 1px solid #a9a9a9;' +
'width: 80px;' +
'height: 80px;' +
'}';
editor.addCss(css);
},
afterInit: function(editor) {
var dataProcessor = editor.dataProcessor,
dataFilter = dataProcessor && dataProcessor.dataFilter;
if (dataFilter) {
dataFilter.addRules({
elements: {
'div' : function( element ) {
var attributes = element.attributes,
classId = attributes.classid && String( attributes.classid ).toLowerCase();
if (!classId && isNewsEmbed(element)){
return createFakeElement( editor, element );
}
return null;
}
}
});
}
},
requires : [ 'fakeobjects' ]
});
})();
按下激活此插件的按钮后，我按Source 。
After pressing the button that activates this plugin, I press 'Source' and it is as expected...
<p>
<div class="newsDiv">
!!!!!NEWSTABLE!!!!!</div>
</p>
但是，如果从那里进入WYSIWYG模式并再次返回（不做任何其他）已改为以下，我不期望。
However, if from there ones goes into WYSIWYG mode and back again (without doing anything else) the code has changed to the following, which i dont expect.
<p>
</p>
<div class="newsDiv">
!!!!!NEWSTABLE!!!!!</div>
<p>
</p>
我做错了什么？
推荐答案
我知道这是一个相当晚的答案（我正在寻找解决另一个问题，并偶然发现这个问题），但是你不能这样做的原因是因为< p> 和< div> 标签是块级别元素，在另一个块级元素中。 （只是无效的HTML）。
I know it's a rather late answer (I was searching to solve another issue, and stumbled upon this question), but the reason you can't do this, is because both the <p> and <div> tags are "block level" elements, and you can't put a block level element in another block level element. (It's just invalid HTML).
CKEditor会按照上述方式自动修复这个错误。
CKEditor automatically repairs this, in the way you're seeing above.
这篇关于在伪元素之前和之后插入空白P标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
