javascript 2.0.0-dev quill拖动文本不工作如何使其拖动文本

9nvpjoqh  于 11个月前  发布在  Java
关注(0)|答案(1)|浏览(116)

一般来说,在quill 1.3稳定版本中,文本是可以移动的,也就是说,我们可以从内部移动某个列表并将其放在某个地方,或者我们可以从某个地方拖放文本,不需要为此做任何额外的事情,即使是在普通的textarea中也是如此。
例如,如果你尝试下面的代码,你会看到“Hello World!”“World!”你可以剪切它并将其留在“开头”,你将获得剪切和粘贴的效果与拖动。
但是,如果你删除2.0.0开发版本的注解行,并采取1.3.6版本的注解部分,并运行它,我怎么能使这一工作,如果它不具体工作?

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- 
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js"></script> 
-->

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>```

字符串

z3yyvxxp

z3yyvxxp1#

首先,Quill故意阻止了拖动,因此在启用它之前确保您有适当的用例非常重要。
Quill 2.0通过在dragstart事件处理程序(handleDragStart)中调用e.preventDefault()禁用了drag events。此处理程序以前在Quill类中,但在has been moved to Scroll to allow overwriting中。请注意,此更改仅适用于2.0.0-dev.4(和2.0.0-beta.0)之后,因此不能使用2.0.0-dev.3

let Scroll = Quill.import('blots/scroll');
class DraggableScroll extends Scroll {
  handleDragStart(e) {}
};
Quill.register(DraggableScroll);

字符串
一旦你解决了“拖动”问题,你还需要修复“放下”部分。这里有两种方法来做到这一点:

方法1:让浏览器像Quill 1.3一样处理插入操作

Quill 2.0阻止了uploader模块中的'drop'事件用于文件上传,因此浏览器不会插入拖放的内容。您可以在拖放事件不是通过拖放文件或文件夹触发时阻止drop事件传播:

let Scroll = Quill.import('blots/scroll');

class DraggableScroll extends Scroll {
    constructor(registry, domNode, { emitter }) {
        super(registry, domNode, { emitter });
        this.domNode.addEventListener('drop', (e) => this.handleDrop(e), true);
    }

    handleDrop(e) {
        if (e.dataTransfer.files.length == 0)
            e.stopImmediatePropagation();
    }

    handleDragStart(e) { }
}

Quill.register(DraggableScroll);

var quill = new Quill('#editor', {
    theme: 'snow'
});
<link href="https://cdn.quilljs.com/2.0.0-dev.4/quill.snow.css" rel="stylesheet">

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.min.js"></script>

**方法二:**不需要浏览器来处理元素的插入,你可以创建一个dragend/drop事件处理器来将拖动的元素移动到它们的放置位置。(我不知道如何实现,所以我将它留给其他知道如何实现正确的人。)

let Scroll = Quill.import('blots/scroll');

class DraggableScroll extends Scroll {
    constructor(registry, domNode, { emitter }) {
        super(registry, domNode, { emitter });
        this.domNode.addEventListener('dragend', (e) => this.handleDragEnd(e));
    }

    handleDragStart(e) {
        this.dragged = e.dataTransfer.getData('text/plain');
    }
    
    /*a broken handler for demo purpose*/
    handleDragEnd(e) {
        e.preventDefault();

        const data = this.dragged;
        const selection = quill.getSelection();
        quill.deleteText(selection.index, selection.length);

        let index;
        if (document.caretRangeFromPoint) {
            index = document.caretRangeFromPoint(e.clientX, e.clientY).startOffset;
        } else {
            // firefox
            index = e.rangeOffset;
        }

        quill.insertText(index, data);
        quill.setSelection(index + data.length, 0);
    }
};

Quill.register(DraggableScroll);

var quill = new Quill('#editor', {
    theme: 'snow'
});
<link href="https://cdn.quilljs.com/2.0.0-dev.4/quill.snow.css" rel="stylesheet">

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.4/quill.min.js"></script>

相关问题