基于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.wangEditoreditor = 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’ // 上传图片到服务器// 将图片大小限制为 1Meditor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024editor.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，那么后台接收的时候必须指定参数名未fileeditor.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; } }
?
