Vue集成Ueditor

本文轉載自查看原文 2020-11-23 16:39 926 vue/ 輔助工具

轉載：https://juejin.cn/post/6844903781709119495

vue-ueditor-wrap地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

vue-ueditor-wrapdemo地址：http://ueditor.gitrr.com/#/

前言

使用vue-cli3.0+element-ui+webpack做項目時,遇到了一個需求:文章管理中添加富文本編輯器(暫未添加上傳圖片功能),在百度上查看到好幾個富文本編輯器,最終選擇了百度的Ueditor,基本能滿足所有需求。經過多番采坑之后，已實現相關功能,特此做一個記錄。

安裝流程：

第一步，先下載依賴

npm i vue-ueditor-wrap -S

第二步，引入到項目中

import VueUeditorWrap from 'vue-ueditor-wrap'

第三步，注冊組件

components: {
    VueUeditorWrap
}

第四步，在模板中使用組件

<template> <div> <VueUeditorWrap/> </div> </template>

這個時候我們已經可以在頁面中看到編輯器的樣子了

WX20190603-234937@2x.png

但是我們往往需要更多的功能，比如圖片上傳，因此我們需要一些其他東西來支持我們的工作，這里通過點贊后盜用大神的一份文件（n(≧≦)n）https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads，我在本項目中所使用的是utf8-php.zip，解壓后放在static下並命名為UEditor

WX20190603-234802@2x.png

下載不同的版本：https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads

接下來，請看全部代碼

<template>
  <div class="">
        <!-- <VueUeditorWrap 
        v-model="message" 
        :config="editorConfig" 
        @ready="ready"
        /> -->
        <vue-ueditor-wrap :config="editorConfig" ></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
// import evtHub from '@/common/eventHub.js'
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  props: ["content"],
  data() {
    return {
      evtHub: '',
      message: '',
      // 簡單配置
      editorConfig: {
        // 編輯器不自動被內容撐高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器寬度
        initialFrameWidth: '100%',
        // 上傳文件接口, 報錯屬於正常，若需要驗證可使用(也是盜大神的)http://35.201.165.105:8000/controller.php
        // 調試完畢打包上線則切換回/static/UEditor/php/controller.php即可，不用做其他處理
        serverUrl: '',
        UEDITOR_HOME_URL:'/UE/'
        // serverUrl: '/static/UEditor/php/controller.php',
      }
    };
  },
  mounted() {
    // 這里是從列表頁編輯時做的內容注入，沒有需要可以不寫
    this.message = this.content;
  },
  methods: {
    ready(editorInstance) {
    // 這里可以拿到ueditor的實例，比如editorInstance.getContent()就可以拿到編輯器的html內容
    //   this.evtHub.$emit('editor.data', editorInstance);
    }
  }
};
</script>

<style scoped>
</style>