您表示您已经创建了处理对象的插件,但是您要解决的问题是当对象是第一项时,无法在对象之前插入内容。
看起来这个错误报告是关于这个问题的:
Can't move cursor behind non-editable element (or placeholder) in CKEditor
我使用我的插件将这段代码插入到编辑器中:
<div contenteditable="false">
<img src="someimage.jpg" />
<p>
Some text
<span>Some subtext</span>
</p>
<img src="someStaticImage.jpg" />
</div>
如果需要,您还可以添加 display: inline-block; 样式(请参阅下面的讨论):
根据我的测试,您似乎无法使用后退箭头将内容放在对象之前,但是如果您将箭头返回到该行内容并按 home 键,您可以键入在对象之前。好像也可以用鼠标点击左上角,可以在对象前添加内容。
这两种方法都将对象推到下一行,因为它是<div>,如果您希望对象留在第一行,可以将 div 的样式更改为display: inline-block;。我尝试将对象 <div> 改为 <span>,但随后可以编辑对象的某些部分。
你不能使用退格删除对象,但是你可以点击对象选择它然后删除它。
我在 Win 7 上使用 Firefox 20 和 IE 9 检查了上面讨论的信息。Google Chrome 有很多问题:
当使用插件插入 HTML 块时,contenteditable="false" 属性被剥离。
所以我试着看看如果我只是在源代码模式下将该代码块粘贴到 CkEditor 中它是如何工作的。 contenteditable="false" 属性没有被删除,但整个内容区域变得不可编辑。
我的测试使用的是 CkEditor 3.6.1,所以这在 CkEditor 4.X 中可能不是问题。
这个错误报告似乎是关于我在使用 Chrome 时无法在内容区域执行任何操作时遇到的问题,报告指出版本 3.X:
ContentEditable, Image and Chrome
其他信息
这是一个来自 CKSource 的插件,可能会有所帮助:
Magic Line
说明:
使用此插件,您可以在通常无法到达的空间中创建新段落。例如,在文档开头的表格上方。
这是我将内容插入编辑器的插件,它不能解决您遇到的问题,但您可以使用它为插件添加功能。如果没有创建插件的人发现这个并想尝试一下,我会写完整的说明。
这是ckeditor/plugins/cwmarinsertsnippet/plugin.js 文件中的代码:
/**
* Plugin to insert the contents of an element into the editor content area.
*/
// Register the plugin with the editor. cwmarinsertsnippet
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add( 'cwmarinsertsnippet',
{
// The plugin initialization logic goes inside this method.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
init: function( editor )
{
// Define an editor command that grabs the content of an element and inserts it into the content area.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand
editor.addCommand( 'cwMarInsertSnippet',
{
// Define a function that will be fired when the command is executed.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.commandDefinition.html#exec
exec : function( editor )
{
// Create an element based on a native DOM element.
var codesnippet = new CKEDITOR.dom.element( document.getElementById( 'resmar' ) );
//alert( codesnippet.getHtml() );
// Insert the element content into the document.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
editor.insertHtml( codesnippet.getHtml() );
}
});
// Create a toolbar button that executes the plugin command.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton
editor.ui.addButton( 'CwMarInsertSnippet',
{
// Toolbar button tooltip.
label: 'Insert Search Box',
// Reference to the plugin command name.
command: 'cwMarInsertSnippet',
// Button's icon file path.
icon: this.path + 'images/buttonicon.gif'
});
}
});
需要添加到配置文件中:
config.extraPlugins = 'cwmarinsertsnippet';
为了使按钮可见,按钮名称“CwMarInsertSnippet”需要添加到配置工具栏条目:
CKEDITOR.config.toolbar_XXXX
[
Snip...
{ name: 'tools', items : [ 'About','CwMarInsertSnippet' ] },
... End Snip
];
插件的按钮应该是 13px X 13px(对于 CkEditor 3.X,不确定版本 4.X)。它被放置在这里:
ckeditor/plugins/cwmarinsertsn-p/images
名称应与插件代码末尾的editor.ui.addButton 函数中使用的名称匹配(此路径实际上可以是您想要的任何位置)。
下面是添加到使用 CkEditor 的页面的代码示例:
<div id ="resmar">
<div contenteditable="false">
<img src="someimage.jpg" />
<p>
Some text
<span>Some subtext</span>
</p>
<img src="someStaticImage.jpg" />
</div>
</div>
如果需要,您还可以添加 display: inline-block; 样式:
<div style="display:inline-block" contenteditable="false">
如果容器元素不应该出现在页面上,可以通过样式隐藏它。
基本上,只要把你要插入的内容放在带有目标ID的元素里面
<div id ="resmar">
Content to be inserted.
</div>
当然,插件名称和元素 ID 可以是任何你喜欢的。