Wymiana klucza kodu CKEditor 4

Question

Próbuję utworzyć "wtyczkę" do kodu skróconego - podobną do tej, z której korzysta Wordpress z TinyMce. Chciałbym, aby użytkownik mógł wstawić krótki kod (np. [gallery id="3"] lub [image id="9"]) za pomocą przycisku, a następnie pokazać symbol zastępczy zamiast rzeczywistego shortcode. Wezwę cały kod do github, gdy tylko go uruchomię.

Obecna konfiguracja

Mam przycisk, który wstawia do edytora html używając insertHtml() takiego:

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

i Dodałem extraAllowedContent aby umożliwić div z klas I trzeba:

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

Udało mi się zastąpić div.media-library-gallery obrazem za pomocą poniższego kodu:

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

    } 

    }) 
})(); 

Problem

Obecnie wymiana gniazd div wewnątrz znacznika akapitu:

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

nie chcę zmienić enterMode z domyślnego CKEDITOR.ENTER_P ale Chcę pozbyć się otoczenia p. Czy mogę to zrobić za pomocą insertHtml lub napisać regułę, która zrobiłaby to dla mnie? Wszelkie inne sugestie są mile widziane.

Kopałem około http://docs.ckeditor.com/ dla rozwiązania/inspiracji, ale nie miałem szczęścia.

Answer 1

Trochę późno, ale spróbuj wstawić div jako element:

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