vue中使用富文本编辑器wangEditor方法详解

富文本的应用范围及场景这里就不多做描述,本文简要介绍如何使用使用wangEditor富文本编辑器。

最终效果截图:


1、在项目中安装wangEditor

  1. npm install wangeditor --save

2、创建wangEditor组件,以便多次重复调用!

  1. <template lang="html">
  2. <div class="editor">
  3. <div ref="toolbar" class="toolbar">
  4. </div>
  5. <div ref="editor" class="text">
  6. </div>
  7. </div>
  8. </template>
  9.  
  10. <script>
  11. import E from 'wangeditor'
  12. export default {
  13. name: 'editoritem',
  14. data() {
  15. return {
  16. // uploadPath,
  17. editor: null,
  18. info_: null
  19. }
  20. },
  21. model: {
  22. prop: 'value',
  23. event: 'change'
  24. },
  25. props: {
  26. value: {
  27. type: String,
  28. default: ''
  29. },
  30. isClear: {
  31. type: Boolean,
  32. default: false
  33. }
  34. },
  35. watch: {
  36. isClear(val) {
  37. // 触发清除文本域内容
  38. if (val) {
  39. this.editor.txt.clear()
  40. this.info_ = null
  41. }
  42. },
  43. value: function(value) {
  44. if (value !== this.editor.txt.html()) {
  45. this.editor.txt.html(this.value)
  46. }
  47. }
  48. //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
  49. },
  50. mounted() {
  51. this.seteditor()
  52. this.editor.txt.html(this.value)
  53. },
  54. methods: {
  55. seteditor() {
  56. // http://192.168.2.125:8080/admin/storage/create
  57. this.editor = new E(this.$refs.toolbar, this.$refs.editor)
  58. this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
  59. // this.editor.customConfig.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址
  60. // this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
  61. // this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
  62. // this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
  63. // this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
  64. // this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
  65.  
  66. // 配置菜单
  67. this.editor.customConfig.menus = [
  68. 'head', // 标题
  69. 'bold', // 粗体
  70. 'fontSize', // 字号
  71. 'fontName', // 字体
  72. 'italic', // 斜体
  73. 'underline', // 下划线
  74. 'strikeThrough', // 删除线
  75. 'foreColor', // 文字颜色
  76. 'backColor', // 背景颜色
  77. 'link', // 插入链接
  78. 'list', // 列表
  79. 'justify', // 对齐方式
  80. 'quote', // 引用
  81. 'emoticon', // 表情
  82. 'image', // 插入图片
  83. 'table', // 表格
  84. 'video', // 插入视频
  85. 'code', // 插入代码
  86. 'undo', // 撤销
  87. 'redo', // 重复
  88. 'fullscreen' // 全屏
  89. ]
  90. // this.editor.customConfig.uploadImgHooks = {
  91. // fail: (xhr, editor, result) => {
  92. // // 插入图片失败回调
  93. // },
  94. // success: (xhr, editor, result) => {
  95. // // 图片上传成功回调
  96. // },
  97. // timeout: (xhr, editor) => {
  98. // // 网络超时的回调
  99. // },
  100. // error: (xhr, editor) => {
  101. // // 图片上传错误的回调
  102. // },
  103. // customInsert: (insertImg, result, editor) => {
  104. // // 图片上传成功,插入图片的回调
  105. // //result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...]
  106. // // console.log(result.data[0].url)
  107. // //insertImg()为插入图片的函数
  108. // //循环插入图片
  109. // // for (let i = 0; i < 1; i++) {
  110. // // console.log(result)
  111. // let url = "http://otp.cdinfotech.top"+result.url
  112. // insertImg(url)
  113. // // }
  114. // }
  115. // }
  116. this.editor.customConfig.onchange = (html) => {
  117. this.info_ = html // 绑定当前逐渐地值
  118. this.$emit('change', this.info_) // 将内容同步到父组件中
  119. }
  120. // 创建富文本编辑器
  121. this.editor.create()
  122. }
  123. }
  124. }
  125. </script>
  126.  
  127. <style lang="css">
  128. .editor {
  129. width: 100%;
  130. margin: 0 auto;
  131. position: relative;
  132. z-index: 0;
  133. }
  134. .toolbar {
  135. border: 1px solid #ccc;
  136. }
  137. .text {
  138. border: 1px solid #ccc;
  139. min-height: 500px;
  140. }
  141. </style>

3、使用页面对组件进行调用!

  1. <template>
  2. <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
  3. </template>
  4.  
  5. <script>
  6. import EditorBar from '../components/wangEnduit.vue'
  7. export default {
  8. name: 'HelloWorld',
  9. components: { EditorBar },
  10. data () {
  11. return {
  12. msg: 'Welcome to Your Vue.js App'
  13. }
  14. },
  15. methods: {
  16. change(val) {
  17. console.log(val)
  18. },
  19. }
  20. }
  21. </script>
  22.  
  23. <style>
  24. </style>

4、这里以简单的反馈数据截图效果!


5、关于图片上传,该案例中使用的是base64数据格式。如果你需要使用图片上传路径,需要将注释部分打开,替换成你自己的上传路径。及关闭base64数据格式

  1. this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片

以上便是关于wangeditor的基础使用,更多参数可以查看官网设置。

铁子们,抗不住了。点点广告可好,感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!