必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末の全画面幅を占める必要があるため、アップロードされた写真を比例的に拡大縮小できること、また、写真のドラッグ、拡大縮小、サイズの変更ができる必要があります。複数のサードパーティ製リッチ テキスト エディターを試した後でも、要件を完全に満たすエディターを見つけるのは困難です。何度も試した結果、最終的に wangEditor リッチ テキスト エディターを選択しました。 当初は、vue2Editor リッチ テキスト エディターが使用されていました。vue2Editor 自体は画像のドラッグをサポートしていませんが、設定可能な画像のドラッグ メソッドを提供しており、画像のドラッグを実装するには Quill.js を使用する必要があります。ビジネスニーズを満たしていますが、モバイルデバイスでの表示効果は理想的ではありません。 このエディターの主な目的は、モバイル端末に表示する必要があるリッチテキストをアップロードすることです。理想的な効果を実現するには、画像の割合を変更できる必要があります。img タグの width 属性を 100% に設定すると、要件を満たすことができます。最近リリースされたwangEditorの新バージョン(第4版v4)はニーズを満たすことができ、最終的に実際の開発に選択されました。 効果画像:コード例と関連する構成は次のとおりです。プラグインをインストールする npm i wangeditor --save // または 糸追加 wangeditor エディターの設定 <テンプレート> <div class="w_editor"> <!-- リッチテキストエディター --> <div id="w_view"></div> </div> </テンプレート> <スクリプト> // リッチテキストをインポートする import WE from "wangeditor"; //elementUI メッセージ モジュールを導入します (プロンプト情報用) 「element-ui」から { Message } をインポートします。 エクスポートデフォルト{ 名前: "WEditor", 小道具: { // デフォルト値 defaultText: { type: String, default: "" }, // リッチテキストの更新された値 richText: { type: String, default: "" } }, データ() { 戻る { // エディターインスタンス editor: null, // リッチテキストメニューオプション構成 menuItem: [ "頭"、 "大胆な"、 「フォントサイズ」、 「フォント名」、 "イタリック"、 「下線」、 "インデント"、 "行の高さ", 「フォアカラー」、 "背景色", "リンク"、 "リスト"、 「正当化する」、 "画像"、 "ビデオ" ] }; }, 時計: // デフォルト値をリッスンする defaultText(nv, ov) { (nv != ""の場合{ this.editor.txt.html(nv); this.$emit("update:rich-text", nv); } } }, マウント() { エディタを初期化します。 }, メソッド: { // エディターを初期化する initEditor() { // エディター dom ノードを取得します。const editor = new WE("#w_view"); //エディターを設定します editor.config.showLinkImg = false; /* ネットワーク画像を挿入する機能を非表示にします*/ editor.config.onchangeTimeout = 400; /* onchange をトリガーする時間間隔を設定します。デフォルトは 200ms です */ editor.config.uploadImgMaxLength = 1; /* 一度にアップロードできる画像の最大数を制限します*/ // editor.config.showFullScreen = false; /* 全画面機能ボタンを表示するかどうかを設定します*/ editor.config.menus = [...this.menuItem]; /* カスタムシステムメニュー */ // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 画像サイズを制限します */; editor.config.customAlert = エラー => { メッセージ.error(err); }; // 変更を監視し、データを同期的に更新する editor.config.onchange = newHtml => { // コンポーネントのリッチ テキスト値の変更を非同期的に更新します。this.$emit("update:rich-text", newHtml); }; // カスタムアップロード画像 editor.config.customUploadImg = (resultFiles, insertImgFn) => { /** * resultFiles: 画像アップロードファイルストリーム * insertImgFn: リッチテキストに画像を挿入 * 返される結果は、生成された画像の URL アドレスです * */ // このメソッドは、Alibaba Cloud Image OSS Direct Transfer Plugin 用に Fengzhuan によって書き直されました。 this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => { !!url && insertImgFn(url); /* OSS イメージアップロード、エディターにイメージを挿入*/ }); }; // エディターを作成します editor.create(); this.editor = エディター; } }, 破棄する前に() { // エディターを破棄します this.editor.destroy(); this.editor = null; } }; </スクリプト> 注: 具体的なパラメータ設定については、エディターのドキュメントの手順を参照してください。 コンポーネントで抽出したエディターを使用します。<テンプレート> <div class="editor"> <el-card シャドウ="なし"> <div スロット="ヘッダー" クラス="clearfix"> <span>リッチ テキスト エディター</span> </div> <div class="card_center"> <WEditor :defaultText="デフォルトテキスト" :richText.sync="リッチテキスト" /> </div> </el-card> </div> </テンプレート> <スクリプト> // パッケージ化されたエディターをインポートします。 import WEditor from "@/components/WEditor"; エクスポートデフォルト{ 名前:「編集者」、 コンポーネント: { WEditor }, データ() { 戻る { // デフォルト値 defaultText: "", // リッチテキストの更新された値 richText: "" }; }, 作成された() { // コンポーネントが読み込まれるのを待って値を割り当てます this.$nextTick(() => { this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`; }); } }; </スクリプト> 以上が、画像のズームやドラッグをサポートするリッチテキストエディタを統合したVueの詳細です。Vueリッチテキストエディタの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する
サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...
序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...
最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...
目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...
さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...
私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...
目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...
MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...
目次行と列の変換トランスクリプトの構成を分析するvue3 + el-table で作成されたトランス...
この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...
VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...
MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...