CKEditor 4 shortcode ersatz

Question

Ich versuche, einen Shortcode "plugin" zu machen - ähnlich wie Wordpress mit TinyMce verwendet. Ich möchte, dass Benutzer einen Shortcode (wie [gallery id="3"] oder [image id="9"]) über eine Schaltfläche einfügen und dann einen Platzhalter anstelle des tatsächlichen Shortcodes anzeigen können. Ich werde den ganzen Code zu Github setzen, sobald ich es zur Arbeit bekomme.

Aktuelle Setup

Ich habe eine Schaltfläche, die html an den Herausgeber insertHtml() wie dies mit Einsätzen:

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

und ich habe extraAllowedContent hinzugefügt div mit den Klassen, damit ich brauche:

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

Ich habe es geschafft, div.media-library-gallery durch ein Bild mit dem folgenden Code zu ersetzen:

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

    } 

    }) 
})(); 

Das Problem

Zur Zeit der Ersatz eines div innerhalb des Absatz-Tag verschachtelt:

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

Ich will nicht die enterMode von der Standardeinstellung ändern CKEDITOR.ENTER_P aber Ich möchte die umliegenden loswerden. Kann ich das mit insertHtml machen oder eine Regel schreiben, die das für mich tun würde? Alle anderen Vorschläge sind willkommen.

Ich habe um http://docs.ckeditor.com/ für eine Lösung/Inspiration gegraben, hatte aber wenig Glück.

Answer 1

Ein bisschen spät, aber versuchen Sie Ihren div als ein Element einzufügen:

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