Xyue-editor NPM

xyue-editor - 富文本编辑器

安装

npm i xyue-editor

编辑器使用

一般在后台使用

<editor v-model="content"
        :onChooseImg="uploadImg"
        :onChooseVideo="uploadVideo"
        :onChooseVideoPoster="uploadImg"
></editor>

import { editor } from 'xyue-editor'
export default {
  components: { editor },
  data () {
    return {
      content: ''
    }
  },
  methods: {
    uploadImg (files) {
      const upload = f => new Promise((resolve, reject) => {
        let form = new window.FormData()
        form.append('collection', 'javaweb')
        form.append('file', f)
        this.$api.common.uploadImg(form).then(res => {
          if (res.code === 0) {
            resolve(res.data.filePath)
          } else {
            this.$message.error(res.userMsg)
            reject(new Error(res.userMsg))
          }
        }, e => {
          this.$message.error(e)
          reject(e)
        })
      })
      return new Promise(async (resolve, reject) => {
        this.$indicator.open()
        try {
          const data = []
          for (let i = 0; i < files.length; i++) {
            data.push(await upload(files[i]))
          }
          resolve(data.join('|'))
        } catch (e) {
          reject(e)
        }
        this.$indicator.close()
      })
    },
    uploadVideo (files) {
      let p = Array.from(files).map(f => {
        return new Promise((resolve, reject) => {
          let form = new window.FormData()
          form.append('collection', 'javaweb')
          form.append('file', f)
          this.$api.common.uploadImg(form).then(res => {
            if (res.code === 0) {
              resolve(res.data.filePath)
            } else {
              this.$message.error(res.userMsg)
              reject(new Error(res.userMsg))
            }
          }, e => {
            this.$message.error(e)
            reject(e)
          })
        })
      })
      return new Promise((resolve, reject) => {
        this.$indicator.open()
        Promise.all(p).then(res => {
          resolve(res.join('|'))
        }).finally(() => {
          this.$indicator.close()
        })
      })
    }
  }
}

渲染器使用

前台使用

<viewer :content="content"></viewer>

import { viewer } from 'xyue-editor'

export default {
  components: { viewer },
  data () {
    return {
      content: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 可以在这里操作html
    })
  },
  methods: {
  }
}