我正在为 CKEditor 4.7 开发一个自定义插件,它做了一个简单的思考,以防用户选择一些东西,它会将其放入具有特定类的 div 中,否则它将放入一个具有相同类的 div ,其中包含文本,例如“在此处添加内容”我尝试根据 CKEditor 文档使用一些函数,但确实有问题。
这是插件文件夹名称的代码=>customdiv
,文件=>plugin.js
CKEDITOR.plugins.add('customdiv', {
icons: 'smile',
init: function (editor) {
editor.addCommand( 'customdiv',{
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
}else{
selection='<div class="desktop">Add your text here </div>';
}
return {
selection
};
}
});
editor.ui.addButton( 'Customdiv',
{
label : 'Custom div',
command : 'customdiv',
toolbar: 'customdiv',
icon : this.path + 'smile.png'
});
if (editor.contextMenu) {
editor.addMenuGroup('divGroup');
editor.addMenuItem('customdiv', {
label: 'Customdiv',
icon: this.path + 'icons/smile.png',
command: 'customdiv',
group: 'divGroup'
});
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('customdiv', true)) {
}
});
}
}
});
根据一些文档,它必须返回良好的结果。
这也是我在我的书中称呼他们的方式config.js
file
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'templates,customdiv';
config.allowedContent = true;
config.toolbar = 'Custom';
config.toolbar_Custom = [
{ name: 'divGroup', items: [ 'Customdiv' ] },
{name: 'document', items: ['Source', '-', 'Save', 'Preview', '-', 'Newplugin']},
/* MOre plugins options here */
];
};
注意:官方论坛已关闭并移至此处:(
UPDATE我已经改变了这样的功能
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}else{
selection='<div class="desktop">Add your text here </div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}
}
这使得它适用于else
部分,但仍然无法获取选定的部分。
UPDATE 2
更改后if
如果选择,我可以获取数据,但是当我在之间插入选择时<div>
我面临一个问题。
var selection = editor.getSelection();
给类似的结果一个对象,我资助了一个更复杂的函数,我得到了这样收集的数据
var selection = editor.getSelection().getNative();
alert(selection);
从这个警报中我看到了正确的选择,而不仅仅是对象,但是当我像这样插入它时
CKEDITOR.instances.editor1.insertHtml('<div class="desktop">' + selection + '</div>');
它只是将所有选定内容放在一行中,而不添加 div,新的 div 用于使用此语法的其他情况。
UPDATE 3
现在的问题是这个函数
CKEDITOR.instances.editor1.insertHtml('<div>' + selection + '<div>');
即使我只添加选择而不添加,它也会删除所有现有的 HTML 标签<div>
我不确定这是否是由于我插入数据的方式或收集数据的方式造成的,只是在收集数据时处于警报状态,我看到了正确的空间,就像在编辑器中一样。