ckeditor4 自定义组件之文字格式组件，类加粗，类下划线(vue项目)

先看效果：

ckeditor4自定义组件官方文档中有两种，第一种是点按钮增加内容，别的文章都能搜到；第二种是点按钮出现弹窗，设置弹窗内容，然后点确定，这种也能搜到，在官方文档中也有。但是我的需求是给文字增加着重号，双下划线，下划线虚线等等，鼠标放进去还能再次自动选中，找了一番也没找到这种自定义组件怎么写，只找到一个改源码的2016年的文章，所以只能自己鼓捣一番。研究了一下官方的加粗组件，改了改，下面是代码。

第一步：

 

新建一个文件夹作为自定义组件，关键只有plugin.js文件和icons图标作为自定义组件的按钮，图标是我自己用ps画的，顺便一提，我这个是VUE项目，所以放到了public文件夹里。

第二步：plugin.js文件

//ckeditor附加各种下划线样式
//‘basicstyles2’名称很重要，用来引入
CKEDITOR.plugins.add( 'basicstyles2', {
	icons: 'dot,underlineSingle,underlineDouble,underlineThick', // %REMOVE_LINE_CORE%
	init: function( editor ) {
//引入跟组件相关的自定义样式
		editor.addContentsCss && editor.addContentsCss(this.path + "css/question.css");
		var order = 0;
		// All buttons use the same code to register. So, to avoid
		// duplications, let's use this tool function.
		var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton ) {
				// Disable the command if no definition is configured.
				if ( !styleDefiniton )
					return;

				var style = new CKEDITOR.style( styleDefiniton ),
					forms = contentForms[ commandName ];

				// Put the style as the most important form.
				forms.unshift( style );

				// Listen to contextual style activation.
				editor.attachStyleStateChange( style, function( state ) {
					!editor.readOnly && editor.getCommand( commandName ).setState( state );
				} );

				// Create the command that can be used to apply the style.
				editor.addCommand( commandName, new CKEDITOR.styleCommand( style, {
					contentForms: forms
				} ) );

				// Register the button, if the button plugin is loaded.
				if ( editor.ui.addButton ) {
					editor.ui.addButton( buttonName, {
						label: buttonLabel,
						command: commandName,
						toolbar: 'basicstyles,' + ( order += 10 )
					} );
				}
			};

		var contentForms = {
				dot: ['dot'],
				underlineSingle: ['underlineSingle'],
				underlineDouble: ['underlineDouble'],
				underlineThick: ['underlineThick'],
			},
			config = editor.config;
//buttonName注意大小写，用于使用这个按钮
		addButtonCommand( 'Dot', "着重", 'dot', config.coreStyles_dot );
		addButtonCommand( 'UnderlineSingle', "下划单线", 'underlineSingle', config.coreStyles_underlineSingle );
		addButtonCommand( 'UnderlineDouble', "下划双线", 'underlineDouble', config.coreStyles_underlineDouble );
		addButtonCommand( 'UnderlineThick', "下划粗线", 'underlineThick', config.coreStyles_underlineThick );

		//甚至可以设置快捷键
		// editor.setKeystroke( [
		// 	[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
		// 	[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
		// 	[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ]
		// ] );
	}
} );
// Basic Inline Styles.
CKEDITOR.config.coreStyles_dot = { element: 'dot' };
CKEDITOR.config.coreStyles_underlineSingle = { element: 'underlineSingle' };
CKEDITOR.config.coreStyles_underlineDouble = { element: 'underlineDouble' };
CKEDITOR.config.coreStyles_underlineThick = { element: 'underlineThick' };

第三步：引入自定义组件

在vue项目的public/index.html中加入

<script>
      CKEDITOR.plugins.addExternal( 'basicstyles2', '/ckeditorPlugins/basicstyles2/', 'plugin.js' );
    </script>

第四步：配置

window.CKEDITOR.replace(_this.id, {
                toolbar :[
                    { name: 'basicstyles', items: [ 'Source','Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ] },
                    { name: 'insert', items: [ 'Dot', 'UnderlineSingle', 'UnderlineDouble', 'UnderlineThick'] },
                ],
                extraPlugins:"basicstyles2",
            })    

注意大小写，我自己写的时候小坑了一下。

第五步：组件的css里写点样式  public\ckeditorPlugins\basicstyles2\css\question.css

/*1点线*/
dot {
  position: relative;
}
dot:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 4px;
  bottom: -4px;
  left: 0;
  background: url(../wordUnderline/dot.png) repeat-x 0 center;
}
/*单线*/
underlineSingle {
  border-bottom: 1px solid #000;
}
/*双线*/
underlineDouble {
  position: relative;
}
underlineDouble:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 5px;
  bottom: -3px;
  left: 0;
  background: url(../wordUnderline/double.png) repeat-x 0 center;
}
/*粗线*/
underlineThick {
  border-bottom: 3px solid #000;
}

 下面是我用ps画的小图标

css用到的两个图片我也放这

 

为了让保存后再页面上也能看到相同样式，我在main.ts中引入了相同css

import '../public/ckeditorPlugins/basicstyles2/css/question.css'

至此，就ok了。

实现原理就是加了几个自定义标签，给自定义标签写样式，ckeditor4会自动检测光标是否在当前标签中，会自动选中。

其实关键就在于那个js，我找到的官方插件 basicstyles 改了改，吐槽一下，vue和ckeditor4是真不太好兼容啊，基础功能还行，一扩展，首当其冲就是图片路径问题，各种找不到图片，然后就是偶然性加载失败，奇奇怪怪的内联样式，但是ckeditor4功能是真全啊，文档杠杠的，别的编辑器都太轻了，想搞点自定义的东西没文档根本无从下手，真是又爱又恨啊。。

参考文档：

Basic Styles | CKEditor.comThis plugin adds the following basic formatting commands to the editor: Bold Italic Underline Strikethrough Subscript Superscript The output of these text styles can be customized with configuration options.https://ckeditor.com/cke4/addon/basicstylesBasic Text Styles - CKEditor 4 DocumentationLearn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plugins, widgets and skins are explained here, too. API reference and examples included.https://ckeditor.com/docs/ckeditor4/latest/features/basicstyles.html#enabling-all-basic-stylesSimple Plugin (Part 1) - CKEditor 4 DocumentationLearn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plugins, widgets and skins are explained here, too. API reference and examples included.https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html