拖拽图片进入富文本 --vue3-前端-E先生的博客 Ï
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

拖拽图片进入富文本 --vue3

[导读]:近期有个项目涉及到这个问题,正好用的富文本支持 先说下富文本富文本用的md-editor-v3@5.8.4这个富文本是支持拖拽的 但是有点问题 细节还需要自己去处理 我这边做了支持话不多说代码直接上 可以复制直接用vue:<divstyle="width:60%;margin-right:10px">...

近期有个项目涉及到这个问题,正好用的富文本支持 先说下富文本

富文本用的

md-editor-v3@5.8.4

这个富文本是支持拖拽的 但是有点问题 细节还需要自己去处理 我这边做了支持

话不多说代码直接上 可以复制直接用

vue:

    <div style="width: 60%; margin-right: 10px">
                <md-editor
                  v-model="form[item.prop]"
                  @on-upload-img="onUploadImg"
                  ref="editorRef"
                  @dragover.prevent
                  @drop="onDrop"
                />
              </div>

解释一下  主要多了三个

                  ref="editorRef"
                  @dragover.prevent
                  @drop="onDrop"

第二部分 图片部分 我是写的组建模式 可以参考一下哈

 <div class="line-content-left-official-img" v-for="item,index in OfficialImgList" :key="item">
            <el-image class="line-content-left-official-img" :src="item.imgLink" fit="scale-down"  draggable="true"
            @dragstart="onDragStart(item, $event)" :preview-src-list="OfficialImgList.map((item) => item.imgLink)" :initial-index="index"/>
          </div>

也能看到 采用的el的 图片处理 方便用到预览 不然我就直接img
解释一下多出来的部分是

draggable="true"
            @dragstart="onDragStart(item, $event)"

后面部分是支持预览  样式自己调自己喜欢的样式

第三部分 主要方法

富文本页面的

import MdEditor, { ExposeParam } from 'md-editor-v3';

const editorRef = ref<ExposeParam>(); // 给 ref 指定类型,才能拿到 insert

const onDrop = (event) => {
  
  event.preventDefault();
  const imgLink = event.dataTransfer.getData('text/plain');
  
  if (!imgLink) return;
  
  if (imgLink && editorRef.value) {

    editorRef.value[0]?.insert((selectedText) => {
      /**
       * @return targetValue    待插入内容
       * @return select         插入后是否自动选中内容,默认:true
       * @return deviationStart 插入后选中内容鼠标开始位置,默认:0
       * @return deviationEnd   插入后选中内容鼠标结束位置,默认:0
       */
      
      return {
        targetValue: `<img src="${imgLink}" alt="">`,
        select: false,
        deviationStart: 0,
        deviationEnd: 0,
      };
    });
  }
};


图片页面的

const onDragStart = (item, event) => {
  event.dataTransfer.setData("text/plain", item.imgLink);
};


有不明白的地方 wx私 yanxias 无偿解答 只为了让语言更方便交流


image.png


本人有想法整合一个微服务的大型项目(人事 -财务-erp-...的项目),有兴趣的一起讨论 合作共赢

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ