带有 DOM 操作的自定义插件 CKEditor 4.x

Question

我正在为 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 文件中称呼它们的方式

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

更新 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 用于其他情况下使用此语法。

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

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

即使我只添加没有<div>的选择，它也会删除所有现有的HTML标签
我不确定这是因为我插入数据的方式还是我收集数据的方式，只是在我收集数据时保持警惕在编辑器中查看正确的空间。

Answer 1

用户选择一些东西，它会将其放入具有特定类的 div 中

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

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

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

还请查看 CKEditor 文档：

• https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_documentFragment.html#method-getHtml
• https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedText
• https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement