一 开始使用

官网

基本示例：

  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. JS十大经典排序排序算法

    1.冒泡排序 冒泡排序通常排在第一位,说明它是排序算法的入门算法,是最简单的一个排序算法,而且必须掌握和理解. 先来看看代码吧: function bubbleSort(arr) { let temp ...

  2. uni-app实现文件上传(h5方式)

    1.嵌入H5页面,需要采用web-view标签,如下: <web-view src="/hybrid/html/index.html" @message="hand ...

  3. coding++：高并发解决方案限流技术---漏桶算法限流--demo

    1.漏桶算法 漏桶作为计量工具(The Leaky Bucket Algorithm as a Meter)时,可以用于流量整形(Traffic Shaping)和流量控制(TrafficPolici ...

  4. Api接口幂等设计

    1,Api接口幂等设计,也就是要保证数据的唯一性,不允许有重复. 例如:rpc 远程调用,因为网络延迟,出现了调用了2次的情况. 表单连续点击,出现了重复提交. 接口暴露之后,会被模拟请求工具(Jem ...

  5. Python第十二章-多进程和多线程01-多进程

    多进程和多线程 一.进程 1.1 进程的引入 现实生活中,有很多的场景中的事情是同时进行的,比如开车的时候 手和脚共同来驾驶汽车,再比如唱歌跳舞也是同时进行的:试想,如果把唱歌和跳舞这2件事情分开依次 ...

  6. Ubuntu文件（文件夹）创建（删除）

    创建 创建文件: touch a.txt创建文件夹: mkdir NewFolderName 删除 删除文件: rm a.txt删除文件夹: rmdir FolderName删除带有文件的文件夹: r ...

  7. 模块 string 常用序列字符

    自从知道string模块后再也不用abcd了 >>> string.digits #数字 '0123456789' >>> string.ascii_letters ...

  8. Salesforce LWC学习(十五) Async 以及 Picklist 公用方法的实现

    本篇参考:salesforce 零基础学习(六十二)获取sObject中类型为Picklist的field values(含record type) https://developer.salesfo ...

  9. k8s + docker + Jenkins使用Pipeline部署SpringBoot项目时Jenkins错误集锦

    背景 系统版本:CentOS7 Jenkins版本:2.222.1 maven版本:apache-maven-3.6.3 Java版本:jdk1.8.0_231 Git版本:1.8.3.1 docke ...

  10. Math常用方法

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