一 开始使用

官网

基本示例：

  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. 强化学习之四：基于策略的Agents (Policy-based Agents)

    本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...

  2. PyTorch 实战-用 Numpy 热身

    Numpy provides an n-dimensional array object, and many functions for manipulating these arrays. Nump ...

  3. Keras 多层感知机 多类别的 softmax 分类模型代码

    Multilayer Perceptron (MLP) for multi-class softmax classification: from keras.models import Sequent ...

  4. 关于TensorFlow九件你非知不可的事

    来源 | Hackernoon 译者 | Revolver 前些天我参加了7 月24 日在美国旧金山举行的Google Cloud Next 2018 大会,其中的一个演讲( What's New w ...

  5. poj - 2096 概率dp (找bug)

    题意:一个人一天只能找1个bug ,这个bug属于s个子系统中的某一个子系统,属于n种bug 中的某一种 ,求 这个人找出n种bug ,并且s个系统都bug的期望 (每个系统的一定可以找出bug) 一 ...

  6. Django之环境安装

    什么是Django Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由 ...

  7. PTA 7-42 整型关键字的散列映射（手写哈希表的线性探测法）

    本题考点: 整型哈希表的线性探测法 给定一系列整型关键字和素数P,用除留余数法定义的散列函数将关键字映射到长度为P的散列表中.用线性探测法解决冲突. 输入格式: 输入第一行首先给出两个正整数N(≤10 ...

  8. 【Linux】LAMP环境搭建（简易版）

    一. 辅助软件包安装 准备工作:1.Linux系统准备 恢复快照(初始化安装) 设置IP 关闭SELINUX 配置yum源 2.yum -y install gcc gcc-c++ 3.关闭防火墙 4 ...

  9. 给listview添加长时间点击事件（完成删除操作）

    出现的问题是:当长时间点击listview的时候,触发长时间点击事件的同时也会触发点击事件,处理的办法是在长时间点击事件中加上return true:这样就可以很好的解决了. 给listview天机长 ...

  10. MTK Android 如何获取系统权限

    Android如何获得系统(system)权限 Android中如何修改系统时间(应用程序获得系统权限) 在 android 的API中有提供 SystemClock.setCurrentTimeMi ...