vue项目集成百度ueditor富文本编辑器

以1.4.3.3 PHP版本为例

第一步：下载编辑器
官网下载地址：https://ueditor.baidu.com/website/download.html
1.4.3.3 PHP版本下载点这里

下载的文件目录如下：

 utf8-php                          
    ├──dialogs
    ├──lang
    ├──php                      
    ├──themes
    ├──third-party
    ├──index.html
    ├──ueditor.all.js   
    ├──ueditor.all.min.js
    ├──ueditor.config.js
    ├──ueditor.parse.js
    └──ueditor.parse.min.js

找到 ueditor.config.js 文件，修改配置(编辑器默认配置都可在这里修改，里面有详细注释)。

(function () {
    window.UEDITOR_HOME_URL = "/static/ueditor/";   //修改地方1：设置文件路径
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    window.UEDITOR_CONFIG = {
        UEDITOR_HOME_URL: URL ,
        // 服务器统一请求接口路径
        serverUrl: '',                             //修改地方2：文件上传API接口
    //......
})();

第二步：在 vue 项目的 static 文件夹中创建 ueditor 文件夹，放入下载的编辑器文件(如下)。

└── static                           
      └── ueditor                       //ueditor文件夹 
          ├──dialogs
          ├──lang
          ├──themes
          ├──third-party
          ├──ueditor.all.min.js
          ├──ueditor.config.js
          └──ueditor.parse.min.js

第三步：打开 vue 项目的 src/main.js 文件，导入以下文件。

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js' 
import '../static/ueditor/lang/zh-cn/zh-cn.js' 
import '../static/ueditor/ueditor.parse.min.js' 
import '../static/ueditor/themes/default/css/ueditor.css'

第四步：在 src/components/ueditor 目录下创建 index.vue 文件，作为编辑器组件文件。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ueditor',
    data () {
      return {
        editor: null
      }
    },
    props: ['value','config'],
    mounted () {
      const _this = this
      this.editor = window.UE.getEditor('editor', this.config)   // 初始化UE
      this.editor.addListener('ready', function () {               
        _this.editor.setContent(_this.value)                     // 载完成后，放入内容      
      })
    },
    methods: {
      getUEContent () {                                          // 获取编辑器内容方法
        return this.editor.getContent()
      },
      destroyed () {                                               // 销毁编辑器
        this.editor.destroy()
      }
    }
  }
</script>

第五步：使用编辑器，在 src/components/ 目录下创建 test.vue 文件。

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ued"/>  <!-- 编辑器 -->
    <input type="button" value="获取编辑器内容" @click="getContent">  
  </div>
</template>
<script>
  import Uediter from '@/components/ueditor/'
  export default {
    components: {Uediter},
    data () {
      return {
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高 
            initialFrameWidth: null,
            initialFrameHeight: 350
          }   
        }
      }
    },
    methods: {
      getContent () {
        console.log(this.$refs.ued.getUEContent())
      }
    }
  }
</script>

最后编辑于：2019.02.26 18:19:51