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はキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
JSON (JavaScript Object Notation、JS Object Notatio...
いわゆるカスケード レプリケーションでは、マスター サーバーが 1 つのスレーブ サーバーにのみデー...
目次ReactRouterV6 の変更1. <Switch> が <Routes&...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...
目次目的npm init および package.json ファイルモジュールのインストールと管理モ...
展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...
目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...
目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...
UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...
最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...
目次序文JavaScript find() メソッドJavaScript filter() メソッド...
1.移行遷移プロパティの使用法: transition :transition-property t...
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...