`

jq获取ckeditor中textarea里面的内容

    博客分类:
  • Java
 
阅读更多

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&nbsp; 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=...>");  

分享到:
评论

相关推荐

    ckEditor在jsp中的使用

    - 当表单提交时,可以通过`request.getParameter("editor1")`获取编辑器中输入的内容。 - 示例代码: ```java String content = request.getParameter("editor1"); if (content != null && !content.equals("")...

    概念性jQuery内容编辑器

    在网页开发中,传统HTML文本框(`&lt;textarea&gt;`)只支持纯文本输入,而jQuery内容编辑器通过将文本框转换为一个可编辑的区域,提供了更多的功能,如字体选择、颜色调整、图片上传、链接插入等。这些功能使得非技术人员...

    JQ JS javascript layui UI框架 富文本 编辑器

    在富文本编辑器中,JQuery通常用于DOM操作,如获取或设置元素内容,监听用户交互,以及触发动画效果。 JavaScript,简称JS,是Web开发的核心语言,用于增加网页的动态功能。在富文本编辑器中,JavaScript负责实现...

    jQuery仿thinkphp在线编辑器

    当页面加载时,通过Ajax获取之前保存的内容,填充到编辑器中。 5. **安全性考虑**:在处理用户输入时,必须注意防止XSS跨站脚本攻击和SQL注入。ThinkPHP提供了安全过滤机制,如`htmlspecialchars()`函数可以转义...

    jquery插件集-web文本编辑器jwysiwyg

    // 获取当前编辑器的内容 // 执行相应操作 }); ``` **三、jWYSIWYG与其他文本编辑器的比较** 相对于其他文本编辑器,如TinyMCE、CKEditor等,jWYSIWYG的主要优点在于其轻量级和易用性。它的体积小,加载速度快,...

Global site tag (gtag.js) - Google Analytics