vue集成百度UEditor富文本编辑器使用教程

Vue集成百度UEditor富文本编辑器使用教程

在Vue项目中，我们通常需要使用富文本编辑器来帮助用户进行文本输入。本文将详细介绍如何在Vue中集成百度UEditor富文本编辑器，并且提供两个示例说明来帮助读者更好地理解。

第一步：安装百度UEditor

我们可以通过npm命令来安装百度UEditor。在终端中进入Vue项目的根目录，执行以下命令即可：

npm install vue-ueditor-wrap --save

第二步：引入UEditor编辑器

在Vue项目中，我们需要在需要使用编辑器的组件中引入UEditor编辑器。为了方便，我们可以将引入的步骤封装成一个Vue组件，以便多处使用。

在src/components目录下新建一个Ueditor.vue文件，代码如下：

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('Ueditor', {
  template: '<div><div ref="editor"></div></div>',
  data () {
    return {
      editor: null
    }
  },
  props: {
    value: {
      type: [String],
      default: ''
    },
    config: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    value (val) {
      if (this.editor) {
        this.editor.setContent(val)
      }
    }
  },
  mounted () {
    const _self = this
    const id = this.$refs.editor
    const config = this.config
    import('vue-ueditor-wrap').then(UE => {
      this.editor = UE.getEditor(id, config)
      this.editor.on('ready', () => {
        _self.editor.setContent(_self.value)
      })
      this.editor.on('contentChange', () => {
        this.$emit('input', this.editor.getContent())
      })
    })
  },
  destroyed () {
    this.editor.destroy()
  }
})

export default Vue
</script>

这个组件中使用了vue-ueditor-wrap这个npm包，可以方便地与UEditor进行通信。同时，这个组件也可以接收名为config的props，这个props用于传递UEditor的配置项。由于Ueditor.vue内部会使用import动态加载UEditor代码，因此这个组件是异步组件。

第三步：在需要使用编辑器的页面引入Ueditor.vue

在需要使用编辑器的页面中，我们需要引入刚刚封装好的Ueditor.vue组件，并且通过props传递UEditor的配置项。例如，在src/views目录下新建一个Edit.vue文件，其中的代码如下：

<template>
  <div>
    <ueditor v-model="content" :config="ueditorConfig"></ueditor>
  </div>
</template>

<script>
import Ueditor from '@/components/Ueditor'

export default {
  components: {
    Ueditor
  },
  data () {
    return {
      content: '',
      ueditorConfig: {
        UEDITOR_HOME_URL: '//ufida-wi.oss-cn-beijing.aliyuncs.com/ueditor/',
        serverUrl: '/api/upload',
        toolbars: [[
          'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'strikethrough', '|',
          'blockquote', 'code', 'insertunorderedlist', 'insertorderedlist', '|',
          'link', 'unlink', '|',
          'simpleupload', 'insertimage', 'attachment', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', '|',
          'cleardoc', '|',
          'paragraph', 'fontfamily', 'fontsize', '|',
          'forecolor', 'backcolor'
        ]]
      }
    }
  }
}
</script>

在这个示例中，我们通过v-model指令实现了双向绑定。这样，当用户在编辑器中输入内容时，组件内部的content数据就会更新。同样地，如果我们通过代码修改了content数据，那么编辑器中的内容也会更新。同时，我们还通过props传递了UEditor的配置项，例如UEDITOR_HOME_URL、serverUrl和toolbars等。

示例一：文件上传

我们可以通过配置UEditor的serverUrl选项来让用户上传文件。例如，在Ueditor.vue的config中我们设置了：

{
  serverUrl: '/api/upload'
}

这就告诉UEditor，当用户要上传文件时，应该将文件传递到/api/upload这个接口。我们需要在后端实现这个接口。例如，在Vue项目的根目录下新增一个server.js文件，其中的代码如下：

const express = require('express')
const multer = require('multer')

const app = express()

// 设置跨域
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

app.post('/api/upload', multer().single('file'), (req, res) => {
  console.log('上传文件')
  res.send({
    url: 'http://localhost:3000/images/' + req.file.originalname
  })
})

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

在这个服务器中，我们采用了multer来处理文件上传请求。后端接口中，我们通过res.send将上传文件的URL返回给了前端。当UEditor接收到上传成功的响应时，它就会将上传的文件显示在编辑器中。

示例二：自定义按钮

通过UEditor提供的自定义按钮，我们可以在编辑器界面上添加自己的按钮，用来实现更加复杂的功能。例如，我们可以在"添加图片"功能旁边添加一个"添加视频"的按钮。要实现这个功能，我们需要在UEditor配置项的toolbars数组中添加一个新的数组项。例如，在config中我们设置了：

{
  toolbars: [[
    'undo', 'redo', '|',
    'bold', 'italic', 'underline', 'strikethrough', '|',
    'blockquote', 'code', 'insertunorderedlist', 'insertorderedlist', '|',
    'link', 'unlink', '|',
    'simpleupload', 'insertimage', 'attachment', '|',
    'inserttable', 'deletetable', 'insertparagraphbeforetable', '|',
    'cleardoc', '|',
    'paragraph', 'fontfamily', 'fontsize', '|',
    'forecolor', 'backcolor', '|',
    {
      label: '添加视频',
      className: 'edui-for-img',
      icon: 'img',
      onclick: function () {
        alert('添加视频')
      }
    }
  ]]
}

在这个示例中，我们添加了一个对象，其中包含了label、className、icon和onclick四个属性。通过设置这些属性，我们就可以在UEditor的工具栏上添加一个新的按钮。同时，我们也为按钮设置了点击事件，当用户点击了这个按钮时，就会弹出"添加视频"的提示。