一 开始使用

官网

基本示例：

  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. 浅谈VUE，使用watch方法监听父组件传到子组件的数据。

    props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData']   第二步动 ...

  2. BFS与DFS常考算法整理

    BFS与DFS常考算法整理 Preface BFS(Breath-First Search,广度优先搜索)与DFS(Depth-First Search,深度优先搜索)是两种针对树与图数据结构的遍历或 ...

  3. PyTorch ImageNet 基于预训练六大常用图片分类模型的实战

    微调 Torchvision 模型 在本教程中,我们将深入探讨如何对 torchvision 模型进行微调和特征提取,所有这些模型都已经预先在1000类的Imagenet数据集上训练完成.本教程将深入 ...

  4. Git入门操作（一）

    最近真正用到了Git,感觉还是需要好好整理一下最最基础用法,与萌新共享.^_^ 关于Git的基础介绍,这里不再赘述,下面撸代码了(主要是命令行的操作,属于linux操作系统的,可能没听过,但记住就好了 ...

  5. 简述MySQL数据库中的Date,DateTime,TimeStamp和Time类型

    DATETIME类型 定义同时包含日期和时间信息的值时.MySQL检索并且以'YYYY-MM-DD HH:MM:SS'格式显示DATETIME值,支持的范围是'1000-01-01 00:00:00' ...

  6. 音视频开发-FFmpeg

    音视频开发是个非常复杂的,庞大的开发话题,初涉其中,先看一下结合 OEIP(开源项目) 新增例子. 可以打开flv,mp4类型文件,以及rtmp协议音视频数据,声音的播放使用SDL. 把采集的麦/声卡 ...

  7. B 【ZJOI2007】时态同步

    时间限制 : - MS   空间限制 : 265536 KB  评测说明 : 1s 256m 问题描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 ...

  8. 第一次将本地项目push到github

    问题:github有一个空项目,将本地项目上传到github空项目时,报错如下 $ git push --set-upstream git@github.com:dslu7733/promise.gi ...

  9. composer换源,composer切换国内源

    首先要分清楚是局部换源还是全局换源 1.局部换源(仅对当前项目有效) 在当前项目下的composer.json中添加 { "repositories": [ { "typ ...

  10. C++编译/编辑器对OIer的必要功能

    (没有引战的意思,如果有不同意见可以评论区发言,只是写出我目前的情况) 作为一个C++ OIer肯定是用过Dev的,因为学校推荐啊我也没有办法.都知道Dev又丑又没有代码补全,但是却是最最最适合OIe ...