富文本编辑器的基本使用

KindEditor

http://kindeditor.net/

UEditor：百度编辑器

http://ueditor.baidu.com/website/

CKEditor

http://ckeditor.com/

纯js开发，跟后台语言没有关系。

使用方法

第一步：在jsp中引入KindEditor的css和js代码

<link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

<form action="editor.html" method="post">
    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc" id="editor"></textarea>
    <input type="submit"/>
</form>

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

<script type="text/javascript" >
    var kingEditorParams ={
        filePostName  : "file",//指定上传文件参数名称
        uploadJson:'upload2.html',//指定上传文件请求的url。
        dir:"image"//上传类型，分别为image、flash、media、file
    }
    var editor;
    $(function () {
        editor=KindEditor.create($("#editor"),kingEditorParams);
    })
</script>

js提交请求的时候，同步富文本框到textarea

editor.sync();//同步富文本编辑器到textarea

上传图片时controller方法：

@ResponseBody
String json = "{\"error\":0,\"url\":\"" + url + "\"}";