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 キー ペアのバインドを解除します。

推薦する

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

Linux の検索ツールの代替となるフレンドリーなツール

find コマンドは、指定されたディレクトリ内のファイルを検索するために使用されます。引数の前の文字...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...

Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...

Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...

Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル

目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...

Win10環境にMysql5.7.23をインストールする際の問題点と落とし穴

たくさんのチュートリアルを読みましたが、うまくインストールできませんでした。しばらく試行錯誤した後、...

HTML ページ適応幅テーブル

WEB アプリケーションのページでは、テーブルがよく使用されます。列の数が限られているため、各列のコ...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

Gogs+Jenkins+Docker による .NetCore ステップの自動デプロイ

目次環境説明DockerのインストールゴグのインストールDocker で .NetCore サービス...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

データベースクエリ、どのオブジェクトにどのフィールドが含まれているか、メソッドステートメント

データベースは、どのオブジェクトにどのフィールドが含まれているかを照会します。 *を選択 sysob...