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

先看效果：

ckeditor4自定义组件官方文档中有两种，第一种是点按钮增加内容，别的文章都能搜到；第二种是点按钮出现弹窗，设置弹窗内容，然后点确定，这种

也能搜到，在官方文档中也有。但是我的需求是给文字增加着重号，双下划线，下划线虚线等等，鼠标放进去还能再次自动选中，找了一番也没找到这

种自定义组件怎么写，只找到一个改源码的2016年的文章，所以只能自己鼓捣一番。研究了一下官方的加粗组件，改了改，下面是代码。

第一步：

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

以放到了public文件夹里。

//引入跟组件相关的自定义样式

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 ),

} );

// 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,

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 );

}

} );

// 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>

{ name: 'insert', items: [ 'Dot', 'UnderlineSingle', 'UnderlineDouble', 'UnderlineThick'] },

],

extraPlugins:"basicstyles2",

})

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

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

/*1点线*/

dot {

position: relative;

}

left: 0;

background: url(../wordUnderline/dot.png) repeat-x 0 center;

}

/*单线*/

underlineSingle {

border-bottom: 1px solid #000;

}

/*双线*/

underlineDouble {

position: relative;

bottom: -3px;

left: 0;

background: url(../wordUnderline/double.png) repeat-x 0 center;

}

/*粗线*/

underlineThick {

border-bottom: 3px solid #000;

}

下面是我用ps画的小图标

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

片路径问题，各种找不到图片，然后就是偶然性加载失败，奇奇怪怪的内联样式，但是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

先看效果：

以放到了public文件夹里。

第二步：plugin.js文件

//ckeditor附加各种下划线样式

//‘basicstyles2’名称很重要，用来引入

CKEDITOR.plugins.add( 'basicstyles2', {

icons: 'dot,underlineSingle,underlineDouble,underlineThick', // %REMOVE_LINE_CORE%