富文本編輯器的基本使用

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 + "\"}";