本篇文章主要介紹了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 '../../../assets/js/ueditor/ueditor.config';
import '../../../assets/js/ueditor/ueditor.all';
import '../../../assets/js/ueditor/lang/zh-cn/zh-cn';
import { generateRandonInteger } from '../../../vuex/utils';
export default {
data() {
return {
id: generateRandonInteger(100000) + 'ueditorId',
};
},
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('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
}.bind(this));
this.$emit('ready', 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 './ueditor.vue';
export default {
components: {
ueditor,
},
data() {
return {
defaultMsg: '初始文本',
config: {
initialFrameWidth: null,
initialFrameHeight: 320,
},
};
},
};
</script>登入後複製
如果需要讓Ueditor上傳圖片的話，還需要在背景設定一個介面。這部分還沒時間研究，等過幾天補上
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
vue的專案最佳化之透過keep-alive資料快取的方法
Vue元件選項props的使用介紹
Vue.js通用應用框架-Nuxt.js的解析
以上是Vue.js結合Ueditor富文本編輯器的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
