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

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>`;
		});
	}
};
</スクリプト>