具有DOM操作CKEditor 4.x的自定义插件 [英] Custom plugin with DOM manipulation CKEditor 4.x

问题描述

我正在为CKEditor 4.7开发一个自定义插件，可以做一个简单的思考，以防用户选择某些东西将其放入具有特定类的div中，否则将为具有相同类的div加上诸如'在此处添加内容'
我尝试根据CKEditor文档使用某些功能，但确实有问题。
是插件文件夹名称的代码=> customdiv ，file => plugin.js

I am developing one custom plugin for the CKEditor 4.7 which do a simple think take in case user select some stuff it will put it in a div with specific class, else it will put a div with same class just with text like 'Add content here' I try to use some functions according to CKEditor docs but have something really wrong. here is the code for the plugin folder name=> customdiv, file=> 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 文件

According to some docs it have to return the result good. Also this is how I call them in my 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 I have change the function like this

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

This makes it work for the else part, but still can't get the selected one.

更新2

if 如果被选中，我可以获取数据，但是当我插入< div> 我遇到了一个问题。

UPDATE 2
After change of the if I can get data if is selected, but when I do insert selected between <div> I face a problem.

var selection =   editor.getSelection();

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

give like result an object, and I funded out a more complex function and I get collected data like this

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

在警报中，我看到了正确的选择，而不仅仅是对象，当我像插入时一样

from this in alert I see the proper selection and not just object,but when I insert it like

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

它只是将所有选定内容放在一行中而不添加div，其他情况下使用新的div这种语法。

it just put all selected in one line and not adding the div, new div for else case working with this syntax.

更新3

现在的问题是此功能

UPDATE 3
The problem now is this function

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

它会删除所有现有的HTML标记，即使我只是添加选择而没有< div>
我不确定这是由于插入数据的方式还是由于收集数据的方式，只是在收集数据时保持警惕，就像在编辑器中看到正确的空间一样。

it delete all existing HTML tags even if I add just selection without <div>
I am not sure if this is because of the way I insert data or way I collect data, just in alert when I collect data I see correct space like in the editor.

推荐答案

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

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

如果要检查选择项是否为空，请不要使用 selection.length> 0 尝试使用！selection（）。getRanges（）[0] .collapsed 。

If you want to check if selection is not empty, please instead of selection.length>0 try using !selection().getRanges()[0].collapsed.

如果您需要更高级的功能，还可以尝试使用
!! CKEDITOR.instances.editor1.getSelection（）。getSelectedText（ ）来查看是否选择了任何文本，然后 !! CKEDITOR.instances.editor1.getSelection（）。getSelectedElement（）来查看是否有类似的元素例如

If you need something more advanced you could also try using !!CKEDITOR.instances.editor1.getSelection().getSelectedText() to see if any text was selected and !!CKEDITOR.instances.editor1.getSelection().getSelectedElement() to see if any element like e.g. image, tabl,e widget or anchor was selected.

编辑：
如果需要选择HTML，请使用 CKEDITOR.instances.editor1.getSelectedHtml（）。getHtml（）;

请同时查看CKEditor文档：

Please also have a look at CKEditor documentation:

• 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

• 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

这篇关于具有DOM操作CKEditor 4.x的自定义插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！