CKEDITOR使用与配置
安装:
下载CKEDITOR的文件,解压后复制到工程的WEBROOT目录下就OK!
引用CKEDITOR的JS文件:
新建JSP页面,添加其JS文件
注意:1.src的路径。
2.不要写成<script type="text/javascript" src="ckeditor/ckeditor.js />样式,在现有的3.0.1版本中会出现CKEDITOR未定义的脚本错误提示,致使不能生成编辑器。
替换TEXTAREA标签:
<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">CKEDITOR.replace('editor01');</script>
注意:要在textarea后面加入javascript.如果要在HEAD区写javasript,那么采用如下代码:
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor01' );
};
</script>
好了到此一个默认的CKEDITOR就配置完毕了,可以去页面看看它的模样了。
当然还有一个方法CKEDITOR.appendTo(elementOrId, config) 它可以在特定的dom对象中创建CKEDITOR
<div id="editorSpace"><:/div>
CKEDITOR.appendTo( 'editorSpace' );
可参考:
http://www.cnblogs.com/Fskjb/archive/2009/11/16/1603461.html
项目调用示例:
//将textarea替换成富文本
CKEDITOR.replace( "demo", {
toolbar : 'Basic'
});
// ......
//获取富文本框中的值
var demo2=CKEDITOR.instances.demo.getData();
//如果存在中文乱码问题,需要对文本信息进行两次编码
demo2=encodeURIComponent(demo2);
demo2=encodeURIComponent(demo2);
String demo = StringUtils.getParameter(request, "demo2");
//后台再通过解码获得中文
try {
demo = URLDecoder.decode(demo, "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
分享到:
相关推荐
超强的富文本技术文档,包含了Cheditor所有的使用方法 还可以用这个建图片集
java web 在线文本编辑器 小巧 轻便 功能强悍 支持各种浏览器 少配置 易上手
一款功能强大的在线world文档编辑器,支持文件图片上传,是web开发中不可多得的一个js工具
ckeditor 4.0编辑器带图片,flash 视频上传,已经经过自己测试,挺好用的
application/x-rar 390.02KB
CHEditor是一款韩国人开发的收费编辑器,KindEditor 2.x参考了CHEditor的UI和部分代码。 3. TinyMCE http://tinymce.moxiecode.com/ TinyMCE是一款非常优秀的编辑器,KindEditor 2.x和3.x参考了TinyMCE的UI和部分...
超级非常使用的富文本编辑,不仅上传图片还可以上传视频
项目架构SpringBoot1.5.5 MySQL JPA AngularJS6 NG-ZORRO前端UI框架Cheditor富文本编辑器使用说明方法1.下载原始码导入直接启动。 1.1。直接在GitHub下载对应的前一级原始代码(初始二进制包含SQL语句,SQL位于blog-...
今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来。结果当然是没用的……一...
Ckeditor4菜单栏 Ckeditor4与ie兼容问题 菜单选项不能展开