CKEditor 4 kısa kod değiştirmesi

Question

Wordpress'in TinyMce ile kullandığı şeye benzeyen "plugin" adlı bir kısa kod oluşturmaya çalışıyorum. Kullanıcının bir düğme üzerinden bir kısa kod ([gallery id="3"] veya [image id="9"] gibi) ekleyebilmesini ve daha sonra gerçek kısa kod yerine bir yer tutucu göstermesini istiyorum. Çalıştığım andan itibaren tüm kodu github'a koyacağım.

Mevcut ayar

böyle insertHtml() kullanarak editöre html ekler bir düğme vardır: sınıflarıyla div izin Ben extraAllowedContent ekledik

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

ve ihtiyacım:

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

Aşağıdaki kodu kullanarak bir resmi div.media-library-gallery değiştirmeyi başardım:

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

    } 

    }) 
})(); 

sorun anda yedek paragraf etiketi içinde bir div nests

:

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

Ben varsayılan enterMode değiştirmek istemiyorum CKEDITOR.ENTER_P ama Çevresinden kurtulmak istiyorum p. Bunu insertHtml kullanarak yapabilir miyim, yoksa benim için bunu yapacak bir kural yazabilir miyim? Başka önerileriniz kabul edilir.

Çözüm/ilham almak için http://docs.ckeditor.com/ çevremdeyim, ancak biraz şansım vardı.

Answer 1

Biraz geç oldu ama bir unsuru olarak div eklemek deneyin:

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