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

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

Html学习(二)font 加粗斜体下划线标签学习
代码: 6 6 < ...
java font 字体加粗_java字体设置，包括大小，颜色，加粗，下划线，对齐，斜体的设置...
本文转自:http://www.blogjava.net/Swing/archive/2007/12/26/128965.html 想做一个文本编辑器的朋友,来这里是找对了!! 下面的代码告诉我们该怎 ...
HTML文字加粗、下划线、倾斜、删除线：文本格式化标签
HTML 文本格式化标签需求:让文字加粗.下划线.倾斜.删除线等效果代码: 标签说明 b 加粗 u 下划线 i 倾斜 s 删除线标签说明 strong 加粗 ins 下划线 em 倾斜 d ...
2019-7-22 [HTML] 基本结构 DOCTYPE声明标签:[title meta 标题段落换行加粗斜体下划线] 注释特殊字符 img标签 a标签
文章目录 0.HTML网页技术(基础) 1 HTML概述 1.1 什么是HTML? 1.2 Hello,HTML! 2 HBuilder的安装与使用 2.1 安装HBuilder 2.2 使创建项目 ...
学习整理Fabric.js 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码
原图效果图代码 index.html <!DOCTYPE HTML> <html> <head><meta charset="utf-8&quo ...
java字体设置，包括大小，颜色，加粗，下划线，对齐，斜体的设置
本文转自:http://www.blogjava.net/Swing/archive/2007/12/26/128965.html 下面的代码告诉我们该怎么在文本编辑器中设置字体大小,颜色,加粗,下划 ...
html 无序列表去下划线,HTML基础标签的综合应用案例（颜色、斜体、加粗、下划线、a标签、无序列表、有序列表）...
什么是HTML l HTML(HyperText Mark-up Language)即超文本标记语言或超文本标签语言. l 何为超文本:"超文本"可以实现页面内可以包含图片.链接, ...
HTML常用字体样式设置（加粗、下划线、斜体）
有的时候,仅仅是价格要求,前面的符号小一点,后面的数字大一点,就没必要用SpannableString.用HTML简单处理即可效果图: 代码实现: //加粗:222< ...
word和excel中加粗和下划线的键盘快捷是什么？
加粗是ctrl+B 加下划线是ctrl+U WORD全套快捷键小技巧 CTRL+O 打开 CTRL+P 打印 CTRL+A 全选 CTRL+[/] 对文字进行大小设置(在选中目标情况下) CTRL+D ...

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

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

最新文章

热门文章