springMVC +easyUI + hibernate 集合kindeditor富文本编辑

傷城~ 2022-06-09 07:51 256阅读 0赞

最近在做项目时页面需要用到富文本编辑器,试了好几个富文本编辑插件,不知道那里出了问题,一直没调好,后面参考借鉴网上一些前辈的各种方法,终于在项目中导入了简单的富文本编辑 (图片上传功能还没调整好,还在摸索中) ,

项目中使用springMVC +easyUI + hibernate框架,页面导入kindeditor富文本编辑后效果如下图

![Center][]

下面是操作导入kindeditor富文本编辑步骤:

1.下载kindeditor编辑器包

网址:http://vdisk.weibo.com/s/sLFygWkjJy0L2?archive\_ref=F0g4agD0FHfC68&archive\_path=/kindeditor-4.1.10&category\_id=0

2.   在项目中导入KindEditor相关文件,把下载下来的压缩包中的,删除asp ,asp.net ,jsp ,php文件

然后把压缩包直接copy到应用下  
        ![Center 1][]

3.在需要使用的jsp页面中导入相关js和css

![Center 2][]

文件路径根据自己项目做相应修改,下面是我的详细配置

<link type="text/css" rel="stylesheet" href="resource/kindeditor-4.1.7/themes/default/default.css" />
    		<link type="text/css" rel="stylesheet" href="resource/kindeditor-4.1.7/plugins/code/prettify.css" />
    		<script  type="text/javascript" charset="utf-8" src="resource/kindeditor-4.1.7/kindeditor-min.js"></script> 
    		<script  type="text/javascript" charset="utf-8" src="resource/kindeditor-4.1.7/lang/zh_CN.js"></script>
    		<script  type="text/javascript" charset="utf-8" src="resource/kindeditor-4.1.7/plugins/code/prettify.js"></script>
     
    <script type="text/javascript">
    //kindeditor编辑器
    KindEditor.ready(function(K) {
    var editor1 = K.create('textarea[name="content"]', {
    cssPath : '<%=request.getContextPath()%>/resource/kindeditor-4.1.7/plugins/code/prettify.css',
    afterBlur:function(){this.sync();},//此属性提交表单后台能获取到值
    allowFileManager : true
    });
    });
    </script>

4.在需要使用的文本域中设置上面红色标注相同的name和id名

![Center 3][]

5.  kindeditor编辑器包内有一个kindeditor.js或者kindeditor-min.js文件，这个文件主要是包含了编辑器的整个基本配置以及一些基本的函数好方法。通过查找定位kindeditor编辑器的基本配置属性options,然后可以看到其内有一个items项：可以对一些不需要的功能进行删除

![Center 4][]

另外这对每一个菜单code所表示的含义进行一个说明：

**source**：表示可以切换编辑器的编辑模式进入源代码HTML查看模式；

**undo**：表示后退，也就是我们常用的CTRL+Z快捷键功能；

**redo**：表示前进，也就是我们常用的CTRL+Y快捷键功能；

**preview**：表示预览，点击可以提前预览编辑器内的内容所展示的效果。

**print**：表示打印编辑器内的内容。

**template**：表示可以插入编辑器内的模板窗体；

**code**：表示可以插入代码段；

**cut**：表示剪切；

**copy**：表示复制，如同CTRL+C；

**paste**：表示粘贴，如同CTRL+V；

**plainpaste**：表示粘贴为无格式文本，主要是用于比如想赋值其他有HTML格式的纯文本进入编辑器，可以先在这里面进行HTML标签的过滤；

**wordpaste**：表示从WORD内粘贴；

**justifyleft**：表示选中文本居左；

**justifycenter**：表示选中文本居中；

**justifyright**：表示选中文本居右；

**justifyfull**：表示两端对齐；

**insertorderedlist**：表示编号（1、2、3）；

**insertunorderedlist**：表示项目符号；

**indent**：表示增加缩进；

**outdent**：表示减少缩进；

**subscript**：表示下标；如同：X2

**superscript**：表示上标；如同：X2

**clearhtml**：表示清除HTML标签；

**quickformat**：表示快速排版；

**selectall**：表示全选；

**fullscreen**：表示全屏；

**formatblock**：表示段落；

**fontname**：表示字体；

**fontsize**：表示文字大小；

**forecolor**：表示文字颜色；

**hilitecolor**：表示文字背景色；

**bold**：表示文字加粗；

**italic**：表示文字斜体；

**underline**：表示给文字追加下划线；

**strikethrough**：表示给文字追加删除线；

**lineheight**：表示调整行距；

**removeformat**：表示删除选中段的格式；

**image**：表示单个上传图片；

**multiimage**：表示批量上传图片；

**flash**：表示插入flash；

**media**：表示插入音视频文件；

**insertfile**：表示插入文件；

**table**：表示插入表格；

**hr**：表示插入横线；

**emoticons**：表示插入表情；

**baidumap**：表示插入地图；

**pagebreak**：表示插入分页符；

**anchor**：表示插入锚点；

**link**：表示插入超链接；

**unlink**：表示取消超级链接；一般和link配合出现；

**about**：表示关于kindeditor编辑器的信息；

[Center]: /images/20220609/f6632562442e45f2874a2a59b7025544.png
[Center 1]: /images/20220609/c0bf1cb3518f49acb2dca27e3bc6613a.png
[Center 2]: /images/20220609/2401b50d414b445f8cd2380b2c93a16f.png
[Center 3]: /images/20220609/57f4429046094c1a9ac4197f53fc10cf.png
[Center 4]: /images/20220609/6b9b4a5072f845d3852f517385571364.png