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

2024-04-16

我正在为 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>
我不确定这是否是由于我插入数据的方式或收集数据的方式造成的,只是在收集数据时处于警报状态,我看到了正确的空间,就像在编辑器中一样。


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

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

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

EDIT:如果您需要选定的 HTML,请使用CKEDITOR.instances.editor1.getSelectedHtml().getHtml();

另请查看 CKEditor 文档:

  • https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml
  • https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_documentFragment.html#method-getHtml 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-getSelectedText
  • https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

具有 DOM 操作的自定义插件 CKEditor 4.x 的相关文章

随机推荐