必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末の全画面幅を占める必要があるため、アップロードされた写真を比例的に拡大縮小できること、また、写真のドラッグ、拡大縮小、サイズの変更ができる必要があります。複数のサードパーティ製リッチ テキスト エディターを試した後でも、要件を完全に満たすエディターを見つけるのは困難です。何度も試した結果、最終的に 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オプティマイザの誤判断によって発生した低速クエリイベントを記録する
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...
目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
導入:スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...
MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...
vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...
ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...
次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...
参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...
<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...
1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...
1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...