CKEditor 4短码更换

Question

我正在尝试制作一个短代码"插件" - 类似于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);