wangeditor富文本编辑器集成配置

62 阅读 0 评论 41 点赞

我是靠谱客的博主落寞老鼠，最近开发中收集的这篇文章主要介绍wangeditor富文本编辑器集成配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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="https://cdn.jsdelivr.net/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 提示文字'
  // 设置编辑区域高度为 500px
  editor.config.height = 500
  // 菜单栏提示为上标（默认配置）
  editor.config.menuTooltipPosition = 'up'
  //来关闭样式过滤。
  editor.config.pasteFilterStyle = false 
  // 来忽略粘贴的图片
  editor.config.pasteIgnoreImg = true
  // 配置 server 接口地址
  editor.config.uploadImgServer = uplaodurl
  editor.config.uploadImgFileName = 'file'
    // 设置 headers（举例）
      editor.config.uploadHeaders = {
      		 'Accept' : 'text/x-json'
      };
  editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 2M
  editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
  editor.config.uploadImgMaxLength = 1
  editor.config.uploadImgParams = {
      token: 'xxxxx',
      x: 100
  }
  editor.config.uploadFileName = 'file'
  editor.config.uploadImgTimeout = 10 * 1000
  editor.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: [...] } 这种格式，可使用 customInsert
      customInsert: 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 = uplaodurl
  editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m
  editor.config.uploadVideoAccept = ['mp4']
  editor.config.uploadVideoParams = {
      token: 'xxxxx',
      x: 100
  }
  editor.config.uploadVideoName = 'file'
  editor.config.uploadVideoTimeout =  1000 * 60 * 5
  editor.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 : '.....'} } 这种格式，可使用 customInsert
      customInsert: function(insertVideoFn, result) {
          // result 即服务端返回的接口
          console.log('customInsert', result)
  
          // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
          insertVideoFn(server_url+result.data.url)
      }
  }
  editor.create()
</script>