vue集成ueditor

相關代碼見github

1.引入ueditor相關的文件,具體目錄見下圖如下

      我將下載的文件放在static下面，這里專門用來放置相關的靜態文件

（在ueditor.config.js需要配置一下路徑 var URL = window.UEDITOR_HOME_URL || '/static/ueditor_1/'）根據自己的文件路徑各自處理

2.新建一個Ueditor.vue組件對象,該組件用來封裝ueditor,用來進行復用.

<template>
  <div>
    <!--下面通過傳遞進來的id完成初始化-->
    <script :id="randomId"  type="text/plain"></script>
  </div>
</template>

<script>

  //需要修改  ueditor.config.js 的路徑
  //var URL = window.UEDITOR_HOME_URL || '/static/ueditor_1/';

  //主體文件引入
  import '../../static/ueditor_1/ueditor.config.js'
  import '../../static/ueditor_1/ueditor.all.min.js'
  import '../../static/ueditor_1/lang/zh-cn/zh-cn.js'
  //主體文件引入


  export default {
    props: {
      //配置可以傳遞進來
      ueditorConfig:{}
    },
    data () {
      return {
        //每個編輯器生成不同的id,以防止沖突
        randomId: 'editor_' + (Math.random() * 100000000000000000),
        //編輯器實例
        instance: null,
      };
    },
    //此時--el掛載到實例上去了,可以初始化對應的編輯器了
    mounted () {
      this.initEditor()
    },

    beforeDestroy () {
      // 組件銷毀的時候，要銷毀 UEditor 實例
      if (this.instance !== null && this.instance.destroy) {
        this.instance.destroy();
      }
    },
    methods: {
      initEditor () {
        //dom元素已經掛載上去了
          this.$nextTick(() => {
            this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
            // 綁定事件，當 UEditor 初始化完成后，將編輯器實例通過自定義的 ready 事件交出去
            this.instance.addListener('ready', () => {
              this.$emit('ready', this.instance);
            });
          });
        }
    }
  };
</script>

 

3.Ueditor的使用,通過對組件的監聽可以實現回調,把ueditor傳回父組件.

<template>
  <div id="app">
    vue_ueditor
    <div>
      //此時監聽子組件的事件,編輯器實例回調
      <Ueditor @ready="editorReady" style="width: 500px;height: 440px;"></Ueditor>
    </div>

  </div>
</template>

<script>
  import Ueditor from './components/Ueditor'

  export default {
    data(){
      return{
        content:''
      }
    },
    name: 'app',
    components: {
      Ueditor
    },
    methods: {
      editorReady (instance) {
        instance.setContent('');

        instance.addListener('contentChange', () => {
          this.content = instance.getContent();
        });
      },
    },
  }
</script>

 

4.此時封裝基本完成,但是上傳圖片功能還沒實現,接下來實現圖片上傳功能.

// 服務器統一請求接口路徑
//在ueditor.config.js里面進行配置,本項目使用的是php后台，后台按照文檔配置好，直接通過鏈接過去即可
//測試發現在本地上傳比較慢
//項目打包上傳服務器之后，速度回復正常
    serverUrl: 'http://xxx.com/Public/Home/ueditor/php/controller.php',

 

 

5.溫馨提示 通過設置index.js進行跨域調試(改完需要重新run dev)

  dev: {
    env: require('./dev.env'),
    port: 8085,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
//跨域測試接口
    proxyTable: {
      '/baseUrl': {
        target: 'http://xxx.com/index.php',
        changeOrigin: true,
        pathRewrite: {
          '^/baseUrl': ''
        }
      },
//跨域測試圖片上傳
       '/baseImgUrl': {
         target: 'http://xxx.com',
         changeOrigin: true,
         pathRewrite: {
           '^/baseImgUrl': ''
         }
       }
    },