javascript 在summernote编辑器中将内容粘贴为纯文本

2w3rbyxf  于 2023-01-19  发布在  Java
关注(0)|答案(6)|浏览(224)

我需要在我的summernote编辑器中复制粘贴一些内容。但是当我粘贴的时候,它会采用我复制它的页面的样式。我需要以纯文本的形式粘贴它。有什么解决办法吗?

pbpqsu0x

pbpqsu0x1#

使用onPaste回调

使用onPaste选项定义一个回调函数,该函数将去除标记并手动插入文本。

$editor.summernote({
    onPaste: function (e) {
        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
        e.preventDefault();
        document.execCommand('insertText', false, bufferText);
    }
});

贷方:https://github.com/summernote/summernote/issues/303

解决Firefox问题:

你可能仍然会遇到Firefox的问题,如果是这样的话,把document.execCommand封装在一个定时器函数中,稍微延迟它的执行:

setTimeout(function(){
    document.execCommand( 'insertText', false, bufferText );
}, 10);

更新版本0.7.0 +

v0.7.0之后更改了选项中回调的位置
在v0.7.0之后,每个回调都应该由回调对象 Package 。(源代码)
这意味着原始代码应编写为

$editor.summernote({
    callbacks: {
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
            e.preventDefault();
            document.execCommand('insertText', false, bufferText);
        }
    }
});
  • 感谢马蒂厄·卡斯泰茨指出这一点(所以如果这一点有帮助的话,请投票支持他的答案!)*
    TL;DR:这是一个函数demo
gwbalxhn

gwbalxhn2#

在v0.7.0之后,每个回调都应该由回调对象 Package 。http://summernote.org/deep-dive/#callbacks
因此,如果您使用v0.7.0或更高版本的summernote,jcuenod的答案现在可以重写为:

$('.summernote').summernote({
    callbacks: {
        onPaste: function (e) {
            var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

            e.preventDefault();

            // Firefox fix
            setTimeout(function () {
                document.execCommand('insertText', false, bufferText);
            }, 10);
        }
    }
});
rbpvctlc

rbpvctlc3#

onPaste-callback工作得很好,但是我遇到了不同浏览器对换行符的不同处理的问题,所以我想出了下面的解决方案,它使用了html-linebreaks:

$(".htmleditor").summernote({
      callbacks: {
        // callback for pasting text only (no formatting)
        onPaste: function (e) {
          var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
          e.preventDefault();
          bufferText = bufferText.replace(/\r?\n/g, '<br>');
          document.execCommand('insertHtml', false, bufferText);
        }
      }
    });
x8goxv8g

x8goxv8g4#

设法使一个可怕的黑客工作的IE11。这将可悲的是,也要求从用户粘贴权限。如果有人想出一个更好的建议,我洗耳恭听。

var trap = false;
$(document).ready(function () {
    $('#summernote').summernote({
        callbacks: {
            onPaste: function (e) {
                if (document.queryCommandSupported("insertText")) {
                    var text = $(e.currentTarget).html();
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

                    setTimeout(function () {
                        document.execCommand('insertText', false, bufferText);
                    }, 10);
                    e.preventDefault();
                } else { //IE
                    var text = window.clipboardData.getData("text")
                    if (trap) {
                        trap = false;
                    } else {
                        trap = true;
                        setTimeout(function () {
                            document.execCommand('paste', false, text);
                        }, 10);
                        e.preventDefault();
                    }
                }

            }
        }
    })
})

JSFiddle

91zkwejq

91zkwejq5#

在我的例子中,以上所有的解决方案都不起作用。通过使用这些解决方案,我找到了一个解决方案,这对我很有效。

$('#title').on('summernote.paste', function(e, ne) {
      var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text');
      ne.preventDefault();
      bufferText = bufferText.replace(/\r?\n/g, '<br>');
      document.execCommand('insertHtml', false, bufferText);
  })
vvppvyoh

vvppvyoh6#

onPaste for Rich Text Editor无法完美工作,我们需要干扰以纯文本粘贴和粘贴(pasteHTML),我们需要从clipboardData html中删除html和body标记,并使用span标记将其 Package

onPaste = (e) => {
    const clipboardData = ((e.originalEvent || e).clipboardData || window.clipboardData);
    const isPlainTextPasting = !clipboardData.types.includes("text/html");

    if (isPlainTextPasting) {
        let bufferText = clipboardData.getData("Text").replace(/\r?\n/g, '<br>');
        const blocksFromHTML = stateFromHTML(bufferText);

        // ignore default paste, only apply for plain text paste
        e.preventDefault();

        setTimeout(() => {
            const html = stateToHTML(blocksFromHTML);
            this.editor.summernote('pasteHTML', html);
        }, 10);
    }
    else {
        let bufferText = clipboardData.getData("text/html")

        // ignore default paste, only apply for plain text paste
        e.preventDefault();

        setTimeout(() => {
            const html = bufferText.replace(/^<html>\r?\n<body>\r?\n/, "")
                .replace(/\r?\n<\/body>\r?\n<\/html>$/, "")
            this.editor.summernote('pasteHTML', `<span>${html}</span>`);
        }, 10);
    }
}

相关问题