CKEditor：使用工具欄按鈕控制啓動

Question

默認情況下，CKEditor的回車鍵行爲是添加一個<p>標記並開始一個新段落。但是該行爲可以在配置中使用.EnterMode參數進行修改。

我想知道是否有一種方法來改變運行時中的Enter鍵行爲，方法是在其工具欄中放置一個按鈕，在<p>和<br>（單行與雙行）之間切換，就像在Word中一樣。

有關如何做到這一點的任何想法？

Answer 1

保存以下到editor_dir/plugins/entermode/plugin.js：

'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在你的皮膚文件：

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

...或畫一些圖標，如果你想要的。

運行編輯器時，啓用該插件：

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

現在，您可以從工具欄控制config.enterMode。