1. 準備vue-quill-editor をダウンロード npm install vue-quill-editor --save または yarn add vue-quill-editor 2. グローバルコンポーネント quill-editor を定義するvue-quill-editorをダウンロードしたら、グローバルコンポーネントを定義し、quill-editorという名前を付ける必要があります。 1. テンプレートを定義する<div> <クイルエディター v-model="値" ref="myQuillEditor" :options="エディターオプション" @change="onEditorChange" > </quill-editor> <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleChange" /> </div> 2. リッチテキストオプションの設定を定義するエディターオプション: { ツールバー: [ ['太字', '斜体', '下線'], // 太字、斜体、下線、取り消し線、'取り消し線' ['blockquote', 'code-block'], //引用、コードブロック [{ 'header': 1 }, { 'header': 2 }], //H1 H2 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : } 3. 関連する方法1. オリジナルのリッチテキストエディタのアップロード画像バインディング方法を変更するマウント() { (this.$refs.myQuillEditor)の場合{ //myQuillEditor を独自のものに変更します。this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler); } }, 方法:{ imgHandler(状態) { if (状態) { //入力のクリックをトリガーし、fileBtn を独自の this.$refs.fileBtn.click() に置き換えます。 } } } 2. イベントをアップロードするハンドル変更(e) { const files = Array.prototype.slice.call(e.target.files); if (!ファイル) { 戻る; } formdata = new FormData(); formdata.append("file_name", files[0].name); formdata.append("imgs", ファイル[0]); //axiosリクエストを使用する this.axios({ url: this.$store.state.baseUrl + 'upload/ueditorFile', メソッド: 'post'、 データ: フォームデータ、 ヘッダー: {'client-identity': localStorage.getItem('session_id')} }).then((res) => { //ここで空に設定すると、同じ写真をアップロードするときに変更イベントがトリガーされます。this.$refs.fileBtn.value = ""; (res.data.code == 200)の場合{ 選択範囲を this.$refs.myQuillEditor.quill.getSelection() とします。 // これは返された画像アドレスです。インターフェイスがアクセス可能なアドレスを返さない場合は、自分で連結する必要があります。let imgUrl = this.$store.state.baseUrl + res.data.data; imgUrl = imgUrl.replace(/\\/g,"/") //羽根ペンのカーソルを取得して画像を挿入します this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl) //挿入が完了すると、カーソルが 1 つ前に戻ります this.$refs.myQuillEditor.quill.setSelection(selection.index + 1); } }) } 最後に、このグローバル quill コンポーネントを親コンポーネントで使用し、必要な関連パラメータを渡すと完了です。 これで、vue で vue-quill-editor リッチ テキスト エディターを使用して画像をサーバーにアップロードする方法についての説明は終わりです。vue-quill-editor を使用して画像をサーバーにアップロードすることに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VUEをベースにしたシンプルな学生情報管理システムの実装
>>: Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...
目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...
による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...
最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...
その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...
1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...
それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...
1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...