在前端開發(fā)的項(xiàng)目中。難免會(huì)遇到需要在頁面上集成一個(gè)富文本編輯器。
前一段時(shí)間公司Vue.js項(xiàng)目需要使用UEditor富文本編輯器，在百度上搜索一圈沒有發(fā)現(xiàn)詳細(xì)的說明，決定自己嘗試，忙活了一天終于搞定了。
1. 總體思路
1.1 模塊化
vue的很大的一個(gè)優(yōu)勢在于模塊化，我們可以通過模塊化實(shí)現(xiàn)頁面和邏輯的復(fù)用。所以可以把Ueditor重新封裝成一個(gè).vue的模板文件。其他組件通過引入這個(gè)模板實(shí)現(xiàn)代碼復(fù)用。
1.2 數(shù)據(jù)傳輸
首先父組件需要設(shè)置編輯器的長度、寬度、初始文本，這些數(shù)據(jù)可以通過props來傳遞。編輯器中的文本變化可以通過vue自定義事件向父組件傳遞。
2. 具體實(shí)現(xiàn)步驟
2.1 引入關(guān)鍵的JS以及CSS文件
將以下文件全部拷貝到項(xiàng)目中
2.2 配置Ueditor.config.js
首先配置URL參數(shù)，我們需要將這個(gè)路徑指向剛才拷貝的文件的更目錄，注意這里最好使用相對路勁。
var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';
然后是默認(rèn)寬度高度的設(shè)置
,initialFrameWidth:null // null表示寬度自動(dòng),initialFrameHeight:320
其他功能的配置可以在官方文檔查看
2.3 創(chuàng)建編輯器模板
我們需要在編輯器模板中import Ueditor核心JS庫，并添加contentChange回調(diào)函數(shù)就大功告成了。
之所以使用import語法來引入核心JS庫是因?yàn)檫@樣更符合ES6模塊化的規(guī)范，我看到網(wǎng)上有人建議在main.js中引入JS，但是過早地引入JS可能導(dǎo)致頁面首次加載緩慢。
<template> <div ref="editor"></div></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 已經(jīng)插入文檔 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. 編輯器的使用
使用編輯器模板的時(shí)候我需要通過props傳入config以及初始文本value。
<template xmlns:v-on="http://www.w3.org/1999/xhtml"> <div class="edit-area"> <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor> </div></template><script> import ueditor from './ueditor.vue'; export default { components: { ueditor, }, data() { return { defaultMsg: '初始文本', config: { initialFrameWidth: null, initialFrameHeight: 320, }, }; }, };</script>如果需要讓Ueditor上傳圖片的話，還需要在后臺配置一個(gè)接口。這部分還沒有時(shí)間研究，等過幾天補(bǔ)上
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
