vue使用ueditor前端配置

发表于 更新于 分类于 ， Changyan： 本文字数： 552 阅读时长 ≈ 2 分钟

在vue中使用ueditor，有网友已经帮我们封装好了vue-ueditor-wrap，配置简单，毕竟大厂出的插件，功能也是十分强大，但是在使用中也是有许多坑的，最最最大的问题你所避免不了的就是跨域了，下面细说！

安装依赖包

1
npm i vue-ueditor-wrap

下载ueditor

将下载好的ueditor解压至项目static目录

如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。

引入VueUeditorWrap组件

一般情况下编辑器只有添加修改页面会用到，所以这里我们没必要做成全局的，我们这里做成局部组件引入。

1
2
3
4
5
//在需要用到该组件时引入并注册该组件
import VueUeditorWrap from 'vue-ueditor-wrap';
components: {
        VueUeditorWrap,
      },

绑定数据并修改VueUeditorWrap配置

1
<vue-ueditor-wrap v-model="contents" :config="myConfig"></vue-ueditor-wrap>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data () {
  return {
    contents: '<h2>Vue + UEditor + v-model双向绑定</h2>',
    myConfig: {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 240,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
      UEDITOR_HOME_URL: '/UEditor/'
    }
  }
}

配置完成总结

按照以上配置，你的编辑器已经成功部署在你的页面中，但是有了新的问题，我们的上传文件接口是别人的，我们如果要上传到自己的服务器上，需要自己写这个服务器文件接口。

淡然如果刚好你的服务器网站是php、jsp、asp搭建的，恭喜你，百度正好给你提供了这些个demo，你可以直接使用，如果不是，比如我就想用python写服务端，下一篇跟着我来写一个ueditor服务端接口，django使用editor服务器端配置