先看效果:
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