一 开始使用

官网

基本示例：

  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. BFC是什么？BFC有什么用？看完全明白

    一.BFC是什么? 官方定义 BFC(Block Formatting Context,块格式化上下文) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交 ...

  2. Linux基础篇学习——文件目录常用管理命令mkdir，cat，more，less，ln，file，cp，find，split，mv

    mkdir 创建目录 -p 递归创建目录 -v 显示创建信息 [root@zycentos7 ~]# mkdir -p {mylinux/{bin,conf,lib,logs,webapps/{doc ...

  3. logstash设置从文件读取的重要参数说明及如何强置重新读取

    问题描述: 如果运行logstash时从文件读取数据时,就会遇到一个问题,如果读取的目标文件未经修改,而仅修改了conf文件,则即使重新运行logstash,或是执行时使用-r时输出也无法更新. 解决 ...

  4. 高效code review指南

    大多数程序员都知道并且相信code review(代码审查)的重要性,但并一定都能很好的执行这一过程,做好code review也需要遵循一定的原则.流程和规范. 我们团队的code review实践 ...

  5. 一个完整的机器学习项目在Python中演练（三）

    大家往往会选择一本数据科学相关书籍或者完成一门在线课程来学习和掌握机器学习.但是,实际情况往往是,学完之后反而并不清楚这些技术怎样才能被用在实际的项目流程中.就像你的脑海中已经有了一块块"拼 ...

  6. [vijos1145]小胖吃巧克力<概率dp>

    题目链接:https://vijos.org/p/1145 貌似还有一个一样的题是poj1322 chocolate,两个题只是描述不一样,意思都是一样的,不贵最近貌似poj炸了,所以也没法去poj ...

  7. WebView的基本使用及相关特性

    WebView 是一个显示网页内容的组件,可以显示网络上的一些在线内容并且可以作为 Web 浏览器滚动显示的内容,它使用 WebKit作为渲染引擎来显示网页,里面包括放大.缩小.执行文本搜索等进行前后 ...

  8. .net core 集成 sentry 进行异常报警

    .net core 集成 sentry 进行异常报警 Intro Sentry 是一个实时事件日志记录和汇集的平台.其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈.它分为客户端和 ...

  9. java类文件结构笔记

    注:新的博客地址 - https://zhengw-tech.com/archives/ 我们都知道java实现跨平台靠的是虚拟机技术,将源文件编译成与操作系统无关的,只有虚拟机能识别并执行的字节码文 ...

  10. time_wait 详解和解决方案

    1. 产生原因 2. 导致问题 3. Nginx 3.1 长连接 4. 解决方案 5 .参考 产生原因 TCP 连接关闭时,会有 4 次通讯(四次挥手),来确认双方都停止收发数据了.如上图,主动关闭方 ...