vue中使用 #wangeditor #富文本编辑器

vue 安装 npm i wangeditor --save

创建一个editoritem组件

components/editoritem.vue //目录以自己项目为主

<template lang="html">
  <div class="editor">
    <div ref="toolbarContainer" class="toolbar"  id="toolbar-container">
    </div>
    <div ref="textContainer" class="text" id="text-container">
    </div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  name: 'editoritem',
  data () {
    return {
      editor: null,
      info_: null
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isClear (val) {
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
  },
  mounted () {
    this.seteditor()
    this.editor.txt.html(this.value)
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    seteditor () {
      var vm = this<br>      //使用id和ref都可以
      //const editor = new E('#toolbar-container', '#text-container')
      const editor = new E(vm.$refs.toolbar, vm.$refs.editor)<br>
      var getTokenServer = vm.$store.getters.getTokenServer
      var getToken = vm.$store.getters.getToken<br>
      editor.config.uploadImgShowBase64 = false // base 64 存储图片
      editor.config.uploadImgServer = ''// 服务器端地址
      editor.config.uploadImgHeaders = {}// 自定义 header
      editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      editor.config.uploadImgMaxLength = 6 
      editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
       <br>      //你想要携带的其他参数
      editor.config.uploadImgParams = {
        token: getToken,
        tokenServer: getTokenServer,
      }
      editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          //result为上传图片成功的时候返回的数据，根据自己后台返回的数据格式来取值
          let url = "" + result.filename
          insertImg(url)
        }
      }
      editor.config.onchange = (html) => {
        this.info_ = html
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      // 创建富文本编辑器
      editor.create()
      this.editor = editor
    }
  }
}
</script>
<style lang="css">
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  min-height: 500px;
}
</style>

父组件中引用:　

<template>
<div>
<editor-bar v-model="data"
:isClear="isClear"
@change="change"></editor-bar>
</div>
</template>
<script>
import EditorBar from '../../components/editorItem/editorItem'
export default {
components: {
EditorBar
},
data () {
return {
data: ""
}
},
  methods: {
    change (val) {
      console.log(val)
    },
  }
}
</script>
<style>
</style>

需要其他配置参见官方文档 http://www.wangeditor.com/ 

最后

以上就是俊逸大门最近收集整理的关于vue中使用 #wangeditor #富文本编辑器的全部内容，更多相关vue中使用内容请搜索靠谱客的其他文章。