Vue.js結合Ueditor富文本編輯器的使用方法

本篇文章主要介紹了Vue.js結合Ueditor的專案實例程式碼，這裡整理了詳細的程式碼，具有一定的參考價值，有興趣的可以了解一下

在前端開發的專案中。難免會遇到需要在頁面上整合一個富文本編輯器。
前一段時間公司Vue.js專案需要使用UEditor富文本編輯器，在百度上搜尋一圈沒有發現詳細的說明，決定自己嘗試，忙活了一天終於搞定了。

1. 整體想法

#1.1 模組化

vue的很大的一個優勢在於模組化，我們可以透過模組化實現頁面和邏輯的複用。所以可以把Ueditor重新封裝成一個.vue的模板檔。其他元件透過引入這個模板實現程式碼重複使用。

1.2 資料傳輸

首先父元件需要設定編輯器的長度、寬度、初始文本，這些資料可以透過props來傳遞。編輯器中的文字變更可以透過vue自訂事件向父元件傳遞。

2. 具體實作步驟

#2.1 引入關鍵的JS以及CSS檔案

將以下檔案全部拷貝到專案中

2.2 設定Ueditor.config.js

先設定URL參數，我們需要將這個路徑指向剛才拷貝的檔案的更目錄，注意這裡最好使用相對路勁。

var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';

然後是預設寬度高度的設定

#

,initialFrameWidth:null // null表示宽度自动
,initialFrameHeight:320

其他功能的設定可以在官方文件查看

2.3 建立編輯器範本

我們需要在編輯器範本中import Ueditor核心JS函式庫，並加入contentChange回呼函數就大功告成了。

之所以使用import語法來引入核心JS庫是因為這樣更符合ES6模組化的規範，我看到網上有人建議在main.js中引入JS，但是過早地引入JS可能導致頁面首次加載緩慢。

<template>
 <p ref="editor"></p>
</template>

<script>
 /* eslint-disable */
 import &#39;../../../assets/js/ueditor/ueditor.config&#39;;
 import &#39;../../../assets/js/ueditor/ueditor.all&#39;;
 import &#39;../../../assets/js/ueditor/lang/zh-cn/zh-cn&#39;;

 import { generateRandonInteger } from &#39;../../../vuex/utils&#39;;

 export default {
 data() {
  return {
  id: generateRandonInteger(100000) + &#39;ueditorId&#39;,
  };
 },
 props: {
  value: {
  type: String,
  default: null,
  },
  config: {
  type: Object,
  default: {},
  }
 },
 watch: {
  value: function value(val, oldVal) {
  this.editor = UE.getEditor(this.id, this.config);
  if (val !== null) {
   this.editor.setContent(val);
  }
  },
 },
 mounted() {
  this.$nextTick(function f1() {
  // 保证 this.$el 已经插入文档

  this.$refs.editor.id = this.id;
  this.editor = UE.getEditor(this.id, this.config);

  this.editor.ready(function f2() {
   this.editor.setContent(this.value);

   this.editor.addListener("contentChange", function () {
   const wordCount = this.editor.getContentLength(true);
   const content = this.editor.getContent();
   const plainTxt = this.editor.getPlainTxt();
   this.$emit(&#39;input&#39;, { wordCount: wordCount, content: content, plainTxt: plainTxt });
   }.bind(this));

   this.$emit(&#39;ready&#39;, this.editor);
  }.bind(this));
  });
 },
 };
</script>

<style>
 body{
  background-color:#ff0000;
 }
</style>

#3. 編輯器的使用

使用編輯器模板的時候我需要透過props傳入config以及初始文字value。

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
 <p class="edit-area">
  <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor>
 </p>

</template>

<script>
 import ueditor from &#39;./ueditor.vue&#39;;

 export default {
 components: {
  ueditor,
 },
 data() {
  return {
  defaultMsg: &#39;初始文本&#39;, 
  config: {
   initialFrameWidth: null,
   initialFrameHeight: 320,
  },
  };
 },
 };
</script>

如果需要讓Ueditor上傳圖片的話，還需要在背景設定一個介面。這部分還沒時間研究，等過幾天補上

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

vue的專案最佳化之透過keep-alive資料快取的方法

Vue元件選項props的使用介紹

Vue.js通用應用框架-Nuxt.js的解析

以上是Vue.js結合Ueditor富文本編輯器的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！