Vue で wangeditor リッチテキスト編集を使用する際の問題

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テキスト エディターです。軽量、シンプル、使いやすく、オープン ソースで無料です。
実際のプロジェクトでも頻繁に使用されています。参考までに事例を挙げておきます。

wangEditor ドキュメント: https://www.wangeditor.com/

リッチテキストエディターのスクリーンショット:

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

<!--リッチテキストエディター。 http://www.wangeditor.com/
使用例:
<AppEditor v-model="content"></AppEditor>
-->
<テンプレート>
 <article ref="エディター" class="AppEditor-root"></article>
</テンプレート>
<スクリプト>
 定数 E = require('wangeditor');
 エクスポートデフォルト{
  名前: 'AppEditor',
  モデル: {
   プロパティ: '値'、
   イベント: 'update:value',
  },
  小道具: {
   // 値、v-model バインディング値: {type: String、default: ''}、
   //メニューオプションmenus: {
    タイプ: 配列、
    デフォルト(){
     戻る [
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
    },
   },
  },
  データ(){
   戻る {
    editor: {}, // エディター object_value: '', // コンテンツのバックアップ、ウォッチ中の判断に使用され、エディターが入力された場合にのみ変更されます};
  },
  計算: {},
  マウントされた(){
   エディタを初期化します。
  },
  時計:
   値(新しい値、古い値){
    // エディタの onchange の変更は処理されず、テキストのロールバックバグを防ぐために親コンポーネントからの変更のみが処理されます
    (newValue != this._value) の場合 {
     this.editor.txt.html(新しい値);
    }
   },
  },
  メソッド: {
   initEditor(){
    editor = new E(this.$refs.editor);
    オブジェクト.assign(editor.customConfig, {
     メニュー: this.menus、
     zインデックス: 100,
     高さ: 200,
     ペーストフィルタースタイル: false、
     変更時: (html) => {
      this._value = html; // _valueを更新
      this.$emit('update:value', html); // 値を更新
     },
     customUploadImg:((ファイル、挿入)=> {
      if(this.$utils.isEmpty(ファイル)){
       戻る;
      }
      const msg = this.$Message.loading({
       内容: 「写真をアップロード中です。しばらくお待ちください...」
       期間: 0
      });
      var パラメータ = 新しい FormData();
      パラメータを追加します('img', ファイル[0]);
      this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => {
       挿入(res.data.imgUrl)
       タイムアウトを設定します(メッセージ、0);
       this.$Message.success('アップロードに成功しました');
      })
     })、
     アップロード画像フック:{

      customInsert: 関数 (insertImg, 結果, エディター) {
       挿入画像(結果.url)
      }
     }
    });


    エディターを作成します。
    editor.txt.html(this.value); // 非同期データ取得のため、すぐにバインドすることはできません。判断を見て処理します。 this.editor = editor;
   },
  },
 };
</スクリプト>
<スタイル スコープ lang="scss">
 .AppEditor-root{ 境界線: 1px solid #f0f0f0; 高さ: 400px !important;
  /deep/ .we-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important;

  }
  /deep/ .we-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important;
   .we-text{ 高さ: 100%; オーバーフローy: 自動 !important;}
  }
 }

</スタイル>

これで、Vue での wangeditor リッチ テキスト編集の使用に関するこの記事は終了です。より関連性の高い wangeditor リッチ テキスト編集コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vueでwangeditorのhtmlとテキストを取得する方法
  • Vue でリッチテキストエディタ wangEditor3 を使用する方法
  • 軽量リッチテキストエディタ wangEditor を vue で使用する例
  • vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

<<:  MySQL 作成ルーチン権限に関する注意事項

>>:  1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。

推薦する

Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事

目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...

VMware15 centos7 ブリッジモード ssh に突然アクセスできなくなる問題を解決する

仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...

docker-compose.yml ファイル内の一般的なテンプレート コマンドの詳細な説明

注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...

VMware Workstation での VMware vSphere のセットアップ (グラフィック チュートリアル)

VMware vSphere は、業界をリードする最も信頼性の高い仮想化プラットフォームです。 v...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...

Reactベースのコンポーネントのカプセル化の実装手順

目次序文antd はどのようにしてコンポーネントをカプセル化するのでしょうか?ディバイダーコンポーネ...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

MySQL デッドロック シナリオ例の分析

序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...

Ubuntu 16.04 64ビット版を3つのステップで32ビットプログラムと互換性を持たせる

ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...

良いデザインについて

<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...

Centos7のホスト名を変更する3つの方法

方法 1: hostnamectl の変更ステップ1 ホスト名を確認するホスト名ステップ2 ホスト名...

MySQL スロークエリ関連パラメータの原理の分析

MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...

JavaScript で矢印関数を使用できないシナリオはどれですか

目次1. オブジェクトメソッドを定義する2. プロトタイプメソッドを定義する3. イベントコールバッ...