wangEditor富文本使用教程

---

一、wangEditor下载安装

官网地址：https://www.wangeditor.com/

二、使用步骤

1.前端使用

代码如下（示例）：

  <div id="div1"></div>
 <textarea id="text1" name="content" style="display:none;"></textarea>
	//引入js
	<script src="../static/ajax/libs/wangeditor/wangEditor.js" th:src="@{/ajax/libs/wangeditor/wangEditor.js}"></script>
    <script src="../static/ajax/libs/wangeditor/wangEditor-10.min.js" th:src="@{/ajax/libs/wangeditor/wangEditor-10.min.js}"></script>

	<script>
			var ctx = [[@{/}]];
			
	        //初始化富文本
            layui.use(['form'], function () {
	            form = layui.form;
	            const E = window.wangEditor;
	            const editor = new E('#div1')
	            // 第一步，初始化 textarea 的值
	            const $text1 = $('#text1')
	            editor.config.uploadImgShowBase64=true; //打开文件上传编码
	            editor.config.height = 1000;		//设置高度
	            editor.config.uploadFileName = 'file';  //对应后台上传图片接口参数的名字
	            editor.config.uploadImgServer = ctx + "common/upload1"; //后台图片上传地址
	     
	            editor.config.onchange = function (html) {
	                // 第二步，监控变化，同步更新到 textarea
	                $text1.val(html)
	            }
	            editor.create()   	//创建富文本
				//取出富文本中数据
	            $text1.val(editor.txt.html())
       		 })
	</script>

2.后台接收

代码如下（示例）：

/**
*文件上传
*/
 	@PostMapping("/common/upload1")
    @ResponseBody
    public Map<String,Object> uploadFile1(MultipartFile file) throws Exception
    {
        Map<String,Object> mv = new HashMap<>();
        String remoteUpload = ''; //图片上传地址
        try
        {
            String url = HttpUtils.gettesthttpclient(file,remoteUpload);
            if(url == null){
                return null;
            }
            String code = JSON.parseObject(url).getString("code");
            if(!code.equals("0")){
                return null;
            }
            String data = JSON.parseObject(url).getString("data");
            String url1 = JSON.parseObject(data).getString("fullUrl");
            String fileName = JSON.parseObject(data).getString("fileName");
            List<String> list=new ArrayList<String>();
            list.add(url1);
            mv.put("data", list);
            mv.put("errno", 0);
            return mv;
        }
        catch (Exception e)
        {
            return null;
        }
    }

---

总结

刚刚将此功能集成到项目里，特此记录。