安装

npm i vue-ueditor-wrap
#或者
yarn add vue-ueditor-wrap

下载Ueditor

下载Ueditor完整版，下载Ueditor
将下载后的Ueditor重命名为 ueditor，并放在public/static 目录中
如下图

引入并注册组件

在vue项目的main.js中引入安装的vue-ueditor-wrap组件

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

创建自己的Ueditor组建

在components目录中创建 myUeditor.vue文件，内容如下：

<template><div><vue-ueditor-wrap v-model="contents"  :config="myConfig"  style="width: 90%;"></vue-ueditor-wrap></div>
</template><script>
export default {name: 'myUeditor',props: {content: ''},data () {return {contents: this.contents,myConfig: {autoHeightEnabled: false, // 编辑器不自动被内容撑高initialFrameHeight: 240, // 初始容器高度initialFrameWidth: '100%', // 初始容器宽度UEDITOR_HOME_URL: '/static/ueditor/',// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）serverUrl: `/ueditorUploads`}}}
}
</script><style scoped></style>

使用

在需要用到编辑器的vue文件中引入我们创建的myUeditor

<ueditor ref="ue" :content="artInfo.article_info"></ueditor>

在script标签中引入，并注册

import ueditor from '@/components/myUeditor'
components: { ueditor },

这样就可以完美使用了。如下图：

• 获取编辑器中的数据

this.$refs.ue.contents

• 显示后台返回的数据到编辑器

this.$refs.ue.contents = this.contens

• 注意事项：
  1.ueditor文件夹中的配置不用做任何更改，只需要保证上面配置的serverUrl带上参数?action=config能否返回json格式的配置信息。
  如：ueditor/php/controller.php?action=config
  2.常见问题 :
• 
  出现上面的提示，请检查配置的上传地址serverUrl能否正常访问。
• 
  出现这个问题，也是因为配置的问题，但是原始的配置文件是不需要做更改的。所以，请检查 ueditor/php/config.json这个文件是否能正常访问。具体代码在ueditor/php/controller.php这个文件的第8行

$CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);

确保file_get_contents方法能获取到config.json的数据。

• 如果服务器地址是https访问的，请在该语句前加入如下代码：

 $stream_opts = ["ssl" => ["verify_peer"=>false,"verify_peer_name"=>false,]];

以表示忽略检查证书，这样就能访问了。