CKEditor : 도구 모음 단추로 Entermode 제어

기본적으로 CKEditor의 Enter 키 동작은 <p> 태그를 추가하고 새 단락을 시작하는 것입니다. 그러나이 동작은 .EnterMode 매개 변수를 사용하여 구성에서 수정할 수 있습니다.CKEditor : 도구 모음 단추로 Entermode 제어

Word에서와 마찬가지로 런타임에 Enter 키 동작을 변경하려면 도구 모음에 단추를 넣고 <p>과 <br> (한 줄 대 두 줄) 사이를 전환하는 방법이 있는지 궁금합니다. .

방법에 대한 아이디어가 있으십니까?

.cke_button__enterp_icon, .cke_button__enterbr_icon { display: none !important; } 
.cke_button__enterp_label, .cke_button__enterbr_label { display: inline !important; }

... 또는 당신이 원하는 경우, 일부 아이콘 페인트 :

'use strict'; 

(function() { 
    CKEDITOR.plugins.add('entermode', { 
     icons: 'entermode', 
     init: function(editor) { 
      var enterP = new enterModeCommand(editor, CKEDITOR.ENTER_P); 
      var enterBR = new enterModeCommand(editor, CKEDITOR.ENTER_BR); 

      editor.addCommand('entermodep', enterP); 
      editor.addCommand('entermodebr', enterBR); 

      if (editor.ui.addButton) { 
       editor.ui.addButton('EnterP', { 
        label: 'Enter mode P', 
        command: 'entermodep', 
        toolbar: 'paragraph,10' 
       }); 

       editor.ui.addButton('EnterBR', { 
        label: 'Enter mode BR', 
        command: 'entermodebr', 
        toolbar: 'paragraph,20' 
       }); 
      } 

      editor.on('dataReady', function() { 
       refreshButtons(editor); 
      }); 
     } 
    }); 

    function refreshButtons(editor) { 
     editor.getCommand('entermodep').setState(
      editor.config.enterMode == CKEDITOR.ENTER_P ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF); 

     editor.getCommand('entermodebr').setState(
      editor.config.enterMode == CKEDITOR.ENTER_BR ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF); 
    } 

    function enterModeCommand(editor, mode) { 
     this.mode = mode; 
    } 

    enterModeCommand.prototype = { 
     exec: function(editor) { 
      editor.config.enterMode = this.mode; 
      refreshButtons(editor); 
     }, 

     refresh: function(editor, path) { 
      refreshButtons(editor); 
     } 
    }; 
})();

지금 당신의 피부 파일에 toolbar.css에 다음을 추가

출처

2013-01-15 Baris

저장 editor_dir/plugins/entermode/plugin.js에 다음과 같습니다. 에디터를 실행할 때

플러그인을 사용 :

CKEDITOR.replace('id', { extraPlugins: 'entermode' });

지금 도구 모음에서 config.enterMode을 제어 할 수 있습니다.

출처

2013-01-16 10:47:23 oleq

죄송합니다. 지금 당신의 방법을 시도하고 있지만, 내 프로젝트의 어디서나 toolbar.css 파일을 찾을 수 없으므로/skins/moono/폴더에 해당 파일을 만들어야합니까? – Baris

'toolbar.css'는 릴리스 버전에서 그것의 일부이기 때문에'editor.css'에 추가 할 수 있습니다. – oleq

CKEditor : 도구 모음 단추로 Entermode 제어

답변

관련 문제