vue项目中使用百度富文本编辑器ueditor

第一步，安装依赖，并且把ueditor整个文件夹放入public里边

 

 

 第二步，在你需要编辑的地方引入，或者main.js中全局引入

XX.vue文件中写入下面代码，创建编辑器。

<vue-ueditor-wrap v-model="form.content" :config="myConfig" @ready='ueditor'></vue-ueditor-wrap>

　第三步，在script中引入

import VueUeditorWrap from 'vue-ueditor-wrap'

第四步，在export default {}中加入

omponents: { VueUeditorWrap },

然后在data(){}中添加工具栏等配置文件

第五步，在methods:{}中配置请求参数，以携带token啥的

    ueditor (ueditor) {
      ueditor.execCommand('serverparam', ueditor => {
        return {
          userToken: window.sessionStorage.getItem('userToken'),
          Rtoken: window.sessionStorage.getItem('Rtoken')
        }
      })

完整配置

<template>
  <vue-ueditor-wrap v-model="form.content" :config="myConfig" @ready='ueditor'></vue-ueditor-wrap>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'ueditor',
  omponents: { VueUeditorWrap },
  data () {
    return {
      myConfig: {
        serverUrl: '',
        UEDITOR_HOME_URL: '/editor/',
        autoHeightEnabled: true,
        autoFloatEnabled: false,
        initialFrameHeight: 540,
        initialFrameWidth: '100%',
        maximumWords: 2000,
        enableAutoSave: true,
        toolbars: [[
          'fontfamily', // 字体
          'fontsize',
          'bold', // 加粗
          'indent', // 首行缩进
          'justifyleft', // 居左对齐
          'justifyright', // 居右对齐
          'justifycenter', // 居中对齐
          'forecolor',
          'link',
          'insertorderedlist',
          'insertunorderedlist',
          'insertcode',
          'spechars', // 特殊字符
          'pagebreak', // 分页
          'attachment', // 附件
          'imagecenter', // 居中
          'wordimage', // 图片转存
          'time',
          'date'

        ]]
      }
    }
  },
  methods: {
    ueditor (ueditor) {
      ueditor.execCommand('serverparam', ueditor => {
        return {
          userToken: window.sessionStorage.getItem('userToken'),
          Rtoken: window.sessionStorage.getItem('Rtoken')
        }
      })
    }
  }
}
</script>