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

推薦する

http.server に基づく LAN サーバーの構築プロセスの分析

皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...

HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します

Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...

Vueはドラッグプログレスバーを実装します

この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...

シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

Vue実装のカウンターケース

この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容...

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

MySQL binlog の使用方法の詳細な説明

binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...

IframeとFRAMEの違いの分析

1. Iframe タグの使用<br />Iframe については、「忘れられた隅」に放...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...

Mybatis での動的 SQL ステートメント分析

この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

Mysql のいくつかの複雑な SQL ステートメント (重複行のクエリと削除)

1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...