vue2中使用Ueditor编辑器方法

安装

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,
            ]
        ];

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