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>

巴特西

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

最新文章

热门文章