CKEditor 4 shortcode replacement

Question

Wordpress가 TinyMce에서 사용하는 것과 유사한 shortcode "plugin"을 만들려고합니다. 사용자가 단추를 통해 단축 코드 (예 : [gallery id="3"] 또는 [image id="9"])를 삽입 한 다음 실제 단축 코드 대신 자리 표시자를 표시 할 수있게하려고합니다. 일단 코드가 작동하면 모든 코드를 github에 넣을 것입니다.

현재 설정

이 같은 insertHtml() 사용하여 편집기에 HTML을 삽입하는 버튼이 있습니다 클래스와 div을 허용하기 내가 extraAllowedContent을 추가 한

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

과 나는 필요

// CKEditor configuration (config.js) 
config.extraAllowedContent = 'div(media-library-image,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; 
      } 
      } 
     } 
     }) 

    } 

    }) 
})(); 

문제 현재 교체 단락 태그 안에 사업부를 둥지

:

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

내가 기본에서 enterMode을 변경하지 않으 CKEDITOR.ENTER_P하지만, 주변을 없애고 싶습니다 p. insertHtml을 사용하여이 작업을 수행 할 수 있습니까, 아니면 나를 대신 할 수있는 규칙을 작성할 수 있습니까? 다른 제안 사항은 환영합니다.

나는 해결책/영감을 얻기 위해 http://docs.ckeditor.com/을 파고 있었지만 운이별로 없었다.

Answer 1

약간 늦었지만 요소로 사업부를 삽입하려고 :

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