Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:

ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末の全画面幅を占める必要があるため、アップロードされた写真を比例的に拡大縮小できること、また、写真のドラッグ、拡大縮小、サイズの変更ができる必要があります。複数のサードパーティ製リッチ テキスト エディターを試した後でも、要件を完全に満たすエディターを見つけるのは困難です。何度も試した結果、最終的に 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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue は画像プレビュー効果の例 (ズームイン、ズームアウト、ドラッグ) を実装します
  • Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています
  • Vueは画像のドラッグアンドドロップ機能を実装します
  • Vueは画像の拡大縮小の問題を実装する
  • Vueコンポーネントを使用して画像のドラッグとズーム機能を実現する

<<:  Linux システムのスワップ領域の紹介

>>:  オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する

推薦する

CentOSはexpectを使用してスクリプトやコマンドをバッチでリモート実行します

サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...

Node.jsを使用してホットリロードページを実装する方法の詳細な説明

序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

Docker を使用して Spring Boot をデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

Vue ユニットテストに推奨されるプラグインと使用例

目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

Linux での umask の使用に関する詳細な説明

私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...

MySQL 1130例外、リモートログインできない解決策

目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

Vue3+el-tableは行と列の変換を実現します

目次行と列の変換トランスクリプトの構成を分析するvue3 + el-table で作成されたトランス...

Vue.jsはタイムライン機能を実装します

この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...