ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距

1、首先需要下载一个lineheight包，网上很多资源都需要花钱或者花积分下载
找到ckeditor官网，在以下链接中直接下载即可
https://ckeditor.com/cke4/addon/lineheight

2、下载好后，添加在ckeditor下载plugin文件夹下，新建一个lineheight文件夹，如下图：

3、在config中添加

  config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');config.allowedContent = true; //加这个是为了不让span标签被ckeditor过滤掉

4、找到lineheight文件夹下的plugin.js文件，
修改的最终结果：

( function() {function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition, order ) {var config = editor.config,style = new CKEDITOR.style( styleDefinition );        var names = entries.split( ';' ),values = [];       var styles = {};for ( var i = 0; i < names.length; i++ ) {var parts = names[ i ];if ( parts ) {parts = parts.split( '/' );var vars = {},name = names[ i ] = parts[ 0 ];vars[ styleType ] = values[ i ] = parts[ 1 ] || name;styles[ name ] = new CKEDITOR.style( styleDefinition, vars );styles[ name ]._.definition.name = name;} elsenames.splice( i--, 1 );}editor.ui.addRichCombo( comboName, {label: editor.lang.lineheight.title,title: editor.lang.lineheight.title,toolbar: 'styles,' + order,allowedContent: style,requiredContent: style,panel: {css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),multiSelect: false,attributes: { 'aria-label': editor.lang.lineheight.title }},init: function() {this.startGroup(editor.lang.lineheight.title);for ( var i = 0; i < names.length; i++ ) {var name = names[ i ];                  this.add( name, styles[ name ].buildPreview(), name );}},onClick: function( value ) {editor.focus();editor.fire( 'saveSnapshot' );var style = styles[ value ];editor[ this.getValue() == value ? 'removeStyle' : 'applyStyle' ]( style );editor.fire( 'saveSnapshot' );},onRender: function() {editor.on( 'selectionChange', function( ev ) {var currentValue = this.getValue();var elementPath = ev.data.path,elements = elementPath.elements;for ( var i = 0, element; i < elements.length; i++ ) {element = elements[ i ];for ( var value in styles ) {if ( styles[ value ].checkElementMatch( element, true, editor ) ) {if ( value != currentValue )this.setValue( value );return;}}}this.setValue( '', defaultLabel );}, this );},refresh: function() {if ( !editor.activeFilter.check( style ) )this.setState( CKEDITOR.TRISTATE_DISABLED );}} );}CKEDITOR.plugins.add( 'lineheight', {requires: 'richcombo',lang: 'ar,de,en,es,fr,ko,pt',init: function( editor ) {var config = editor.config;addCombo( editor, 'lineheight', 'size', editor.lang.lineheight.title, config.line_height, editor.lang.lineheight.title, config.lineHeight_style, 40 );}} );
} )();
CKEDITOR.config.line_height = '1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;21;22;23;24;25;26;27;28;29;30;31;32;33;34;35;36;37;38;39;40;41;42;43;44;45;46;47;48;49;50;51;52;53;54;55;56;57;58;59;60;61;62;63;64;65;66;67;68;69;70;71;72';
CKEDITOR.config.lineHeight_style = {element: 'span',styles: { 'line-height': '#(size)' },overrides: [ {element: 'line-height', attributes: { 'size': null }} ]
};

具体修改的点参考：https://blog.csdn.net/weixin_45390475/article/details/104718476

至此，配置结束

效果：这里加了一个行距功能

ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距相关推荐

html编辑器自定义脚本,CKeditor富文本编辑器使用技巧之添加自定义插件的方法
本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice ...
luffcc项目-08-课程详情页、CKEditor富文本编辑器、课程详情页面、后台接口
课程详情页一.CKEditor富文本编辑器富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带h ...
关于ckeditor富文本编辑器上传图片返回“不正确的服务器响应”的解决方案
最新由于项目需要,使用了ckeditor富文本编辑器,需要上传图片.在使用过程中突然发现,原来的ckeditor返回图片地址的方式返回"不正确的服务器响应".当时感觉好奇怪啊.明明 ...
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
ckeditor富文本编辑器的使用和图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签通过如下设置 ...
CKEditor 富文本编辑器转PDF
CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 可配合使用的扩展有文件管 ...

ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距

ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距相关推荐

最新文章

热门文章