wangEditor富文本编辑器基本使用方法

最新推荐文章于 2025-07-25 12:46:03 发布

杨家小伙

最新推荐文章于 2025-07-25 12:46:03 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： wangEditor基本使用

本文链接：https://blog.youkuaiyun.com/langwang1993/article/details/87872144

本文介绍了wangEditor富文本编辑器的基本使用方法，包括通过script标签引入编辑器，初始化编辑器的代码示例，设置本地上传图片的配置，以及如何获取和回显富文本内容。特别提示，回显内容时需要注意英文单引号的转义。

下载地址 :https://github.com/wangfupeng1988/wangEditor/releases

1.用script标签引入 wangEditor.js

2.初始化编辑器代码如下

//编辑器
           var E = window.wangEditor;
           var commentDiv = new E('#commentDiv');
           //开启本地上传图片选项
           commentDiv.customConfig.uploadImgServer = '${ctx}/WangUpload'; //上传URL
           commentDiv.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
           commentDiv.customConfig.uploadImgMaxLength = 5;
           commentDiv.customConfig.uploadFileName = 'myFileName';
           commentDiv.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
   // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
   // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
   // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
   var url =result.data;
   insertImg(url);
   // result 必须是一个 JSON 格式字符串！！！否则报错
   }
   }
           commentDiv.create();

@RequestMapping(value ="/WangUpload",method=RequestMethod.POST)
   @ResponseBody
   public Object UpLoadImg(@RequestParam(value="myFileName")MultipartFile mf,HttpServletRequest request) throws Exception {
       String originalFilename = mf.getOriginalFilename();
       String picHttpPath = "";
       if(!StringUtils.isEmpty(originalFilename)){
//此处填写上传图片代码
}
       Map<String, String> map = new HashMap<String, String>();
   map.put("data",picHttpPath);//这里应该是项目路径
   return map;//将图片地址返回
   }

3.获取富文本的html内容与文本内容

html:commentDiv.txt.html()

text:commentDiv.txt.text()

4.回显富文本内容

commentDiv.txt.html(内容)

注意：回显内容时如果内容中存在英文格式的单引号需进行转义

如 commentDiv.txt.html().replace(/\'/g,"'")