Vue集成Ueidtor

准备工作

进入Ueditor官网ueditor.baidu.com/website/dow…下载对应的压缩包
解压以后删除掉不需要的目录如果是php则删除php目录如果是jsp则删除jsp目录
在vue项目的static目录下面新建ueditor目录将解压的文件拷贝进去
通过npm install vue-ueditor-wrap --save 命令安装ueditor的vue插件源码参见github.com/HaoChuan942…

使用步骤

引入vue-ueditor-wrap组件import VueUeditorWrap from 'vue-ueditor-wrap'
注册组件components: {VueUeditorWrap}
通过v-model绑定数据<vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap> </span>

示例代码

<template>
    <div class="ueditor">
      <vue-ueditor-wrap v-model="content" :config="ueditorConfig"></vue-ueditor-wrap>
      {{ content }}
    </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  
  export default {
    name: 'UeditorSample',
    components: {VueUeditorWrap},
    
    data () {
      return {
        ueditorConfig: {
          //如果需要上传功能取消serverUrl的注释，并配置后台提供的上传地址
          // serverUrl: '[upload-url]',
          
          // ueditor资源存放的路径,相对于打包后的index.html
          UEDITOR_HOME_URL: '/static/ueditor/',
          
          // 编辑器不被内容自动撑高
          autoHeightEnabled: false,
          
          // 工具栏是否可以浮动
          autoFloatEnabled: false,
          
          // 初始容器高度
          initialFrameHeight: 340,
          
          // 初始容器宽度
          initialFrameWidth: '100%',
          
          // 关闭自动保存
          enableAutoSave: true
        },
        
        content: ''
      }
    }
  }
</script>

<style scoped>

</style>

特别注意

UEDITOR_HOME_URL: '/ueditor/',这个配置很重要，一定得写对