快捷導(dǎo)航

Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼

更新時(shí)間：2017年07月11日 14:35:29 作者：David糖

本篇文章主要介紹了Vue.js結(jié)合Ueditor的項(xiàng)目實(shí)例代碼，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

在前端開(kāi)發(fā)的項(xiàng)目中。難免會(huì)遇到需要在頁(yè)面上集成一個(gè)富文本編輯器。
前一段時(shí)間公司Vue.js項(xiàng)目需要使用UEditor富文本編輯器，在百度上搜索一圈沒(méi)有發(fā)現(xiàn)詳細(xì)的說(shuō)明，決定自己嘗試，忙活了一天終于搞定了。

1. 總體思路

1.1 模塊化

vue的很大的一個(gè)優(yōu)勢(shì)在于模塊化，我們可以通過(guò)模塊化實(shí)現(xiàn)頁(yè)面和邏輯的復(fù)用。所以可以把Ueditor重新封裝成一個(gè).vue的模板文件。其他組件通過(guò)引入這個(gè)模板實(shí)現(xiàn)代碼復(fù)用。

1.2 數(shù)據(jù)傳輸

首先父組件需要設(shè)置編輯器的長(zhǎng)度、寬度、初始文本，這些數(shù)據(jù)可以通過(guò)props來(lái)傳遞。編輯器中的文本變化可以通過(guò)vue自定義事件向父組件傳遞。

2. 具體實(shí)現(xiàn)步驟

2.1 引入關(guān)鍵的JS以及CSS文件

將以下文件全部拷貝到項(xiàng)目中

2.2 配置Ueditor.config.js

首先配置URL參數(shù)，我們需要將這個(gè)路徑指向剛才拷貝的文件的更目錄，注意這里最好使用相對(duì)路勁。

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庫(kù)，并添加contentChange回調(diào)函數(shù)就大功告成了。

之所以使用import語(yǔ)法來(lái)引入核心JS庫(kù)是因?yàn)檫@樣更符合ES6模塊化的規(guī)范，我看到網(wǎng)上有人建議在main.js中引入JS，但是過(guò)早地引入JS可能導(dǎo)致頁(yè)面首次加載緩慢。

<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í)候我需要通過(guò)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上傳圖片的話，還需要在后臺(tái)配置一個(gè)接口。這部分還沒(méi)有時(shí)間研究，等過(guò)幾天補(bǔ)上

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: