vue-simplemde를 사용하면 이미지를 드래그하여 붙여넣을 수 있습니다.

이번에는 이미지를 드래그하여 붙여넣는 방법에 대한 vue-simplemde를 가져오겠습니다. vue-simplemde로 이미지를 드래그하여 붙여넣을 때 주의사항은 무엇인가요?

하지만 이 vue-simplemde는 이미지 드래그 앤 드롭 업로드, 붙여넣기 업로드를 지원하지 않으며 vue-simplemde가 Vue에만 캡슐화되어 있기 때문에 이 vue-simplemde 때문이라고 말할 수는 없습니다. simplemde 기반 플러그인. 그래서 결국 simplemde에서는 관련 기능을 제공하지 않기 때문인데, 사용자 경험을 위해서 마크다운 에디터를 사용하지 않는 이상 이 기능은 꼭 필요하다. 대신 서식 있는 텍스트 편집기를 사용하세요. 이 경우 프로젝트의 많은 코드를 변경해야 합니다. 그래서 온라인에서 기사를 확인하고 github에서 일부 코드를 확인했습니다. 다음 내용이 분석됩니다 vue-simplemde 不支持图片拖拽上传、粘贴上传，也不能说是因为这个 vue-simplemde ，因为 vue-simplemde 只是对 simplemde 的基础上封装成一个Vue插件。所以最后还是由于 simplemde 没有提供相关的功能，但是为了用户体验考虑，这个功能时必要的，除非不使用markdown编辑器。而去使用富文本编辑器，那样的话，项目很多的代码都要进行更改。所以就在网上查了文章，及在github上查了一些代码。下面将进行分析

拖拽

拖拽的API核心是 drop 这个事件，就是当我们从桌面拖动一个文件到浏览器里时，松开的时候，而触发的事件名。

我们都知道，你随便拖动一个图片到浏览器里，会直接打开这个图片，这是因为浏览器默认你拖动文件到浏览器里时，将打开这个文件，所以，我们需要阻止原生的操作。

我们现在先写一段代码，让其屏蔽掉默认事件

window.addEventListener("drop", e => {
 e = e || event
 if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
 e.preventDefault()
 }
}, false)

CodeMirror-scroll 这个Class就是 simplemde 编辑框的Class名称。

现在我们拖拽文件到这个编辑框，然后松掉，不会出现任何反应。如果在编辑框之外的地方，还是会继续触发默认事件。

下面就是获取 simplemde 方法，给他 drop 事件处理方法。

// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ this.$refs.simplemde1,
 this.$refs.simplemde2,
 this.$refs.simplemde3
].map(({simplemde}) => {
 simplemde.codemirror.on('drop', (editor, e) => {
 if (!(e.dataTransfer && e.dataTransfer.files)) {
  // 弹窗说明，此浏览器不支持此操作
  return
 }
 let dataList = e.dataTransfer.files
 let imageFiles = [] // 要上传的文件实例数组
 // 循环，是因为可能会同时拖动几个图片文件
 for (let i = 0; i <p style="text-align: left;">诈一看，代码好像有点多，那是因为注释的原因，下面是没有注释的代码。你可以根据下面的代码，有自己的见解和理解：</p><pre class="brush:php;toolbar:false">[ this.$refs.simplemde1,
 this.$refs.simplemde2,
 this.$refs.simplemde3
].map(({simplemde}) => {
 simplemde.codemirror.on('drop', (editor, e) => {
 if (!(e.dataTransfer && e.dataTransfer.files)) {
  return
 }
 let dataList = e.dataTransfer.files
 let imageFiles = []
 for (let i = 0; i <p style="text-align: left;"><span style="color: #ff0000"><strong>粘贴</strong></span></p><p style="text-align: left;">粘贴的API是 paste 方法，这个不像上面一样，粘贴不需要禁止默认事件，因为我们可以看到，你复制一个图片，到浏览器里按下 ctrl+v 的时候，是不会发生任何变化的，所以没用必要禁止默认事件。</p><p style="text-align: left;">下面是代码:</p><pre class="brush:php;toolbar:false">simplemde.codemirror.on('paste', (editor, e) => { // 粘贴图片的触发函数
 if (!(e.clipboardData && e.clipboardData.items)) {
 // 弹窗说明，此浏览器不支持此操作
 return
 }
 try {
 let dataList = e.clipboardData.items
 if (dataList[0].kind === 'file' && dataList[0].getAsFile().type.indexOf('image') !== -1) {
  this.uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
 }
 } catch (e) {
 // 弹窗说明，只能粘贴图片
 }
})

之所以这里写上 try...catch 方法，是因为如果你粘贴的时候，如果是一个文件， items 将是空的，而在下面的if循环里，使用 dataList[0].kind 。也就是 e.clipboardData.items[0].kind 。当 item 为空时，还去访问一个不存的 kind 属性时，就会报错了。所以这里需要使用 try...catch 方法进行判断。

dataList[0].getAsFile().type.indexOf('image') !== -1

Drag and drop

드래그 앤 드롭 API의 핵심은 드롭 이벤트인데, 이는 데스크톱에서 브라우저로 파일을 드래그하고 릴리스할 때 발생하는 이벤트 이름입니다. 그것.

사진을 브라우저로 드래그하면 사진이 바로 열리는 것을 모두 알고 있습니다. 이는 파일을 브라우저로 드래그할 때 브라우저가 기본적으로 파일을 열도록 설정되어 있기 때문입니다. 따라서 기본 작업을 방지해야 합니다.

이제 기본 이벤트를 차단하는 코드를 작성해 보겠습니다.

uploadImagesFile (simplemde, files) {
 // 把每个文件实例使用FormData进行包装一下，然后返回一个数组
 let params = files.map(file => {
 let param = new FormData()
 param.append('file', file, file.name)
 return param
 })
 let makeRequest = params => {
 return this.$http.post('/Api/upload', params)
 }
 let requests = params.map(makeRequest)
 this.$http.spread = callback => {
 return arr => {
  return callback.apply(null, arr)
 }
 }
 // 服务端返回的格式是{state: Boolean, data: String}
 // state为false时，data就是返回的错误信息
 // state为true时，data是图片上传后url地址，这个地址是针对网站的绝对路径。如下：
 // /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
 Promise.all(requests)
 .then(this.$http.spread((...resps) => {
  for (let i = 0; i CodeMirror-scroll 이 클래스는 simplemde 편집 상자의 클래스 이름입니다. <p style="text-align: left;"></p>이제 파일을 이 편집 상자로 드래그한 다음 놓으면 아무 일도 일어나지 않습니다. 편집 상자 외부에 있으면 기본 이벤트가 계속 트리거됩니다. <p style="text-align: left;"></p>다음은 simplemde 메소드를 얻어와서 drop 이벤트 처리 메소드를 주는 것입니다. <p></p><pre class="brush:php;toolbar:false">Promise.all(requests)
 .then(this.$http.spread((...resps) => {
 // code
 })

얼핏 보면 코드가 좀 과해 보이는데, 그 이유는 댓글 때문입니다. 아래 코드를 기반으로 자신만의 통찰과 이해를 가질 수 있습니다.

axios.all(requests)
 .then(axios.spread((...resps) => {
 // code
 })

Paste

붙여넣기용 API는 위와 달리 기본 이벤트를 비활성화할 필요가 없습니다. 우리가 볼 수 있듯이, 이미지를 복사하고 브라우저에서 Ctrl+V를 누르면 아무 것도 바뀌지 않으므로 기본 이벤트를 비활성화할 필요가 없습니다. 다음은 코드입니다.
rrreee

여기에 try...catch 메소드를 쓴 이유는 붙여넣으면 파일이면 항목이 비게 되고 아래 if 루프에서 다음을 사용하기 때문입니다. dataList [0].kind. e.clipboardData.items[0].kind입니다. 항목이 비어 있고 존재하지 않는 종류 속성에 액세스하면 오류가 보고됩니다. 따라서 여기서는 try...catch 메소드를 사용하여 판단해야 합니다. 🎜🎜dataList[0].getAsFile().type.indexOf('image') !== -1 붙여넣은 것이 다른 것이 아닌 이미지임을 확인하는 문장입니다. . 🎜🎜if에서 이미지를 업로드할 때의 차이점은 [dataList[0].getAsFile()]입니다. 형식을 통일하고 uploadImagesFile 함수의 처리를 용이하게 하기 위해 []를 추가하여 배열로 만들었기 때문입니다. dataList[0].getAsFile()은 파일 인스턴스를 가져오는 것입니다. 🎜🎜🎜🎜업로드🎜🎜🎜🎜업로드는 약간 번거롭습니다. 🎜rrreee🎜axiox를 사용하기 위한 vue 플러그인으로 캡슐화하기 때문에 this.$http 자체가 아니라 인스턴스화됩니다. axios 관리자가 제안한 해결책은 axios 패키지를 다시 도입하여 사용하는 것입니다. 하지만 나는 그것이 필요하다고 생각하지 않습니다. 내부적으로 axios.all 은 Promise.all 입니다. axios.spread의 구현 코드는 비교적 작기 때문에 그냥 가져가서 axios🎜🎜에 다시 할당하면 됩니다. 따라서 위의 코드는🎜rrreee🎜이 코드를 번역하면🎜rrreee🎜이 됩니다. 사례를 읽으신 후 마스터하셨으리라 믿습니다. 이 기사의 방법에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜vuex 페이지를 새로 고친 후 데이터를 저장할 수 없는 경우 어떻게 해야 할까요?🎜🎜🎜🎜🎜실제 프로젝트에서 Vue2.0 라디오 선택을 상호 배타적으로 만드는 방법🎜🎜🎜

위 내용은 vue-simplemde를 사용하면 이미지를 드래그하여 붙여넣을 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!