用另一个元素前置CKEditor元素

每当插入一个表元素（通过表图标）时，我都想用另一个元素作为它的前缀。例如

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

---

控制台返回一个“UncaughtTypeError:无法读取null的属性'insertBefore'的”错误。但是，API文档（）声明insertBefore和insertBeforeMe函数可用。

您会收到此错误，因为在此阶段，元素尚未添加到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 -->

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

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

---

出现此错误是因为在此阶段，元素尚未添加到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 -->

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

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

---

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

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.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);
    }
});