CKEditor编辑器使用方式小结

来源：互联网发布：mac os镜像下载iso 编辑：程序博客网时间：2024/05/18 00:11

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

0 0