https://www.yuque.com/braft-editor/be/lzwpnr
https://www.yuque.com/luowenshuai/modules/idffl2

https://www.worldlink.com.cn/osdir/braft-editor.html

wangeditor

配置服务端接口

wangeditor vue 页面显示内容

在vue中使用wangEditor富文本编辑器组件的形式

第一步：我使用的npm安装 npm install wangeditor —save
创建子组件，代码如下

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

父组件中引用：

  1. <template>
  2. <div>
  3. <editor-bar v-model="goods.detail" :isClear="isClear" @change="change"></editor-bar>
  4. </div>
  5. </template>
  7. import EditorBar from './editoritem'
  8. components: { EditorBar },
  9. data() {
  10.       return {
  11.         isClear: false,
  12.         }
  13.       },  
  14. methods: {
  15.   change(val) {
  16.       // console.log(val)
  17.       this.goods.detail = val
  18.     },
  19.  }