Question

每当插入一个table-element（通过table-icon）时，我想用另一个元素作为前缀。例如

<div>Hello World!</div> <!-- this was automatically added -->
<table>
  <tr>
    <td>A</td>
    <td>A</td>
    <td>A</td>
  </tr>
</table>

尝试使用自定义插件实现此目的，但我无法让它工作：

(function ($) {

  CKEDITOR.plugins.add('hello_world', {
    init: function (editor) {
      editor.on('insertElement', function(ev) {
        if (ev.data.getName() === 'table') {
          var helloWorld = new CKEDITOR.dom.element('div');
          helloWorld.appendText('Hello World!');
          ev.data.insertBeforeMe(helloWorld);
        }
      });
    }
  });

})(jQuery);

控制台返回“未捕获的TypeError：无法读取属性'insertBefore'的null”错误。然而，API文档（http://docs.ckeditor.com/#!/api/CKEDITOR.dom.element）声明insertBefore和insertBeforeMe函数可用。

Answer 1

您收到此错误，因为在此阶段，该元素尚未添加到CKEditor（因此其父级为null）。

如果您不介意在元素后添加评论，则可以改为使用以下代码：

CKEDITOR.plugins.add('hello_world', {
    init: function (editor) {
      editor.on('insertElement', function(ev) {
        if (ev.data.getName() === 'table') {        
          ev.data.append(new CKEDITOR.dom.comment(' this was automatically added '), true );
        }
      });
    }
  });

然后您将获得以下输出：

<table><!-- this was automatically added -->

See JSFiddle here

注意：如果您必须在表格之前添加评论并且您感到勇敢，您可以使用计时器延迟添加评论：

CKEDITOR.plugins.add('hello_world', {
    init: function (editor) {
      editor.on('insertElement', function(ev) {
        if (ev.data.getName() === 'table') {
            var table = ev.data;
            setTimeout(function () { table.insertBeforeMe(new CKEDITOR.dom.comment(' this was automatically added '))}, 0);
        }
      });
    }
  });

然后您将获得所需的输出：

<!-- this was automatically added -->
<table>

See JSFiddle here

Answer 2

可能是您遇到的问题的解决方案：

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'responsivetables';
};

CKEDITOR.plugins.add('responsivetables', { 
    init: function (editor) {
        editor.on('insertElement', function (event) {
            if (event.data.getName() === 'table') {
                var div = new CKEDITOR.dom.element('div').addClass('table-scroll'); // Create a new div element to use as a wrapper.
                div.append(event.data); // Append the original element to the new wrapper.
                event.data = div; // Replace the original element with the wrapper.
            }
        }, null, null, 1);
    }
});

将CKEditor元素添加到另一个元素前面

2 个答案: