项目使用的是vue框架,需要一个减价的编辑框,就在npm上找了一下,发现simplemde挺不错的,由于我比较懒,就顺便在npm又搜了一下,找到了<代码> vue-simplemde 代码>这个包,那就开始使用它吧。
但是这个<代码> vue-simplemde> 代码不支持图片拖拽上传,粘贴上传,也不能说是因为这个vue-simplemde,因为vue-simplemde只是对simplemde的基础上封装成一个Vue插件,所以最后还是由于simplemde没有提供相关的功能,但是为了用户体验考虑,这个功能时必要的,除非不使用减价编辑器。而去使用富文本编辑器,那样的话,项目很多的代码都要进行更改。所以就在网上查了文章,及在github上查了一些代码。下面将进行分析
拖拽的API核心是下降这个事件,就是当我们从桌面拖动一个文件到浏览器里时,松开的时候,而触发的事件名。
我们都知道,你随便拖动一个图片到浏览器里,会直接打开这个图片,这是因为浏览器默认你拖动文件到浏览器里时,将打开这个文件,所以,我们需要阻止原生的操作。
我们现在先写一段代码,让其屏蔽掉默认事件
窗口。addEventListener(“下降”,e=比;{ e=e | |事件 如果(e。target。className===CodeMirror-scroll){//如果进入到编辑器的话,将阻止默认事件 e.preventDefault () } },false)
CodeMirror-scroll这个类就是simplemde编辑框的类名称。
现在我们拖拽文件到这个编辑框,然后松掉,不会出现任何反应。如果在编辑框之外的地方,还是会继续触发默认事件。
下面就是获取simplemde方法,给他滴事件处理方法。
//假设页面一共有三个编辑窗口,所以需要循环监听事件 (这一点。refs.simplemde1美元, 这个。refs.simplemde2美元, refs.simplemde3美元这个。 ]. map (({simplemde})=比;{ simplemde.codemirror。(“下降”,(编辑,e)=比;{ 如果(! (e。dataTransfer,,e.dataTransfer.files)) {//弹窗说明,此浏览器不支持此操作 返回 } 让dataList=e.dataTransfer.files 让imageFiles=[]//要上传的文件实例数组//循环,是因为可能会同时拖动几个图片文件 (让我=0;我& lt;dataList.length;我+ +){//如果不是图片,则弹窗警告仅支持拖拽图片文件 如果(dataList[我].type.indexOf('图像')===1){//下面的继续,作用是,如果用户同时拖2个动图片和一个文档,那么文档不给于上,传图片照常上传。 继续 } imageFiles.push (dataList[我])//先把当前的文件推进数组里,等为循环结束之后,统一上传。 }//uploadImagesFile方法是上传图片的方法//simplemde.codemirror的作用是用于区分当前的图片上传是处于哪个编辑框 this.uploadImagesFile (simplemde。codemirror imageFiles)//因为已经有了下面这段代码,所以上面的屏蔽默认事件代码就不用写了 e.preventDefault () }) })
诈一看,代码好像有点多,那是因为注释的原因,下面是没有注释的代码。你可以根据下面的代码,有自己的见解和理解:
(这一点。refs.simplemde1美元, 这个。refs.simplemde2美元, refs.simplemde3美元这个。 ]. map (({simplemde})=比;{ simplemde.codemirror。(“下降”,(编辑,e)=比;{ 如果(! (e。dataTransfer,,e.dataTransfer.files)) { 返回 } 让dataList=e.dataTransfer.files 让imageFiles=[] (让我=0;我& lt;dataList.length;我+ +){ 如果(dataList[我].type.indexOf('图像')===1){ 继续 } imageFiles.push (dataList[我]) } this.uploadImagesFile (simplemde。codemirror imageFiles) e.preventDefault () }) })
粘贴的API是膏方法,这个不像上面一样,粘贴不需要禁止默认事件,因为我们可以看的到,你复制一个图片,到浏览器里按下ctrl + v的时候,是不会发生任何变化的,所以没用必要禁止默认事件。
下面是代码:
simplemde.codemirror。(“粘贴”,(编辑,e)=比;{//粘贴图片的触发函数 如果(! (e。clipboardData,,e.clipboardData.items)) {//弹窗说明,此浏览器不支持此操作 返回 } 尝试{ 让dataList=e.clipboardData.items 如果(dataList [0]。类型===募?,dataList [0] .getAsFile () .type.indexOf('图像')!==1){ this.uploadImagesFile (simplemde。codemirror [dataList [0] .getAsFile ())) } }捕捉(e) {//弹窗说明,只能粘贴图片 } })基于vue-simplemde实现图片拖拽,粘贴功能