Quill js 在编辑器中放置嵌入或 html 内容

Question

I want to drag and drop into quill a embed (like image feature) currently I'm successful drop a text but I don't know how drop a embed or html that be parsed into embed.

Code sample:

const Embed = Quill.import('blots/embed')

Quill.register(class extends Embed {
  static create (key) {
    let node = super.create()
    node.setAttribute('data-key', key)
    node.innerHTML = `#${key}`
    return node
  }

  static value (node) {
    return node.dataset.key
  }

  static blotName = 'customEmbed'
  static className = 'customEmbed'
  static tagName = 'span'
})

const quill = new Quill('#editor', {
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
})

document.getElementById('insertEmbded').onclick = () => {
  quill.insertEmbed(0, 'customEmbed', 'insertedEmbed')
}

document.getElementById('sidebar')
  .querySelectorAll('.customEmbed')
  .forEach(e => {
    e.ondragstart = ev => {
      ev.dropEffect = 'copy'
      ev.effectAllowed = 'copy'
      ev.dataTransfer.setData('text', ev.target.innerHTML)
      ev.dataTransfer.setData('html', `<span class="customEmbed" data-key="${ev.target.innerHTML.slice(1)}"><span contenteditable="false">${ev.target.innerHTML}</span></span>`)
    }
    e.setAttribute('draggable', 'true')
  })

Demo: https://codepen.io/anon/pen/jjZova

If I don't set text dataTransfer the drop is just "disabled/ignored" and html dataTransfer is totally ignore.

Thanks in advance for your further response.

Answer 1

According to https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_the_drag's_data we just need to set to 'text/html' instead of 'text' or 'html'

Codepen demo updated!

Answer 2

I was having issues with the above implementation after Firefox latest update to 73.0.1 (on linux), since drag and drop of external elements into quill editor was not working. Note that Firefox 72.0.2 runs it without a problem.

After a lot of digging and testing, I came up with the solution below which is working as expected, and I want to share it here should anyone stumbles on the same problem.

 const Embed = Quill.import('blots/embed') Quill.register(class extends Embed { static create(key) { let node = super.create() node.setAttribute('data-key', key) node.innerHTML = `${key}` return node } static value(node) { return node.dataset.key } static blotName = 'customEmbed' static className = 'customEmbed' static tagName = 'span' }) const quill = new Quill('#editor', { placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' }) quill.insertText(0, 'This is a sample text') document.getElementById('insertEmbded').onclick = () => { quill.insertEmbed(0, 'customEmbed', 'insertedEmbed') } document.getElementById('sidebar') .querySelectorAll('.customEmbed') .forEach(e => { e.setAttribute('draggable', 'true') e.ondragstart = ev => { ev.dropEffect = 'copy' ev.effectAllowed = 'copy' ev.dataTransfer.setData('text/html', `${ev.target.innerHTML.slice(1)}`) } e.ondragend = ev => { var data = ev.dataTransfer.getData("text/html"); var index = quill.getSelection(true).index; quill.insertEmbed(index, 'customEmbed', data) } }) function onDrop(event) { quill.setSelection(0); }

 #globalContainer { display: flex; height: 90vh; } #editor-container { flex: 1; display: flex; flex-direction: column; } #sidebar { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .customEmbed { background-color: cyan; cursor: pointer; }

 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script> <div id="globalContainer"> <div id="editor-container"> <div id="editor" ondrop="onDrop(event)"></div> </div> <div id="sidebar"> <ul> <li><span class="customEmbed" dragabble="true">#quill</span></li> <li><span class="customEmbed" dragabble="true">#js</span></li> </ul> <button id="insertEmbded">Insert customEmbed</button> </div> </div>