javascript - 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>

我不想更改默认 CKEDITOR.ENTER_P 中的 enterMode，但我想摆脱周围的 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);