Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

npm install vue-quill-editor --save または yarn add vue-quill-editor

<div>
 <クイルエディター
 v-model="値"
 ref="myQuillEditor"
 :options="エディターオプション"
 @change="onEditorChange"
 >
 </quill-editor>
 <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleChange" />
</div>

エディターオプション: {
 ツールバー: [
 ['太字', '斜体', '下線'], // 太字、斜体、下線、取り消し線、'取り消し線'
 ['blockquote', 'code-block'], //引用、コードブロック [{ 'header': 1 }, { 'header': 2 }], //H1 H2
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
}

マウント() {
 （this.$refs.myQuillEditor）の場合{
 //myQuillEditor を独自のものに変更します。this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);
 }
},
方法:{
 imgHandler(状態) {
 if (状態) {
 		//入力のクリックをトリガーし、fileBtn を独自の this.$refs.fileBtn.click() に置き換えます。
 }
 }
}

ハンドル変更(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);
 } 
 })
}