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オプティマイザの誤判断によって発生した低速クエリイベントを記録する

推薦する

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Raspberry Pi 4 に Ubuntu 19.10 をインストールするための詳細なチュートリアル

以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...

Dockerコンテナの原理の分析

目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...

Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明

序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...

JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)

導入:スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...

MySQLの3つの用途と違いは同等ではない

MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...

Vueはページdivボックスのドラッグアンドドロップソート機能を実装します

vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...

Linux 論理ボリューム管理 (LVM) の使用法の概要

ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

Webデザインチュートリアル(2):模倣と盗作について

<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...