富文本编辑器CKEditor的使用

最新推荐文章于 2025-06-16 18:44:08 发布

原创最新推荐文章于 2025-06-16 18:44:08 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何在项目中集成CKEditor富文本编辑器，包括下载、部署及与表单交互的方法。此外，还提供了使编辑器变为只读状态的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CKEditor是一款由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息.

介绍下它的使用：

一：从官网下载ckeditor。解压。

二：将ckeditor整个文件夹放到项目资源目录下。

三：在要添加ckeditor的页面中引入ckeditor核心文件ckeditor.js

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor/ckeditor_msg.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor//lang/zh_CN.js"></script>

四：jsp中将相应的控件替换成编辑器代码,即:在textarea下方编写:js:CKEDITOR.replace('textarea的name'),

                     <td>
                        <textarea id="opinion" name="opinion" rows="10" cols="38">默认内容</textarea>   
                        <script type="text/javascript">CKEDITOR.replace('opinion')</script>                         
                    </td>




 五：打开网站查看效果,如下图:

六：在提交form.serialize()表单数据时，由于textarea标签替换成了编辑器代码,所以如果不进行处理的话,直接提交表单,后端Controller是无法接收到输入在编辑器中的内容的.
处理：
 <script type="text/javascript">
       var editor=ckeditor('opinion');
$('#opinion').val(editor.getData());
或者：
editor.sync();



</script>




另附：根据需求，有时设置文本编辑器不可编辑。
CKEDITOR.config.readOnly = true;