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 ...
随机推荐
- 3.Scikit-Learn实现完整的机器学习项目
1 完整的机器学习项目 完成项目的步骤: (1) 项目概述 (2) 获取数据 (3) 发现并可视化数据,发现规律. (4) 为机器学习算法准备数据. (5) ...
- MATLAB 颜色图函数(imagesc/scatter/polarPcolor/pcolor)
2维的热度图 imagesc imagesc(x, y, z),x和y分别是横纵坐标,z为值,表示颜色 imagesc(theta,phi,slc); colorbar xlabel(); ylabe ...
- effective-java学习笔记---静态工厂方法替代构造方法
使用静态方法的优点: 1.它们是有名字的,生成的客户端代码更易阅读. 如:返回素数的静态方法 BigInteger.probablePrime 2.与构造方法不同,它们不需要每次调用时都创建一个对象. ...
- 从零开始发布一个ArcGIS Server地图服务
@ 目录 一.软件环境搭建 1.数据库安装 1.1.Oracle(可选) 1.1.1.安装Oracle服务端 1.1.2.安装Oracle客户端 1.2.PostgreSQL(可选) 1.2.1.安装 ...
- java如何自定义一个线程池
java线程池的一些简单功能,后续会更新,代码不多,很好理解 package com.rbac.thread; import java.util.ArrayList; import java.util ...
- 粘包处理现象及其解决方案——基于NewLife.Net网络库的管道式帧长粘包处理方法
[toc] #1.粘包现象 每个TCP 长连接都有自己的socket缓存buffer,默认大小是8K,可支持手动设置.粘包是TCP长连接中最常见的现象,如下图 socket缓存中有5帧(或者说5包)心 ...
- iOS开发 - 循环滚动的ScrollView
源码在这里,请多多指教. 由于开发需要,要用到循环自动滚动的scrollView,借鉴了前人的思路,重新设计了一个AutoSlideScrollView.先自吹自擂一翻吧: 借鉴UITableView ...
- Shell脚本的编写及测试
Shell脚本的编写及测试 1.1问题 本例要求两个简单的Shell脚本程序,任务目标如下: 编写一 ...
- 曹工说Redis源码(3)-- redis server 启动过程完整解析(中)
文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...
- web日志分析的重要性
虽然不可能对庞大的日志文件进行逐条的阅读,但是在这些日志文件中,确实会包含一些非常重要的信息.例如,在什么时间.有哪些ip地址访问了网站中的什么资源,等等. 通过对日志文件的分析,可以获得如下信息. ...