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

この記事では、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 || '/static/ueditor/';

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

,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 プロジェクトの最適化方法

Vue コンポーネント オプションの小道具の使用の紹介

Vue.js ユニバーサル アプリケーション フレームワーク - Nuxt.js の分析

以上がVue.js と Ueditor リッチ テキスト エディターを組み合わせて使用​​する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。