Question

我想拖放嵌入图标（例如图像功能），目前我可以成功删除文本，但是我不知道如何删除解析为嵌入的embed或html。

代码示例：

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')
  })

演示：https://codepen.io/anon/pen/jjZova

如果我未设置文本dataTransfer，则放置只是“禁用/忽略”，而html dataTransfer则完全被忽略。

提前感谢您的进一步答复。

Answer 1

根据https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_the_drag's_data，我们只需要设置为'text/html'而不是'text'或'html'

Codepen演示已更新！

Answer 2

在Firefox最新更新至73.0.1（在Linux上）之后，由于上述外部元素拖放到主轴编辑器中无法正常工作，因此上述实现存在问题。请注意，Firefox 72.0.2可以毫无问题地运行它。

经过大量的挖掘和测试，我想出了下面的解决方案，该解决方案可以正常工作，如果有人遇到相同的问题，我想在这里分享。

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>

羽毛笔js将嵌入内容或html内容放入编辑器中

2 个答案: