CKEditor与定制
一 开始使用
基本示例：
- 搭建服务器(这里使用apache)
- 下载standard的ckeditor解压放在apache的htdocs的目录下
- 在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与定制的更多相关文章
- ckeditor 4.2.1_演示 ckeditor 上传&插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
- ckeditor编辑的使用方法
一.下载安装Ckeditor,并将其整合到项目中 1.什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式.大小.颜色并具备插入图片的功能.而 ...
- 定制ckeditor的菜单
修改配置文件config.js来定制cheditor的菜单,需要以下步骤: 1.找到ckeditor安装目录的config.js文件 2.记下要使用的功能名,以下的"-"代表分隔符 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder
Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...
- 使用SharePoint Designer定制开发员工工作日志系统实例！
昨天已介绍了一篇<使用SharePoint Designer定制开发专家库系统实例!>,今天继续来介绍使用SharePoint Designer定制开发员工工作日志系统实例,主要功能包括填 ...
- 基于spring-boot的web应用，ckeditor上传文件图片文件
说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...
- drupal7中CKEditor开启上传图片功能
在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...
- Ueditor和CKeditor 两款编辑器的使用与配置
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...
- 编辑控件CKEditor和CKFinder
-使用HTML编辑控件CKEditor和CKFinder Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEdit ...
随机推荐
- Mysql获取系统时间，年，月，日
Mysql数据库中获取系统时间,年,月,日单个获取 获取当前系统日期时间:select SYSDATE() AS 系统日期时间; 获取当前系统年月日:select current_date AS ...
- C 2012年笔试题（保）
1 程序改错 1.1 下面程序段的功能是交换两个字符数组的内容(每个字符串字符数均不超过100) (8分) [ 见2012年笔试题1.1] void StrSwap(char *pa,char ...
- 你能在泰坦尼克号上活下来吗？Kaggle的经典挑战
Kaggle Kaggle是一个数据科学家共享数据.交换思想和比赛的平台.人们通常认为Kaggle不适合初学者,或者它学习路线较为坎坷. 没有错.它们确实给那些像你我一样刚刚起步的人带来了挑战.作为一 ...
- sql mysql数据库导库 panda pymysql
mysql数据库 导入数据 1. panda 效率超高 对内存要求高 网络稳定性 # 读取文件 ratings_names = ['user_id', 'movie_id', 'ratings', ' ...
- 模块 re_正则
模块re_正则 讲正题之前我们先来看一个例子:https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/ 这是京东的注册页面,打开页面我 ...
- 吴恩达DeepLearning.ai的Sequence model作业Dinosaurus Island
目录 1 问题设置 1.1 数据集和预处理 1.2 概览整个模型 2. 创建模型模块 2.1 在优化循环中梯度裁剪 2.2 采样 3. 构建语言模型 3.1 梯度下降 3.2 训练模型 4. 结论 ...
- MATLAB 排序、拟合
一.数据排序整合 1.随机生成的数,从小到大排序 clear rand('seed',1)%设置随机种子,确保随机数一样 edge_range=unifrnd (1, 10, 1, 10) edge_ ...
- win10 系统中vscode 的终端 shell 设置
今天,打算开始搞一个个人博客小项目. 主力台式电脑在实验室,于是重新配了一下自己的小破笔记本.系统是之前自己捣鼓的 win10 .在打开终端调试 node 时,发现报了这么一个错. 我刚开始以为是自己 ...
- Let‘s play computer game（最短路 + dfs找出所有确定长度的最短路）
Let's play computer game Description xxxxxxxxx在疫情期间迷上了一款游戏,这个游戏一共有nnn个地点(编号为1--n1--n1--n),他每次从一个地点移动 ...
- stylus--安装及使用方法
stylus介绍 Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的.动态的 ...