ckeditor文本编辑器应用

转载 2015年11月19日 15:39:50
第一步:找到需要放置CKEditor编辑器的页面,引入CKEditor的js文件(${contextPath}是JSTL写法,请改成你自己的路径写法,绝对路径或者相对路径):
<script type="text/javascript" src="${contextPath}/ckeditor4.1/ckeditor.js"></script>
第二步:在需要提交的form里,写一个:
<textarea>
<form id="detailForm" method="post">
<textarea id="content" name="content"></textarea>
<input type="button" value="保存" id="save" onclick="save()" />
</form>
第三步:创建CKEditor实例。
<script type="text/javascript">
var editor = null;
window.onload = function(){
editor = CKEDITOR.replace('content'); //参数‘content’是textarea元素的name属性值,而非id属性值
}
</script>
第四步:在页面js中为CKEditor编辑器设置/获取值
editor.setData('这里是需要传递给CKEditor编辑器实例的值');
editor.getData();
第五步:在后台java代码中获取CKEditor编辑器的值
<script type="text/javascript">
function save(){
editor.updateElement(); //非常重要的一句代码
//前台验证工作
//提交到后台
}

</script>




官网 :http://ckeditor.com/download 

编辑器CKEDITOR使用实例

今天写前台用到了文本编辑器,项目之前用的CKEDITOR,所以我也引用了CKEDITOR,前台主要用了jqgrid和CKEDITOR结合,进行对公告的后台管理,效果如图所示: 点击添加公告弹出带有...
  • qililong88
  • qililong88
  • 2016年09月28日 09:25
  • 677

CKEditor 安装及使用

CKEditor即大名鼎鼎的FCKeditor,它终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CKSource(波兰华沙的公司)的名字有...
  • wang544831183
  • wang544831183
  • 2017年08月09日 15:42
  • 619

使用博客编辑工具插件的案例-->CKeditor的使用

1.到fckeditor网站下载相关的fckeditor插件的压缩包,然后寻找相关的使用文档。通常在developer那个相关类别中,如上一篇日志就是在其网站上查找到的相关文档。2.将其解压并粘贴到工...
  • lishirong
  • lishirong
  • 2014年12月02日 09:47
  • 801

CKEditor编辑器的详细使用

安装:   1.下载CKEDITOR的文件,解压后复制到工程的WEBROOT目录下就OK! 替换TEXTAREA标签:   textarea rows="30" cols="50"...
  • u011271894
  • u011271894
  • 2015年07月03日 19:59
  • 998

模态窗口(弹出框)整合CKEditor实战

需求背景: 电子合同项目下的合同模板新增页面中是用layer.js实现的弹出框,也叫模态窗口,用之前的summernote文本编辑器不符合当前编辑合同文本内容的需求(1:字体大小2:字体颜色3...
  • u010504064
  • u010504064
  • 2017年03月16日 16:30
  • 1469

关于CKEditor4.5.6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),自定义行高,去编辑器的中内容,将编辑器中内容设置到指定的位置等

关于CKEditor的一个配置整理,改文件为config.js:文件内容如下: /**  * @license Copyright (c) 2003-2016, CKSource - Fre...
  • toto1297488504
  • toto1297488504
  • 2016年04月25日 23:43
  • 6241

ckeditor 工具栏配置

toolbar的配置,有两个Full和Basic,默认是Full,可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下 注意工具按钮是分组的,一...
  • zh_fn
  • zh_fn
  • 2014年03月18日 12:26
  • 3639

ckeditor 工具栏配置

toolbar的配置,有两个Full和Basic,默认是Full,可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下 注意工具按钮是分...
  • mr_orange_klj
  • mr_orange_klj
  • 2017年01月03日 12:34
  • 1434

ckeditor编辑器的详细配置

一、使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js  cript" src="ckeditor/ckeditor.js"> 2、在使用编辑器的地方插入HT...
  • wydd7522
  • wydd7522
  • 2016年06月04日 23:18
  • 2575

CKeditor 使用方法

作者:Tyler Ning 出处:http://www.cnblogs.com/tylerdonet/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位...
  • VanishOrAlone
  • VanishOrAlone
  • 2017年12月03日 20:17
  • 120
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ckeditor文本编辑器应用
举报原因:
原因补充:

(最多只允许输入30个字)