富文本编辑器的基本使用

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sueyyyy/p/9704002.html

文章标签：

#javascript #json #ViewUI

KindEditor

http://kindeditor.net/

UEditor：百度编辑器

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

CKEditor

http://ckeditor.com/

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

使用方法

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

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

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

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

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

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

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

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

上传图片时controller方法：

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

转载于:https://www.cnblogs.com/sueyyyy/p/9704002.html