CKEditor编辑器使用方式小结

最新推荐文章于 2025-04-28 12:53:23 发布

javaee_sunny

最新推荐文章于 2025-04-28 12:53:23 发布

阅读量1.5w

点赞数

文章标签： ckeditor 编辑器 textarea jsp

本文链接：https://blog.youkuaiyun.com/javaee_sunny/article/details/52703283

版权

jsp 同时被 2 个专栏收录

20 篇文章

订阅专栏

前端工具

1 篇文章

订阅专栏

CKEditor是一款由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息，也可以在源码方式下填写内容，在各个网站中应用非常广泛。

1.下载

(1) 首先在百度中输入ckeditor,第一个链接就是它的官网,点击进入.

(2) 点击右侧的download按钮.

(3) 接下来会提示要下载哪种类型的包，建议第三种full package，因为这个全，点击Download CKEditor将它下载下来。(这里我选择的是默认的)

(4) 解压下载后的zip包,可以看到里面有很多js和css.

2.配置

(1) 将ckeditor整个文件夹放到网站资源目录下,如下图.

maven工程结构配置:
\

(2) 在要添加ckeditor的页面中引入ckeditor核心文件ckeditor.js

    <%-- 第一条引入非必须,第二条是必须引入的--%>
    <script type="text/javascript" src="${ctx}/js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="${ctx}/js/ckeditor/ckeditor_msg.js"></script>

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

                    <td>
                        <textarea id="opinion" name="opinion" rows="10" cols="38">${item.opinion}</textarea>   
                        <script type="text/javascript">CKEDITOR.replace('opinion')</script>                         
                    </td>

(4) 打开网站查看效果,如下图:

3.通过ckeditor向Controller传递参数的方式:

CKEditor主要应用于form表单,用于输入较复杂的文字格式,并可以将包含文字格式的html标签一同保存到数据库中.
在以上的设置中,由于textarea标签替换成了编辑器代码,所以如果不进行处理的话,直接提交表单,后端Controller是无法接收到输入在编辑器中的内容的.

(1) 采用方式(重点):

就是:在提交表单时,先获取到编辑器中的内容,将该内容赋值给对应的标签对象,然后再进行提交表单.这是完成编辑器中内容顺利发送到后端的关键**.

(2)局部代码:

    <script type="text/javascript">
        $(function() {
            var frm=$('#itemForm').form();
            <!--超链接绑定鼠标单击事件 -->
            $("a.save").click(function() {
                <!--获取编辑器中输入的内容赋值给textarea标签 -->
                $('#opinion').val(editor.getData());
                frm.setData();
                frm.ajaxForm(options);
                if(frm.valid()){
                    form.submit();
                }
            });
            <!--这句就替代了下面的js :CKEDITOR.replace('opinion') -->
            editor=ckeditor('opinion');
        });
    </script>
</head>
<body>

<div class="group"><a class="link save" id="dataFormSave" href="#">保存</a></div>
<div class="group"><a class="link back" href="list.ht">返回</a></div>
<div class="panel-body">
  <form id="itemForm" method="post" action="save.ht">
    <table class="table-detail" cellpadding="0" cellspacing="0" border="0" type="main">
      <tr>
        <th width="20%">领导批示时间: </th>
        <td><input type="text" id="leaderoperatetime" name="leaderoperatetime" value="<fmt:formatDate value='${item.leaderoperatetime}' pattern='yyyy-MM-dd'/>" class="inputText date" validate="{date:true}" /></td>      
      </tr>

      <tr>
        <th width="20%">领导意见: </th>
        <td><textarea id="opinion" name="opinion" rows="10" cols="38">${item.opinion}</textarea>   
<!-- <script type="text/javascript">CKEDITOR.replace('opinion')</script> --></td>                       
      </tr>

                ***

4.通过Controller向页面编辑器中传递参数的方式:

同样的设置,将编辑器和对应标签绑定到一起,就可以回显数据,并进行编辑.

5.将CKEditor中页面编辑器设置为不可编辑状态:

由于不同条件下,编辑器中的内容不允许进行编辑,所以在有时加载页面编辑器时,需要将编辑器设置为不可编辑状态.

            editor=ckeditor('opinion');
            var state='${item.state}';
            //alert(state);
            if( state== '通过审核'){
                 CKEDITOR.config.readOnly = true;
            }

js代码:

<script type="text/javascript">
$(document).ready(function() {
   CKEDITOR.config.readOnly = true;
});
</script>

6.参考文章:

(1) ckeditor使用教程【简单快捷】 ;
(2) 将ckeditor设置为不可编辑状态 ;

7.更新时间:

2016.10.18