CKEditor : 미리보기에서 코드 블록을 다르게 표시하는 방법

Question

사용자가 편집기에 삽입 할 수있는 요소를 만들고 싶습니다. 어려운 점은 소스와 다르게 표시해야한다는 것입니다. 예를 들어, 나는 사용자에게 원하는 미리보기 부분이 삽입 :

그리고

(23)는 소스 부분은 다음과 같이 표시한다 :

이

<span class="tagSpecialClass">{{birthYear}}</span> 

주요 목적은을 보여주는 것입니다 콧수염은 사용자가 글을 쓰는 것을 피하고 올바른 html과 미리보기를 자동으로 삽입하는 도구 모음에서 태그를 삽입하는 방식으로 태그를 붙입니다.

내 문제는 이러한 플러그인을 구현하기 위해 CKEditor와 내가 읽어야하는 용어에 대한 나의 이해입니다.

어떻게 CKEditor가 특정 태그를 다르게 구문 분석/컴파일/미리보기 할 수 있습니까?

제 질문이 너무 일반적인 경우 알려주세요.

Answer 1

CKEditor widgets (demos)과 같은 소리입니다.

다음 예제 (JSFiddle)를 참조하십시오. 위젯을 사용하여 문제를 해결하는 기본적인 방법을 알려줍니다. this official tutorial을 따르는 경우, 위젯에 편집 가능한 부품을 구현하는 방법과 대화 상자를 사용하여 편집하는 방법을 알게 될 것입니다.

// Some CSS for the widget to make it more visible. 
CKEDITOR.addCss('.tagSpecialClass { background: green; padding: 3px; color: #fff } '); 

CKEDITOR.replace('editor', { 
    // A clean-up in the toolbar to focus on essentials. 
    toolbarGroups: [ 
     { name: 'document', groups: [ 'mode' ] }, 
     { name: 'basicstyles' }, 
     { name: 'insert' } 
    ], 
    removeButtons: 'Image,Table,HorizontalRule,SpecialChar', 
    extraPlugins: 'widget', 
    on: { 
     pluginsLoaded: function() { 
      var editor = this; 

      // Define a new widget. This should be done in a separate plugin 
      // to keep things clear and maintainable. 
      editor.widgets.add('sampleWidget', { 
       // This will be inserted into the editor if the button is clicked. 
       template: '<span class="tagSpecialClass">23</span>', 

       // A rule for ACF, which permits span.tagSpecialClass in this editor. 
       allowedContent: 'span(tagSpecialClass)', 

       // When editor is initialized, this function will be called 
       // for every single element. If element matches, it will be 
       // upcasted as a "sampleWidget". 
       upcast: function(el) { 
        return el.name == 'span' && el.hasClass('tagSpecialClass'); 
       }, 

       // This is what happens with existing widget, when 
       // editor data is returned (called editor.getData() or viewing source). 
       downcast: function(el) { 
        el.setHtml('{{birthYear}}'); 
       }, 

       // This could be done in upcast. But let's do it here 
       // to show that there's init function, which, unlike 
       // upcast, works on real DOM elements. 
       init: function() { 
        this.element.setHtml('23'); 
       } 
      }); 

      // Just a button to show that "sampleWidget" 
      // becomes a command. 
      editor.ui.addButton && editor.ui.addButton('SampleWidget', { 
       label: 'Some label', 
       command: 'sampleWidget', 
       toolbar: 'insert,0' 
      });    
     } 
    } 
}); 

HTML

<textarea id="editor"> 
    <p>Some text.</p> 
    <p>And there's the widget <span class="tagSpecialClass">{{birthYear}}</span></p> 
    <p>Some text <span class="tagSpecialClass">{{birthYear}}</span>.</p> 
</textarea>  

코딩

해피!