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

推薦する

Linux で NFS のワンクリック展開を実装する方法

サーバー情報管理サーバー: m01 172.16.1.61サーバー: nfs01 172.16.1....

MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します

背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...

MySQLインデックスが失敗するいくつかの状況の詳細な分析

1. 先頭のあいまいクエリではインデックスを使用できません (「%XX」や「%XX%」など)コード値...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...

CSS で画像アダプティブ コンテナを実装するためのサンプル コード

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

Linux で独自の Nexus プライベート サーバーを構築する方法

この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...

node.js の require メソッドの読み込みルールの詳細な説明

require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

HTML およびプラグイン アプリケーションにおけるデータ カスタム属性の使用の概要

HTML にはデータ属性が含まれていることがよくあります。これらは HTML5 のカスタム属性です。...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

Vue ページに img 画像を導入する方法

HTMLを学ぶとき、画像タグ<img>は画像を導入します <img src=&qu...