使用 DOM 操作的自定义插件 CKEditor 4.x

Question

我正在为 CKEditor 4.7 开发一个自定义插件，它做一个简单的思考，以防用户 select 一些东西，它将把它放在一个 div 中，具有特定的 class，否则它将把 div 与相同的 class 放在 'Add content here' 之类的文本中我尝试根据 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)) {

                }
            });
        }

    }
});

根据某些文档，它必须 return 结果良好。这也是我在 config.js 文件

中对它们的称呼

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

注：官方论坛关门了，搬到这里了:(

更新我已经改变了这样的功能

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 部分，但仍然无法获得 selected 部分。

更新 2
更改 if 后，如果是 selected，我可以获得数据，但是当我在 <div> 之间插入 selected 时，我遇到了问题。

var selection =   editor.getSelection();

给类似的结果一个对象，我资助了一个更复杂的函数，我得到了这样收集的数据

var selection = editor.getSelection().getNative();
alert(selection);

从这个警报中我看到了正确的 selection 而不仅仅是对象，但是当我像

一样插入它时

CKEDITOR.instances.editor1.insertHtml('<div class="desktop">' + selection + '</div>');

它只是将所有 selected 放在一行中而不添加 div，新的 div 用于使用此语法的其他情况。

更新 3
现在的问题是这个函数

CKEDITOR.instances.editor1.insertHtml('<div>' + selection + '<div>');

它会删除所有现有的 HTML 标签，即使我只添加 selection 而没有 <div>
我不确定这是否是因为我插入的方式数据或我收集数据的方式，只是在我收集数据时保持警惕，我看到正确的 space 就像在编辑器中一样。

Answer 1

user select some stuff it will put it in a div with specific class

如果您想检查选择是否不为空，请尝试使用 !selection().getRanges()[0].collapsed 而不是 selection.length>0。

如果您需要更高级的东西，您也可以尝试使用 !!CKEDITOR.instances.editor1.getSelection().getSelectedText() 查看是否选择了任何文本，!!CKEDITOR.instances.editor1.getSelection().getSelectedElement() 查看是否选择了任何元素，例如已选择图像、表格、小部件或锚点。

编辑： 如果您需要选择HTML请使用CKEDITOR.instances.editor1.getSelectedHtml().getHtml();

另请查看 CKEditor 文档：

使用 DOM 操作的自定义插件 CKEditor 4.x

Custom plugin with DOM manipulation CKEditor 4.x

javascript

ckeditor

ckeditor4.x