1 编辑器选用之初

我在大二下学期的时候想做一个基于JSP的类似于qq空间的的项目，不过只是简单实现了日志，说说，留言板，以及相册模块中的图片上传与显示功能，做的很水，当时唯一觉得还过得去的地方大概就是偶然想起来加了一个在线编辑器，配合发表日志说说需要，当时选择使用的就是kindeditor的富文本编辑器，类似于fckeditor，个人感觉这个的皮肤更好看，而且对中文的支持更好，没那么容易出现中文乱码问题。下面就简单说一下怎么在JSP项目中添加编辑器的支持。

2 kindeditor使用步骤

2.1 首先去官网下载

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php
上面也有编辑器的使用说明。

2.2 解压之后如下所示

这里写图片描述

Note
您可以根据需求删除以下目录后上传到服务器。

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

由于本人做的是用的是JSP，所以ASP,PHP什么的就用不上了，直接把那些去掉然后将整个文件夹扔进Myeclipse，如图：
这里写图片描述
里面有个报错，估计是我自己IDE的问题，没有处理照常使用。

2.3 编写JSP页面

1 新建一个JSP页面，改一下字符编码为utf-8，
这里写图片描述
2 在需要显示编辑器的位置添加textarea输入框

<textarea id="editor_id" name="content"     style="width:700px;height:300px;">
</textarea>

Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。

如：

<body>
    <form method="post" action="save.do">
        <label>标题：</label>
        <div class="content">
            <textarea id="editor_id" name="content"
                style="width:500px;height:300px;">在这里输入内容...</textarea>

        </div>
        <div class="btn">
            <input type="submit" value="确定" name="submit" /> <input type="reset"
                value="重置" name="reset" />
        </div>
    </form>
</body>
</html>

3 在该HTML页面添加以下脚本。

<link rel="stylesheet" href="themes/default/default.css" />
<link rel="stylesheet" href="plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor.js"></script>
<script charset="utf-8" src="lang/zh_CN.js"></script>
<script charset="utf-8" src="plugins/code/prettify.js"></script>
<script>
    KindEditor.ready(function(K) {
        var editor1 = K.create('textarea[name="content"]', {
            cssPath : 'plugins/code/prettify.css',
            uploadJson : 'jsp/upload_json.jsp',
            fileManagerJson : 'jsp/file_manager_json.jsp',
            allowFileManager : true
        });
    });
</script>

Note
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。

界面如下：
这里写图片描述

原文链接：https://blog.csdn.net/sushauai/article/details/50959952