Quill js 在編輯器中放置嵌入或 html 內容

Question

我想將一個嵌入（如圖像功能）拖放到羽毛筆中，目前我成功地刪除了一個文本，但我不知道如何刪除一個被解析為嵌入的嵌入或 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 上）之后，我遇到了上述實現的問題，因為將外部元素拖放到 quill 編輯器中不起作用。 請注意，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>