ckEditor使用方法
原帖地址
灵活的调用方式——JS代码调用:
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script> <!--此行为导入ckeditor.js文件,要注意目录是否正确。-->
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); <!--此行就是用ckeditor替换文本域textarea 这里editor1可以是文本域的id或者name--></script>
其实很简单,包含Ckeditor的js文件,生成textarea,然后用语句替换。js替换,可以进行更为详细的配置,下文将做详细说明。
二、Ckeditor工具栏自定义设置
在ckeditor目录下,有个Config.js
未配置的内容如下:
CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';
//可以在此处进行配置,配置后调用后就能呈现相应的显示效果,详细内容如下。};
1.在Ckeditor根目录的config.js中设置:
- config.toolbar = 'Full';
- config.toolbar_Full =
- [
- ['Source','-','Save','NewPage','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
- '/',
- ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
- ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Styles','Format','Font','FontSize'],
- ['TextColor','BGColor'],
- ['Maximize', 'ShowBlocks','-','About']
- ];
- config.toolbar_Basic =
- [
- ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
- ];
上述代码中第一行,即为设定默认工具栏的,可以改写为:
- config.toolbar = 'Basic';
2.在用js代码调用Ckeditor时设置:
- CKEDITOR.replace( 'editor1',
- {
- toolbar :
- [
- ['Styles', 'Format'],
- ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
- ]
- });
3.以上两种方法的综合:
在Ckeditor根目录下的config.js文件中设置好多组toolbar,如方法1示
例代码去掉第一行;调用Ckeditor时的代码如下:
- CKEDITOR.replace( 'editor1',
- {
- toolbar : 'Full'
- });
- CKEDITOR.replace( 'editor2',
- {
- toolbar : 'Basic'
- });
第三种方法比较灵活,可以在不同的页面中设置不同的样式的编辑器。
更详细的设置参数可以参考另一篇帖子:
ckeditor 配置文件Config.js的一些具体配置信息
三、Ckeditor语言、字体及皮肤样式自定义
Ckeditor支持多国语言,并提供三种皮肤样式:kama、office2003和v2,可以在Ckeditor根目录下的config.js文件中进行设置:
- config.language = 'zh-cn' ;
- config.skin = 'office2003';
也可以在js调用Ckeditor时设置:
- CKEDITOR.replace( 'editor1',
- {
- toolbar : 'Full',
- language : 'zh-cn',
- skin : 'office2003'
- });
- CKEDITOR.replace( 'editor2',
- {
- toolbar : 'Basic',
- language : 'zh-cn';
- skin : 'kama'
- });
四、Ckeditor添加中文字体
1.在Ckeditor根目录下的config.js文件中添加:
- config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';
2.在用js代码调用Ckeditor时添加:
- CKEDITOR.replace( 'editor1',
- {
- toolbar : 'Full',
- language : 'zh-cn',
- skin : 'office2003',
- config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'
- });
ckEditor使用方法相关推荐
- 关于CKeditor的个性应用设置 转
转自http://www.jb51.net/ " 因为我的网站需要一个编辑器,所以用周末时间研究了一下CKeditor,终于最终修改成了合适的样子. CKeditor,以前叫FCKedito ...
- PHP怎么使用ckeditor集成,php调用ckeditor?怎么调用ckeditor
怎么调用ckeditor呢,下面小编来给大家总结一处利用php调用ckeditor编辑器与js调用ckeditor的方法吧,其它脚本调用方法大致一样了. PHP调用FCKeditor,将FCKedit ...
- ASP.NET MVC实践系列11-FCKEditor和CKEditor的使用
FCKEditor是一款强大的在线编辑器,简单实用,多浏览器兼容,免费开源,应用十分广泛,据他的官方网站上称有三百多万的下载量,而且无数的知名大公司正在使用它.所以FCKEditor是很值得信赖的,现 ...
- Ckeditor 的加载顺序
我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序 ...
- ckeditor5快速使用
ckeditor官网提供了可以个人定制的方式,然后将地址好的包下载到本地,即可立即使用,定制方式如下: 打开官网定制页面:https://ckeditor.com/ckeditor-5/online- ...
- 在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
- Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
- FCKeditor如何升级CKEditor及使用方法
之前编辑器用的是FCKeditor,因为项目原因需要升级为最新版本4.2.2,发现是已经更名为CKEditor. 百度了一下,据官方的解释,CK是对FCK的代码的完全重写. 项目环境是asp.net的 ...
- CKEditor代码高亮显示插件Code Snippet安装及使用方法
CKEditor网页编辑器 CKEditor 即 FCKEDITOR .FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持 ...
最新文章
- BlackBerry 开发笔记入门 控件简介
- github操作命令
- C++ 自定义调试信息的输出
- 通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明
- hao123电脑版主页_建议Lenovo用户卸载监守自盗的联想电脑管家
- Spring Cloud在云计算SaaS中的实战经验分享
- win32——消息循环 原理 函数 GetMessage PeekMessage TranslateMessage SendMessage PostMessage...
- libz mysql_Docker和Mysql:libz.so.1:无法打开共享对象文件:权限被拒绝
- UILabel的相关属性设置
- 新鲜出炉 | 2019届互联网校招本科薪酬清单
- CANoe软件打不开了怎么办?
- 关于Android学习的三个终极问题
- 江西计算机竞赛有哪些,江西自主招生认可的竞赛有哪些
- APM —全链路追踪
- EEPROM,NAND,NOR,QSPI FLASH的区别
- 屏蔽去除CSDN上图片轮播形式的百度推广广告-20190104更新
- 我的世界修改服务器头像,我的世界单机模式中怎么使用其他头像 单机模式怎么改头像...
- echarts3.0 markline 最大值 最小值 均值 方差 标准差 包络 正态分布
- 为什么国内搜索不到国外服务器网站?
- 信道划分介质访问控制ALOHA协议CSMA协议CSMA/CD协议轮询访问MAC协议
热门文章
- 服务器操作系统该选 Debian/Ubuntu 还是 CentOS?
- const int a; int const a; const int *a; int * const a; int const * a const; 之间的区别
- 通用流量录制回放工具 jvm-sandbox-repeater 尝鲜 (二)——repeater-console 使用
- linux 页缓存 块缓存,页缓存和块缓存
- 纯原生 js 简易 实现 鼠标拖尾效果
- 自动驾驶线控转向的一些了解(逐步更新完善)
- 探花交友_第10章_搭建后台系统(新版)
- CUDA与cuDNN安装教程(超详细)
- 白话智能锁—卡片钥匙安全
- C++ Primer Plus P125~P200