wangEditor富⽂本编辑器简单使⽤案例
之前在项⽬中使⽤过富⽂本编辑器，记得当时分别考察了⼏种编辑器，现在简单介绍⼀下，⾸先是wangeditor富⽂本的⽤法。⼤家也可以通过下⾯的链接查看wangEditor的⽂档进⾏开发。
接下来介绍⼀下我的⽤法：
⾸先需加载wangEditor的js
<script type="text/javascript" src="../static/plugins/wangEditor-3.1.1/release/wangEditor.min.js"></script>
接下来初始化富⽂本
话不多说直接上代码，⾸先提交页⾯代码
$(function () {
var E = window.wangEditor
var editor = new E('#div1');
editor.customConfig.uploadImgServer = '/pic/uploadedit'  //图⽚上传路径
editor.customConfig.uploadFileName = 'file'; //⽂件名称
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;
editor.$textElem.attr('contenteditable', true)//true时开启编辑器，false关闭，默认true
editor.customConfig. menus = ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'image', 'table', 'u ndo', 'redo'];//⾃定义编辑器功能
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图⽚上传并返回结果，⾃定义插⼊图⽚的事件（⽽不是编辑器⾃动插⼊图⽚！！！）
// insertImg 是插⼊图⽚的函数，editor 是编辑器对象，result 是服务器端返回的结果
var url =result.data;
insertImg(url[0]);
// result 必须是⼀个 JSON 格式字符串！！！否则报错
}
}
var $text1 = $('#text1')
hange = function (html) {
// 监控变化，同步更新到 textarea
$text1.val(html)
}
// 初始化 textarea 的值
$text1.html())
});
使⽤textarea进⾏富⽂本提交，并获取富⽂本内容
<div id="div1">
<p>接收富⽂本回显内容如<#t??>${t}</#if></p>
</div>
<textarea id="text1" name="content" ><#t??>${t}</#if></textarea>
接下来进⾏后台上传图⽚代码编写
我这⾥的图⽚上传采取的是上传到fastdfs服务器，可以直接调⽤保存接⼝，fastdfs具体配置在这不做讲解。
接下来后台上传代码
/**
* wangEditor富⽂本图⽚上传
* @param file
* @return
*/
@PostMapping("/pic/uploadedit")
public JSONObject singleFileUploadEdit(@RequestParam("file") MultipartFile file) {        String path = "";
JSONObject result = new JSONObject();
if (file.isEmpty()) {
log.info("未选择任何图⽚");
asp富文本编辑器return null;//可根据情况⾃定义返回值
}
try {
path = FastDFSClient.saveFile(file);//调⽤fastdfs保存接⼝返回路径
} catch (IOException e) {
log.info("upload file failed", e);
}
JSONArray jsonArray = new JSONArray();
jsonArray.TrackerServerHost() + path);
result.put("errno", 0);// errno 即错误代码，0 表⽰没有错误。
result.put("data", jsonArray);// data 是⼀个数组，返回若⼲图⽚的线上地址
return result;
}
以上就是简单的wangEditor使⽤⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。