CKEditor 4短码更换

Question

我试图制作一个短代码＆＃34;插件＆＃34; - 类似于Wordpress与TinyMce一起使用的内容。我希望用户能够通过按钮插入短代码（如[gallery id="3"]或[image id="9"]），然后显示占位符而不是实际的短代码。一旦我开始工作，我就会将所有代码都放到github上。

当前设置

我有一个按钮，使用insertHtml()将html插入编辑器，如下所示：

// Custom button code
CKEDITOR.instances['editor_instance_name'].insertHtml '<div class="media-library-gallery">[gallery id=' + gallery_id + ']</div>'

并且我已添加extraAllowedContent以允许div使用我需要的课程：

// CKEditor configuration (config.js)
config.extraAllowedContent = 'div(media-library-image,media-library-gallery)';

我设法使用以下代码将div.media-library-gallery替换为图像：

(function() {
  CKEDITOR.plugins.add('media_gallery', {

    init: function(editor) {
      CKEDITOR.addCss('.media_gallery{background: #f2f8ff url("/assets/gallery.png") no-repeat scroll center center; border: 1px dashed #888; display: block; width:100%; height: 250px;}');
    },

    afterInit: function( editor ) {
      var dataProcessor = editor.dataProcessor;
      var dataFilter = dataProcessor && dataProcessor.dataFilter;

      dataFilter.addRules({
        elements: {
          'div': function(element) {
            if (element.attributes.class == "media-library-gallery") {
              var fakeElement = editor.createFakeParserElement(element, 'media_gallery', 'div', false);
              return fakeElement;
            }
          }
        }
      })

    }

  })
})();

问题

目前，替换项会在段落标记中嵌套div：

<p>
  <div class="media-library-gallery">[gallery id="5"]</div>
</p>

我不想从默认enterMode更改CKEDITOR.ENTER_P，但我想摆脱周围的p。我可以使用insertHtml执行此操作，还是编写一个可以为我执行此操作的规则？欢迎任何其他建议。

我一直在寻找http://docs.ckeditor.com/寻求解决方案/灵感，但运气不佳。

Answer 1

有点晚了，但是尝试将div作为元素插入：

var element = CKEDITOR.dom.element.createFromHtml('<div class="media-library-gallery">[gallery id=' + gallery_id + ']</div>');
CKEDITOR.instances['editor_instance_name'].insertElement(element);