wangEdit富文本编辑器的使用

基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

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

第一步：下载相关js

https://download.csdn.net/download/sfdcxz/10563284

https://download.csdn.net/download/sfdcxz/10563268

第二步：引入js

<script type="text/javascript" src="/js/wangeditor/wangEditor.js" ></script>

第三步：使用

 var editor;
$(function(){
	var E = window.wangEditor
	editor = new E('#editor')
	
	// 自定义菜单配置
	editor.customConfig.menus = [
//	 		    'head',  // 标题
			    'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */,  
//	 		    'underline',  // 下划线
			    'strikeThrough',  // 删除线
			    'foreColor',  // 文字颜色
			    'backColor',  // 背景颜色
			    'link',  // 插入链接
			    'list',  // 列表
			    'justify',  // 对齐方式
			    'quote',  // 引用
	 		   // 'emoticon',  // 表情   打开后支持表情功能
			    'image',  // 插入图片
			    'table',  // 表格
			    'video',  // 插入视频
//	 		    'code',  // 插入代码
			    'undo',  // 撤销
			    'redo'  // 重复
	                         ]

	editor.customConfig.uploadImgServer = 'pn/imagetextmaterial/localUpload'  // 上传图片到服务器
	// 将图片大小限制为 1M
	editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
	editor.customConfig.uploadFileName = 'file';
	editor.customConfig.showLinkImg= false;
	// 限制一次最多上传 1 张图片
	editor.customConfig.uploadImgMaxLength = 1;
	editor.create()
}
<div id="editor"  style="height: 324px;width:560px;" >

实现效果：

第四步：获取富文本中的内容

var content=editor.txt.html()；

第五步：实现图片上传

editor.customConfig.uploadImgServer = 'pn/imagetextmaterial/localUpload'
//接收图片的参数名为file，那么后台接收的时候必须指定参数名未file
editor.customConfig.uploadFileName = 'file';

后台代码：

 @ResponseBody
    @RequestMapping(value = "/localUpload",method=RequestMethod.POST, produces = "application/json; charset=UTF-8")
    public Object  localUpload(@RequestParam(value="file")MultipartFile file)
    {
    	JSONObject result = new JSONObject();
    	  // 检查file是否符合要求
        if (!this.checkImageMaterial(file))
        {
        	result.put("errno", SystemCode.IMAGE_MATERRIAL_TYPE_SIZE_ERROR.getCode());
            return result;
        }
        try
        {
            Map<String, String> map = imageTextMaterialService.upload(file);
            result.put("errno", 0);
            result.put("data", Arrays.asList(map.get("url")));
            return result;
        }
        catch (Exception e)
        {
            log.error("上传图片失败", e.getMessage(), e);
            result.put("errno", SystemCode.ERROR_500.getCode());
            return result;
        }
    }

后台返回jsonObject对象原因：wangEditor.js的源码中规定好了

 // 返回数据
            xhr.onreadystatechange = function () {
                var result = void 0;
                if (xhr.readyState === 4) {
                    if (xhr.status < 200 || xhr.status >= 300) {
                        // hook - error
                        if (hooks.error && typeof hooks.error === 'function') {
                            hooks.error(xhr, editor);
                        }

                        // xhr 返回状态错误
                        _this3._alert('上传图片发生错误', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
                        return;
                    }

                    result = xhr.responseText;
                    if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
                        try {
                           //此处
                            result = JSON.parse(result);
                        } catch (ex) {
                            // hook - fail
                            if (hooks.fail && typeof hooks.fail === 'function') {
                                hooks.fail(xhr, editor, result);
                            }

                            _this3._alert('上传图片失败', '上传图片返回结果错误，返回结果是: ' + result);
                            return;
                        }
                    }