将CKEditor Format插件自定义为一个简单的按钮

1 回答

• 2

  据我所知，格式不能为外部调用提供方便的界面，但您可以创建自己的插件 .

  基本上它归结为使用 CKEDITOR.style 对象：

  // Creates a style object, 
  var styleObj = new CKEDITOR.style( { element: 'pre' } );
  
  editor.applyStyle( styleObj );
  // Or if you wish to remove style:
  // editor.removeStyle( styleObj );
  

  我创建了一个简单的，功能齐全的示例插件，名为 myFormat ：

  ( function() {
  
      "use strict";
  
      var pluginName = 'myFormat';
  
      CKEDITOR.plugins.add( pluginName, {
          icons: pluginName, // If you wish to have an icon...
  
          init: function( editor ) {
              // Tagname which you'd like to apply.
              var tag = 'h2',
                  // Note: that we're reusing.
                  //style = new CKEDITOR.style( editor.config[ 'format_' + tag ] );
                  style = new CKEDITOR.style( { element: 'pre' } );
  
              // Creates a command for our plugin, here command will apply style. All the logic is
              // inside CKEDITOR.styleCommand#exec function so we don't need to implement anything.
              editor.addCommand( pluginName, new CKEDITOR.styleCommand( style ) );
  
              // This part will provide toolbar button highlighting in editor.
              editor.attachStyleStateChange( style, function( state ) {
                  !editor.readOnly && editor.getCommand( pluginName ).setState( state );
              } );
  
              // This will add button to the toolbar.
              editor.ui.addButton( 'MyFormat', {
                  label: 'Click to apply format',
                  command: pluginName,
                  toolbar: 'insert,5'
              } );
          }
      } );
  
  } )();
  

  只需将代码放入 <ckeditorDirectory>/ckeditor-dev/plugins/myFormat/plugin.js 即可 .

  不要忘记修改您的CKEditor配置以包含 myFormat 插件，并将一些奇特的图标放到 <ckeditorDirectory>/ckeditor-dev/plugins/myFormat/icons/myFormat.png .

  回复于 2024-05-09T20:03:42+08:00