ホームページ > 記事 > ウェブフロントエンド > Vue.js と Ueditor リッチテキストエディターを組み合わせて使用する方法

Vue.js と Ueditor リッチテキストエディターを組み合わせて使用する方法

不言オリジナル: 2018-06-29 13:44:053628ブラウズ

この記事では、Vue.js と Ueditor を組み合わせたプロジェクトのサンプルコードを主に紹介します。詳細なコードはここにまとめられています。興味のある方は、フロントエンド開発プロジェクトで学習することができます。ページにリッチテキストエディターを統合する必要が生じるのは避けられません。

少し前に、会社の Vue.js プロジェクトで UEditor リッチテキストエディターを使用する必要があったので、Baidu で検索しましたが、詳細な手順が見つからなかったので、忙しい一日を経て、ようやく自分で試してみることにしました。

1. 一般的な考え方

1.1 モジュール性

vue の大きな利点の 1 つは、ページとロジックを再利用できるモジュール性です。したがって、Ueditor を .vue テンプレートファイルに再パッケージ化できます。他のコンポーネントは、このテンプレートを導入することでコードの再利用を実装します。

1.2 データ送信

まず、親コンポーネントはエディターの長さ、幅、初期テキストを設定する必要があります。これらのデータは props を介して渡すことができます。エディターでのテキストの変更は、Vue カスタムイベントを通じて親コンポーネントに渡すことができます。

2. 具体的な実装手順

2.1 主要な JS および CSS ファイルを導入します

以下のファイルをすべてプロジェクトにコピーします

2.2 Ueditor.config.js を設定します

まずはURL パラメータを設定します。このパスは、コピーしたばかりのファイルのディレクトリを指す必要があります。ここでは相対パスを使用するのが最善であることに注意してください。

var URL = window.UEDITOR_HOME_URL || &#39;/static/ueditor/&#39;;

次に、デフォルトの幅と高さの設定があります

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

他の機能の設定は公式ドキュメントで確認できます

2.3 エディタテンプレートを作成します

必要がありますUeditor をエディターテンプレートのコア JS ライブラリにインポートし、contentChange コールバック関数を追加すれば完了です。

インポート構文を使用してコア 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 を介して構成と初期テキスト値を渡す必要があります。

<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 中国語 Web サイトにご注意ください。

Vue.js と Ueditor リッチ テキスト エディターを組み合わせて使用​​する方法

関連記事

Vue.js と Ueditor リッチテキストエディターを組み合わせて使用する方法