①从百度上下载一个 ckeditor 行距包,解压放到ckeditor/plugins目录下。

②在config.js 中添加

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');//行距③(转载)

config.allowedContent = true; //加这个是为了不让span标签被ckeditor过滤掉,如果加了的话就不需要再加

1. lineheight插件源码修改:
        1.原先的插件依赖于ckeditor/plugins/sytles插件,而ckeditor4.0是没有这个插件,所以如果直接使用该插件,会报错:
        Uncaught [CKEDITOR.resourceManager.load] Resource name "styles" was not found
 
因此,要修改插件中对styles的引用:
 
         a.在lineheight目录下的plugin.js中:
                    
         将
CKEDITOR.plugins.add('lineheight',
{
lang: ['zh-cn'], requires : [ 'richcombo', 'styles'], init : function( editor ) .......

  

中的requires: ['rechcombo', 'styles']            改为: requires: ['rechcombo']

      2.改完后使用,仍然会报错:

            Uncaught TypeError: Cannot read property 'editor' of undefined

       定位代码,在lineheight/plugin.js中:
editor.ui.addRichCombo( comboName,
{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : editor.skin.editor.css.concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }}, init : function(){ .......

  

报错地方:    css : editor.skin.editor.css.concat( config.contentsCss )
                 这是最新的ckeditor获得css配置的方式与原先不同引起的,那么对应的改为:
css:  [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),

  

3.上述改动完成后就可以使用行距这个功能了,但是发现下拉框没有标题,但是lineheight/lang/zh-cn.js中配置了标题呀。。。原因是新的ckeditor调用标签的方式变了:
            将/lineheight/plugin.js中下部分代码:
editor.ui.addRichCombo( comboName,{label : lang.label,title: lang.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.panelTitle }},  

init : function(){this.startGroup( lang.panelTitle );  

改为:

editor.ui.addRichCombo( comboName,{label : lang.lineheight.label,title: lang.lineheight.panelTitle,className: 'cke_' + (styleType == 'size' ? 'fontSize' : 'font'),panel :{css : [CKEDITOR.skin.getPath("editor")].concat( config.contentsCss ),multiSelect : false,attributes: { 'aria-label': lang.lineheight.panelTitle }},  

init : function(){this.startGroup( lang.lineheight.panelTitle );  

4.这样就完成了所有的配置了,当然如果想额外添加一些行距设置项,可以在/lineheight/plugin.js中添加,具体位置:

CKEDITOR.config.lineheight_sizes =                  'normal;1.5em;1.75em;2em;3em;4em;5em;100%;120%;130%;150%;170%;180%;190%;200%;220%;250%;300%;400%;500%';  

看到这个配置,你就会发现,这只是这个行距插件的默认配置值 ,那么如果要添加一些行距元素的话,可以在ckeditor的config.js中添加:

CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes +   ’你添加的行距元素‘;  

二、添加中文字体

打开CKeditor目录里的config.js,在

CKEDITOR.editorConfig = function( config )
{

};
里添加如下代码:

config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

以后使用的时候就可以用中文字体了。(注意,保存这个js文件的时候必须utf8,不然字体显示会是乱码)

文章转载自http://www.it610.com/article/4654053.htm

怕以后设置的时候忘记,故做个记录,希望能帮助到网友

ckeditor4.0以上使用行间距插件lineheight报错修改的更多相关文章

  1. eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...”

    eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context ...

  2. tomcat maven插件启动报错tomcat-users.xml cannot be read

    tomcat maven插件启动报错tomcat-users.xml cannot be read [ERROR] Failed to execute goal org.codehaus.mojo:t ...

  3. phpize命令在安装AMQP插件是报错phpize:Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF envir的解决方法

    phpize命令在安装AMQP插件是报错phpize:Cannot find autoconf. Please check your autoconf installation and the $PH ...

  4. org.apache.tomcat.util.descriptor.web.WebXml.setVersion Unknown version string [4.0]. Default version will be used.报错

    org.apache.tomcat.util.descriptor.web.WebXml.setVersion Unknown version string [4.0]. Default versio ...

  5. 将Xcode升级到10.0以上版本,Appium启动报错的问题

    前言 现在的Xcode最新版本都是在10.1,原先使用的版本是9.4.1!结果今天手贱将其升级... 然后,跑IOS自动化时,出现“Xcode version '0.1'. Support for X ...

  6. django2.0+连接mysql数据库迁移时候报错

    django2.0+连接mysql数据库迁移时候报错 情况一 错误信息 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 ...

  7. SpringBoot-使用lombok插件运行报错

    SpringBoot-使用lombok插件运行报错 标签(空格分隔): java,SpringBoot 1.报错信息 2.解决方案 1.IDEA编辑器安装lombok插件 2.编译注解配置-Enabl ...

  8. cordova-ios 升级到4.4.0 无法真机跑iOS8 报错: dyld`dyld_fatal_error: -> 0x120085088 <+0>: brk #0x3

    项目进入测试阶段,马上要上线了,同事拿了自己的iOS8系统5s跑真机,无缘无故报错,之前跑她的手机完全没有问题的.Xcode 8.x中最低部署版本是iOS8.0,按理说完全能够跑真机的. 但是报了一个 ...

  9. 【spring cloud】【IDEA】【maven】spring cloud多模块在idea上使用maven插件打包报错:程序包XXX不存在

    >>>>spring cloud 多模块 >>>>在idea上使用maven插件打包,欲打包成jar包后 进行部署 >>>> 报 ...

随机推荐

  1. java 匿名对象与内部类

    一 匿名对象 1.匿名对象的概念 匿名对象是指创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量. 例如: public class Person{ public void eat(){ ...

  2. Flutter 容器(3) - AnimatedPadding

    AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class A ...

  3. Flutter 打包程序 build android apk

    Step-1 Java 路径 找到java路径, 可使用[flutter doctor -v] Step-2: 进入目录 找到路径后 C:\Program Files\Java\jre1.8.0_23 ...

  4. 制作qq简易聊天框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 配置 Eureka Server 集群

    简介 为了使 Eureka Server 实现高可用,我们需要为它配置集群.这样当有一台 Eureka Server 有故障时,集群中的其他 Server 可以进行代替.Eureka 集群之中的 No ...

  6. SweetAlert 弹框之后点击OK执行方法

    swal( '审核通过!', '', 'success' ).then(function () { Return(); })

  7. linux驱动之模块化编程

    今天刚开始学习linux驱动的编写.在网上开了许多网友的博客,感觉比较好的摘抄下来,以便以后忘记可以随时查看.下面是摘抄文章的地址,非常感谢他们. http://blog.chinaunix.net/ ...

  8. nova 云主机 evacuate 简单分析

    原文链接:http://www.ishenping.com/ArtInfo/3318250.html #故障节点compute=down nova host-evacuate ostack245.bj ...

  9. Linux用户和组密令大全

    本文总结了Linux添加或者删除用户和用户组时常用的一些命令和参数. 1.建用户: adduser phpq                             passwd phpq       ...

  10. 基于 abp vNext 微服务开发的敏捷应用构建平台 - 项目介绍

    缘起 目前使用ABP框架已经将近3年了,大大小小的项目也陆陆续续做了很多.由于现有信息系统的架构模式是在底层的技术平台上直接构建信息系统并采用技术主导,使用业务无关的编程工具来开发信息系统的缺陷使得系 ...