Замена шорткода CKEditor 4

Я пытаюсь сделать «плагин» для шорткода, аналогичный тому, что Wordpress использует с TinyMce. Я хотел бы, чтобы пользователь мог вставить шорткод (например, [gallery id="3"] или [image id="9"]) с помощью кнопки, а затем показать заполнитель вместо фактического шорткода. Я выложу весь код на github, как только он заработает.

Текущая настройка

У меня есть кнопка, которая вставляет html в редактор, используя insertHtml() вот так:

// 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/ в поисках решения/вдохновения, но не нашел удача.


javascript ckeditor shortcode
person Lenart    schedule 12.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Немного поздно, но попробуйте вставить свой div как элемент:

var element = CKEDITOR.dom.element.createFromHtml('<div class="media-library-gallery">[gallery id=' + gallery_id + ']</div>');
CKEDITOR.instances['editor_instance_name'].insertElement(element);
person Wizard    schedule 14.12.2016
comment
К сожалению, я не смогу попробовать это; Я даже не уверен, в каком проекте я хотел попробовать это :) Я надеюсь, что кто-то еще наткнется на этот пост и сообщит, работает ли ваше предложение. - person Lenart; 15.12.2016