Question

我有一个contenteditable的div，但我不想让用户将格式化的内容粘贴或丢弃到div中，因为这很可能会破坏页面的布局。

如何处理粘贴的HTML内容到这样的div中的问题已经多次提出，我能够解决这个问题，如下所述：

Javascript trick for 'paste as plain text` in execCommand

在上述问题的一个评论中，有人提出 - 为了避免div中的HTML格式化内容 - 人们也需要处理丢弃的内容。

我需要支持FF，Chrome，Edge和IE11。对于除IE11以外的所有人，我能够实现自定义丢弃处理程序：

＆＃13;

$("div[contenteditable=true]").on('drop', function(e) {
    e.preventDefault();
    var text = e.originalEvent.dataTransfer.types.indexOf && e.originalEvent.dataTransfer.types.indexOf('text/plain') >= 0 ? e.originalEvent.dataTransfer.getData('text/plain') :  e.originalEvent.dataTransfer.getData('Text');
    var range;
    if (!document.caretRangeFromPoint) { // IE11 doesn't support caretRangeFromPoint
        range = document.createRange();
        range.setStart(e.currentTarget, 0);
        range.setEnd(e.currentTarget, 0);
    } else {
        range = document.caretRangeFromPoint(e.originalEvent.clientX, e.originalEvent.clientY);
    }
    _insertText(text, range);
});

function _insertText(text, range) { 
    range.deleteContents();
    var textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.selectNodeContents(textNode);
    range.collapse(false);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h4 style="color:red">Drag Me</h4>
<div style="border: 1px solid;" contenteditable="true">Drop here</div>
</body>

＆＃13;

https://jsfiddle.net/m25z6ch6/

由于IE11不支持document.caretRangeFromPoint，我已经尝试手动创建一个范围，如上面的代码段所示：

range = document.createRange();
range.setStart(e.currentTarget, 0);
range.setEnd(e.currentTarget, 0);

但这仅适用于删除已存在文本开头的内容。如果我想将内容放入已存在的文本中（例如，在＆＃34; Drop＆＃34;＆＃34;这里＆＃34;在上例中），我需要计算要使用的偏移量。但我无法弄清楚如何为IE做这件事。

有没有办法在给定放置事件中的信息（例如x，y坐标和/或放置目标元素）的情况下创建具有正确偏移的范围对象？

或者是否有其他方法可以自定义已删除的内容，以便仅为IE11提供纯文本？

IE11将纯文本删除为contenteditable div

0 个答案: