[JavaScript知识库] vue2-editor简单使用及插入图片光标位置问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue2-editor简单使用及插入图片光标位置问题 -> 正文阅读

[JavaScript知识库]vue2-editor简单使用及插入图片光标位置问题

第一步安装

npm install vue2-editor
yarn add vue2-editor

页面引入

// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from "vue2-editor";

插入图片及正常回显

  <vue-editor id="editor" useCustomImageHandler @image-added="handleImageAdded" v-model="htmlForEditor"> </vue-editor>

export default {
  components: {
    VueEditor
  },
 data() {
    return {
    	      htmlForEditor: "",
		}
	},
  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
    // 一般情况下，我们都是提交json数据，但是现在要上传文件所以要使用FormData方式上传表单
      var formData = new FormData();
      formData.append("file", file);
      formData.append('systemId', this.$store.state.user.systemId)
      axios({
        url: `${process.env.VUE_APP_UPLOAD_URL}`,
        method: "POST",
        data: formData
      })
        .then(result => {
          console.log(result, '来了吗')
          let url = result.data.data.url; // Get url from response
           //cursorLocation是光标位置，res.data.data.url是上传后的url地址
          Editor.insertEmbed(cursorLocation, "image", url);
          // 把光标移至图片后面
          Editor.setSelection(cursorLocation + 1)
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }

	}
}