ckeditor使用
http://www.iprue.com/article/123/
http://hi.baidu.com/good_pb/blog/item/db2cac30d92ff797a9018e4b.html
CKEditor 简介
CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器。CKEditor 的前身是 FCKEditor,目前,有很多公司都在使用 CKEditor 作为 Web 编辑的解决方案。
从CKEditor的官方网站(http://ckeditor.com/download) 下载的开发包解压
CKEditor 的基本使用
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<textarea id="editor1" class="ckeditor">Sample Text</textarea>
此种创建方法的优点:简单! 缺点:不容易灵活设置Ckeditor的皮肤、工具栏甚至初始化时的动作事件;补救办法:通过Ckeditor根目录下的config.js去设置(适用于整个网站只调用同一种皮肤、工具栏的Ckeditor)
除了令 CKEditor 自动进行 <textarea>元素的替换外,我们也可以使用 JavaScript 代码让 CKEditor 替换特定的 <div> 以及 <textarea> 元素
<html>
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
functiononLoad(){
CKEDITOR.replace("editor2");
}
//-->
</script>
</head>
<body οnlοad="returnonLoad(); ">
<div id="editor2"><strong>Sample</strong> Text</div>
</body>
</html>
CKEDITOR.replace("editor2");
CKEditor会在<body>元素中先按name来查找<div>元素或<textarea>元素为"editor2",查找不到,再按 id 来查找。
在通常的 CKEditor 应用中,用CKEDITOR.replace()传递更多的参数,来定制我们需要的编辑器。
如:
<html>
<head>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
functiononLoad() {
CKEDITOR.replace("editor2", {
toolbar: [
['Bold','Italic','Underline','Strike'], ['Cut','Copy','Paste'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
]
});
}
// -->
</script>
</head>
<body οnlοad="returnonLoad();">
<div id="editor2">Sample text</textarea>
</body>
</html>
CKEditor菜单栏配置可以参见其官网上的文:http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar。
设置编辑器皮肤、宽高
<textarea cols="90" rows="10" id="content" name="content">ckeditor</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content",
{
skin: "kama", width:700, height:300
});
//-->
</script>
设置值
CKEDITOR.instances.content.setData("test"); // content 就是前面 CKEDITOR.replace 的第一个参数值
或var editor = CKEDITOR.replace("content");
editor.setData("test");
取值
alert(CKEDITOR.instances.content.getData() );// content 就是前面 CKEDITOR.replace 的第一个参数值
或var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入图片
若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。
CKEDITOR.instances.content.insertHtml("<img src=...>");
配置编辑器
ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数:
config.language = 'zh-cn';// 界面语言,默认为 'en'
config.width = 400; // 设置宽高
config.height = 400;// 设置高度
config.skin = 'v2';// 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'
config.uiColor = '#FFF'; // 背景颜色
Ckeditor工具栏自定义设置
// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.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';
也可以用js代码调用Ckeditor时设置:
CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
以上两种方法的综合
CKEDITOR.replace( 'editor1',
{
toolbar : 'Full'
});
CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
);
config.toolbarCanCollapse = true;//工具栏是否可以被收缩
config.toolbarLocation = 'top';//可选:bottom//工具栏的位置
config.toolbarStartupExpanded = true;//工具栏默认是否展开
config.resize_enabled = false;// 取消 "拖拽以改变尺寸"功能 plugins/resize/plugin.js
config.autoUpdateElement = true;// 当提交包含有此编辑器的表单时,是否自动更新元素内的数据
config.resize_maxHeight = 3000;//改变大小的最大高度
config.resize_maxWidth = 3000;//改变大小的最大宽度
config.resize_minHeight = 250;//改变大小的最小高度
config.resize_minWidth = 750;//改变大小的最小宽度
//设置快捷键
config.keystrokes = [
[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线
[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
]
//设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL + 66 /*B*/,
CKEDITOR.CTRL + 73 /*I*/,
CKEDITOR.CTRL + 85 /*U*/
]
//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
element : 'span',
styles : { 'background-color' : '#(color)' }
}
//区块的前景色默认值设置 plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span',
styles : { 'color' : '#(color)' }
};
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'
});
config.contentsCss = './contents.css';//所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径
config.enterMode = CKEDITOR.ENTER_P; //回车产生的标签,可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
config.font_defaultLabel = 'Arial';//默认的字体名 plugins/font/plugin.js
Ckeditor添加中文字体
在Ckeditor根目录下的config.js文件中添加:
config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';
在用js代码调用Ckeditor时添加:
CKEDITOR.replace( 'editor1', {
toolbar : 'Full',
language : 'zh-cn',
skin : 'office2003',
config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'
});
一些使用技巧
1、在页面中即时设置编辑器
<script type="text/javascript">
//示例1:设置工具栏为基本工具栏,高度为70
CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',
{ toolbar:'Basic', height:70 });
//示例2:工具栏为自定义类型
CKEDITOR.replace( 'editor1',
{
toolbar :
[
//加粗 斜体,下划线 穿过线 下标字 上标字
['Bold','Italic','Underline','Strike','Subscript','Superscript'],
//数字列表 实体列表 减小缩进 增大缩进
['NumberedList','BulletedList','-','Outdent','Indent'],
//左对齐 居中对齐 右对齐 两端对齐
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//超链接 取消超链接 锚点
['Link','Unlink','Anchor'],
//图片 flash 表格 水平线 表情 特殊字符 分页符
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
//样式 格式 字体 字体大小
['Styles','Format','Font','FontSize'],
//文本颜色 背景颜色
['TextColor','BGColor'],
//全屏 显示区块
['Maximize', 'ShowBlocks','-']
]
}
);
</script>
精简ckeditor
在部署到Web服务器上时,下列文件夹和文件都可以删除:
/_samples :示例文件夹;
/_source :未压缩源程序;
/lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);
根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);
/skins 目录下不需要的皮肤,一般用V2(简单,朴素) ,如果只保留V2则必须在config.js中指定皮肤。
ckeditor使用相关推荐
- php set medias,laravel5.1 -- Integrate FileManager and CKeditor into laravel
FileManager中文名叫文件管理器,也叫文件浏览器,它给我们提供了一个可视化的界面来管理文件和文件夹.利用FileManager,我们可以对文件进行浏览.增加.打印.修改(文件属性).重命名.搜 ...
- FCKeditor如何升级CKEditor及使用方法
之前编辑器用的是FCKeditor,因为项目原因需要升级为最新版本4.2.2,发现是已经更名为CKEditor. 百度了一下,据官方的解释,CK是对FCK的代码的完全重写. 项目环境是asp.net的 ...
- Ueditor和CKeditor 两款编辑器的使用与配置
一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...
- ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
- Ckeditor通过Ajax更新数据
之前在表单中对ckeditor的赋值就直接是 $("#theadEditor").val(result); 而如今我想通过点击不同选项来使用Ajax在后台訪问数据.对ckedito ...
- 12.HTML编辑器(CKEditor、CKFinder集成)
CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...
- CKEditor的安装与基本使用
http://blog.csdn.net/liananse/article/details/6320617 CKEditor的安装与基本使用(JSP) 文章分类:Web前端 一.下载CKEditor ...
- 使用ckeditor
安装插件: compile ":ckeditor:4.5.4.0" 在config.groovy中增加如下内容: ckeditor {config = "/js/myck ...
- ckeditor富文本编辑器的基本配置设置:
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
- CKeditor 配置使用
CKeditor 配置使用 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascr ...
最新文章
- 疫情过后,对医疗AI行业带来的机遇
- 跟着柴毛毛学Spring(3)——简化Bean的配置
- 硬盘运行时断电会导致硬盘怎样
- pLSA概率潜在语义分析
- idea 用iterm 终端_帅气逼人的终端环境
- Windows.form增删改查
- 【HDU - 5914 】Triangle (打表 或 set维护)
- create用法java_Java AcousticEchoCanceler.create方法代碼示例
- 7-7 印度大壶节 (25 分)
- 2021 年百度之星·程序设计大赛 - 初赛二 1002 随机题意(区间贪心)
- 【spring boot】5.spring boot 创建web项目并使用jsp作前台页面
- 网站防采集不防搜索引擎策略
- 利用go破解带密码的rar压缩文件
- 2018你那计算机考试新题型,2018年421多省公务员考试判断推理新题型、新趋势
- Java P5713 【深基3.例5】洛谷团队系统 洛谷入门题
- Container及其内部进程监控剖析
- 在固定宽高内显示固定数量的最大正方形
- 安卓证书库文件BKS制作
- 读《如何阅读一本书》
- 联想小新 Pad和联想小新 Pad Pro有什么区别 哪个好详细性能配置对比