wangeditor富文本编辑器集成
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="div1" style="width: 360px;"></div></body></html><script type="text/javascript" src="/npm/wangeditor@4.7.13/dist/wangEditor.min.js"></script><script src="../comm/js/comurl.js"></script><script type="text/javascript">var uplaodurl=server_url+"uploadv2?filepath=baoji";const E = window.wangEditor// 或者 const editor = new E(document.getElementById('div1'))const editor = new E("#div1")editor.config.placeholder = '自定义 placeholder 提示文字'// 设置编辑区域高度为 500pxeditor.config.height = 500// 菜单栏提示为上标（默认配置）editor.config.menuTooltipPosition = 'up'//来关闭样式过滤。editor.config.pasteFilterStyle = false // 来忽略粘贴的图片editor.config.pasteIgnoreImg = true// 配置 server 接口地址editor.config.uploadImgServer = uplaodurleditor.config.uploadImgFileName = 'file'// 设置 headers（举例）editor.config.uploadHeaders = {'Accept' : 'text/x-json'};editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 2Meditor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']editor.config.uploadImgMaxLength = 1editor.config.uploadImgParams = {token: 'xxxxx',x: 100}editor.config.uploadFileName = 'file'editor.config.uploadImgTimeout = 10 * 1000editor.config.uploadImgHooks = {// 上传图片之前before: function(xhr) {console.log(xhr)// 可阻止图片上传return {prevent: false,msg: '需要提示给用户的错误信息'}},// 图片上传并返回了结果，图片插入已成功success: function(xhr) {console.log('success', xhr)},// 图片上传并返回了结果，但图片插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传图片出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传图片超时timeout: function(xhr) {console.log('timeout')},// 图片上传并返回了结果，想要自己把图片插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可insertImgFn(server_url+result.data.url)}}// 自定义检查插入的链接editor.config.linkCheck = function(text, link) {// 以下情况，请三选一// 1. 返回 true ，说明检查通过return true// // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）// return '链接有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。// 此处，你可以自定义提示错误信息，自由发挥}// 自定义检查插入图片的链接// 参数中的imgSrc、alt、href分别代表图片地址、图片文本说明和跳转链接// 后面两个参数是可选参数editor.config.linkImgCheck = function(imgSrc,alt,href) {// 以下情况，请三选一// 1. 返回 true ，说明检查通过return true// // 2. 返回一个字符串，说明检查未通过，编辑器会阻止图片插入。会 alert 出错误信息（即返回的字符串）// return '图片 src 有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止图片插入。// 此处，你可以自定义提示错误信息，自由发挥}// 自定义检查插入视频的链接editor.config.onlineVideoCheck = function(video) {// 编辑器会根据返回的内容做校验：比如以下几种情况// 1. 返回 true ，说明检查通过return true// 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）// return '插入的视频 有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。// 此处，你可以自定义提示错误信息，自由发挥}// 配置 server 接口地址editor.config.uploadVideoServer = uplaodurleditor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024meditor.config.uploadVideoAccept = ['mp4']editor.config.uploadVideoParams = {token: 'xxxxx',x: 100}editor.config.uploadVideoName = 'file'editor.config.uploadVideoTimeout = 1000 * 60 * 5editor.config.uploadVideoHooks = {// 上传视频之前before: function(xhr) {console.log(xhr)// 可阻止视频上传return {prevent: false,msg: '需要提示给用户的错误信息'}},// 视频上传并返回了结果，视频插入已成功success: function(xhr) {console.log('success', xhr)},// 视频上传并返回了结果，但视频插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传视频出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传视频超时timeout: function(xhr) {console.log('timeout')},// 视频上传并返回了结果，想要自己把视频插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsertcustomInsert: function(insertVideoFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可insertVideoFn(server_url+result.data.url)}}editor.create()</script>
