CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。其开源协议是基于 GPL, LGPL 和 MPL 的。官方网站:http://ckeditor.com/
一 般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号、换行等的干扰,只有先读入到 textarea 最方便。
使 用 CKeditor 3.0.1
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="http://banu.blog.163.com/blog/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("content");
</script>
可以看出,3.x 版本的使用非常方便,也不用担心会形成两个同名的 content。实际上 textarea 的 id 省略了也是可以的,因为 CKEditor 会先按 name 来查找,查找不到,再按 id 来查找。
并且编辑器会在 textarea 的位置替换原有的 textarea。
设 置编辑器皮肤、宽高
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea><script type="text/javascript" src="http://banu.blog.163.com/blog/ckeditor/ckeditor.js"></script><script type="text/javascript"><!-- CKEDITOR.replace("content", { skin: "kama", width:700, height:300 });//--></script>
skin 值应该是 ckeditor/skins 文件夹下的某个文件夹名称,如果指向不存在的皮肤,则不会显示编辑器。
设 置值、取值
设置值
CKEDITOR.instances.content.setData("输入文字"); // content 就是前面 CKEDITOR.replace 的第一个参数值
或
var editor = CKEDITOR.replace("content");
editor.setData("输入文字");
取值
alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一个参数值
或
var editor = CKEDITOR.replace("content");
alert(editor.getData());
插 入图片
若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。
CKEDITOR.instances.content.insertHtml("<img src=...>");
相关推荐
- 当表单提交时,可以通过`request.getParameter("editor1")`获取编辑器中输入的内容。 - 示例代码: ```java String content = request.getParameter("editor1"); if (content != null && !content.equals("")...
在网页开发中,传统HTML文本框(`<textarea>`)只支持纯文本输入,而jQuery内容编辑器通过将文本框转换为一个可编辑的区域,提供了更多的功能,如字体选择、颜色调整、图片上传、链接插入等。这些功能使得非技术人员...
在富文本编辑器中,JQuery通常用于DOM操作,如获取或设置元素内容,监听用户交互,以及触发动画效果。 JavaScript,简称JS,是Web开发的核心语言,用于增加网页的动态功能。在富文本编辑器中,JavaScript负责实现...
当页面加载时,通过Ajax获取之前保存的内容,填充到编辑器中。 5. **安全性考虑**:在处理用户输入时,必须注意防止XSS跨站脚本攻击和SQL注入。ThinkPHP提供了安全过滤机制,如`htmlspecialchars()`函数可以转义...
// 获取当前编辑器的内容 // 执行相应操作 }); ``` **三、jWYSIWYG与其他文本编辑器的比较** 相对于其他文本编辑器,如TinyMCE、CKEditor等,jWYSIWYG的主要优点在于其轻量级和易用性。它的体积小,加载速度快,...