一 开始使用

官网

基本示例：

  1. 搭建服务器(这里使用apache)
  2. 下载standard的ckeditor解压放在apache的htdocs的目录下
  3. 在htdoc下面新建index.html，写入代码：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>A Simple Page with CKEditor</title>

        <!-- Make sure the path to CKEditor is correct. -->

        <script src="ckeditor/ckeditor.js"></script>

    </head>

    <body>

        <form>

            <textarea name="editor1" id="editor1" rows="10" cols="80">

                This is my textarea to be replaced with CKEditor.

            </textarea>

            <script>

                // Replace the <textarea id="editor1"> with a CKEditor

                // instance, using default configuration.

                CKEDITOR.replace( 'editor1' );

            </script>

        </form>

    </body>

</html>

注意：上面引入ckeditor.js的路径要写正确。

打开localhost:apache端口/index.html，看到ckeditor的页面，说明配置正确。接下来就自定义的扩展了。

二 配置

所有配置项: 参见。右上角可以简单搜索。

2.1 在页面配置

最好的配置方式在加载页面的时候设置配置：

CKEDITOR.replace( 'editor1', {

  language: 'zh-cn',

  uiColor: '#9AB8F3'

});

2.2 使用配置文件配置

主要配置：config.js，位于ckeditor根目录。默认的配置文件，大部分是空的，添加想要的配置进去，CKEDITOR.editorConfig方法是必须的。如：

CKEDITOR.editorConfig = function( config ) {

  config.language: 'zh-cn',

  config.uiColor: '#9AB8F3'

};

2.3 使用用户自定义配置文件

这是另一个推荐使用的配置方式。代替使用默认的config.js文件。复制一份该config.js,然后指向它，避免修改默认的配置文件，以后再升级CKEditor时，可以直接覆盖现在的所有文件，而不会覆盖到配置文件。

复制config.js重命名为custom.js或者其他,放在网站根目录下，然后加载页面创建editor实例的时候指向该配置即可。如：

CKEDITOR.replace( 'editor1', {

    customConfig: '/custom/ckeditor_config.js'

});

ckeditor_config.js配置

CKEDITOR.editorConfig = function( config ) {

  config.language = 'zh-cn'; //这里是等号

  config.uiColor = '#9AB8F3'

}

2.4 配置的加载顺序

上面的3中配置方式可以混合使用，只是会有加载顺序或者覆盖的情况。

custom.js > 当前页面加载时写的配置 > 默认的配置文件

2.5 禁止加载额外的配置文件

把customConfig的路径指空即可

CKEDITOR.replace( 'editor1', {

    customConfig: ''

});

打开文件上传和图片上传按钮

配置：

filebrowserImageUploadUrl: '/uploader/upload.php?type=Images',

filebrowserImageBrowseUrl: '/uploader/upload.php?type=Images',

filebrowserBrowseUrl: '/uploader/upload.php',

filebrowserUploadUrl: '/uploader/upload.php',

注意：配置了要等很久才会生效，大概半个小时到一个小时

集成外部文件浏览与上传

去除图片那堆预览的拉丁文

image_previewText: ' '

三 安装插件

插件驱动的框架。直接看官文，详细的很。

推荐Online builder添加插件，会自动安装该插件依赖的其他的插件(手动的不知道依赖关系)，选择好了要安装的插件，重新下载ckeditor覆盖原来的就好。

CKEditor与定制的更多相关文章

  1. ckeditor 4.2.1_演示 ckeditor 上传&插入图片

    本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...

  2. ckeditor编辑的使用方法

    一.下载安装Ckeditor,并将其整合到项目中 1.什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式.大小.颜色并具备插入图片的功能.而 ...

  3. 定制ckeditor的菜单

    修改配置文件config.js来定制cheditor的菜单,需要以下步骤: 1.找到ckeditor安装目录的config.js文件 2.记下要使用的功能名,以下的"-"代表分隔符 ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  5. 使用SharePoint Designer定制开发员工工作日志系统实例！

    昨天已介绍了一篇<使用SharePoint Designer定制开发专家库系统实例!>,今天继续来介绍使用SharePoint Designer定制开发员工工作日志系统实例,主要功能包括填 ...

  6. 基于spring-boot的web应用，ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  7. drupal7中CKEditor开启上传图片功能

    在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...

  8. Ueditor和CKeditor 两款编辑器的使用与配置

    一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...

  9. 编辑控件CKEditor和CKFinder

    -使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...

随机推荐

  1. RDD的Cache、Persist、Checkpoint的区别和StorageLevel存储级别划分

    为了增强容错性和高可用,避免上游RDD被重复计算的大量时间开销,Spark RDD设计了包含多种存储级别的缓存和持久化机制,主要有三个概念:Cache.Persist.Checkout. 1.存储级别 ...

  2. Transformers 词汇表 | 二

    作者|huggingface 编译|VK 来源|Github 词汇表每种模型都不同,但与其他模型相似.因此,大多数模型使用相同的输入,此处将在用法示例中进行详细说明. 输入ID 输入id通常是传递给模 ...

  3. OpenCV-Python 傅里叶变换 | 三十

    目标 在本节中,我们将学习 使用OpenCV查找图像的傅立叶变换 利用Numpy中可用的FFT函数 傅立叶变换的某些应用程序 我们将看到以下函数:cv.dft(),cv.idft()等 理论 傅立叶变 ...

  4. OpenCV-Python 绘图功能 | 七

    目标 学习使用OpenCV绘制不同的几何形状 您将学习以下功能:cv.line(),cv.circle(),cv.rectangle(),cv.ellipse(),cv.putText()等. 代码 ...

  5. Tensorboard详解（下篇）

    间提壶华小厨 1 Tensorflow监控指标可视化 除了GRAPHS栏目外,tensorboard还有IMAGES.AUDIO.SCALARS.HISTOGRAMS.DISTRIBUTIONS.FR ...

  6. 为何Keras中的CNN是有问题的，如何修复它们？

    在训练了 50 个 epoch 之后,本文作者惊讶地发现模型什么都没学到,于是开始深挖背后的问题,并最终从恺明大神论文中得到的知识解决了问题. 上个星期我做了一些实验,用了在 CIFAR10 数据集上 ...

  7. TensorFlow 模型优化工具包  —  训练后整型量化

    模型优化工具包是一套先进的技术工具包,可协助新手和高级开发者优化待部署和执行的机器学习模型.自推出该工具包以来,  我们一直努力降低机器学习模型量化的复杂性 (https://www.tensorfl ...

  8. 从使用到原理，探究Java线程池

    什么是线程池 当我们需要处理某个任务的时候,可以新创建一个线程,让线程去执行任务.线程池的字面意思就是存放线程的池子,当我们需要处理某个任务的时候,可以从线程池里取出一条线程去执行. 为什么需要线程池 ...

  9. ElasticSearch 倒排索引

    倒排索引 倒排表以字或词为关键字进行索引,表中关键字所对应的记录表项记录了出现这个字或词的所有文档,一个表项就是一个字表段,它记录该文档的ID和字符在该文档中出现的位置情况. 由于每个字或词对应的文档 ...

  10. Jenkins集成时报错 hudson.remoting.Channel$CallSiteStackTrace: Remote call to JNLP4-connect connection from xxx.xxx.xxx.xxx/xxx.xxx.xxx.xxx:32034

    Started by user test Running as SYSTEM Building remotely on home_windows (mbhCloud_UI_Test) in works ...