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

推薦する

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...

MySQL 8.0.23 インストールの超詳細なチュートリアル

目次序文1. 公式サイトからMySQLをダウンロードする2. 解凍ファイルを設定する3. 初期化4....

30分でReact Hooksを包括的に理解できます

目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

MySQL 4 の一般的なマスタースレーブレプリケーションアーキテクチャ

目次1つのマスターと複数のスレーブのレプリケーションアーキテクチャマルチレベルレプリケーションアーキ...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

HTML ファイルにファイルの内容を含める方法の概要

フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取るこ...

Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...

HTML構造化実装方法

DIV+css構造 CSSレイアウトを学んでいますか?まだ純粋な CSS レイアウトを完全に習得でき...

HTML要素を非表示にするいくつかの方法

1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...

Vueのウェブページスクリーンショット機能の詳しい説明

最近、プロジェクトで写真をアップロードする要件があるのですが、顧客がアップロードする写真のサイズがま...

mysqlは時間を自動的に追加し、時間を自動的に追加および更新する操作を実装します

時間フィールドは、データベースの使用時によく使用されます。よく使われるのは作成時間と更新時間です。し...

Docker コンテナのカスタム ホストのネットワーク アクセス操作

docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...

Vueでフォームデータを取得する方法

目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...