redactor.js PastePlainText - 但需要按钮来粘贴 html

我们的大多数客户抱怨从 Word 到我们的 redactor.js 富文本编辑器字段的格式设置。我们升级为使用pastePlainText 设置，这似乎效果很好。

然而，有些客户仍然需要将 html 粘贴到富文本框中。我们使用插件在工具栏上添加了一个“粘贴为 html”按钮，但我们无法确定要添加到插件中的代码以将剪贴板内容按原样粘贴到编辑器中。帮助！

我们几乎同样乐意删除pastePlainText选项并在工具栏上有一个“粘贴为纯文本”按钮，但我们也无法弄清楚如何做到这一点。

RedactorPlugins.pasteAsHtml = {
    init: function () {
        this.buttonAdd('pasteAsHtml', 'Paste as HTML', this.testButton);
    },
    testButton: function (buttonName, buttonDOM, buttonObj, e) {
       // What do we do here?
    };

$(".richText").redactor({
    plugins: ['pasteAsHtml'],
    pastePlainText: true
 });

我们现在有一个解决方案。

我们在这里找错了对象：出于安全原因，很难从剪贴板中读取内容。我们假设 redactor.js 有能力做到这一点，但实际上它似乎只有在用户通过 Ctrl+v 或上下文菜单启动粘贴后才从富文本编辑器中读取。这意味着单击按钮来触发“粘贴”并不容易。我相信至少有一个 jquery 插件试图解决这个问题，并且有一系列涉及 Flash 的解决方案，但我们正在寻求更轻量级的修复。

相反，我们做了以下事情。

1. 设置 redactor 接受 html（即我们没有设置 PastePlainText 选项）。
2. 使我们的按钮显示一个包含文本区域的模式对话框，用户可以将其 html 内容粘贴到其中。粘贴内容后，我们对其进行处理以去除 html 并保留换行符。

因此，想要保留格式的用户只需粘贴到 RTE 中，想要粘贴为纯文本的用户单击“新建”按钮。这是该插件的代码。

if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.pasteAsPlainText = {
    init: function () {
        // add a button to the toolbar that calls the showMyModal method when clicked
        this.buttonAdd('pasteAsPlainText', 'Paste as plain text', this.showMyModal);
    },
    // pasteAsPlainText button handler
    showMyModal: function () {
        // add a modal to the DOM
        var $modalHtml = $('<div id="mymodal" style="display:none;"><section><label>Paste content here to remove formatting</label><textarea id="mymodal-textarea" style="width: 100%; height: 150px;"></textarea></section><footer><button class="btn btn-primary" id="mymodal-insert" style="color:#fff;">Insert</button></footer></div>');
        $("body").append($modalHtml);
        // callback executed when modal is shown
        var callback = $.proxy(function () {
            this.selectionSave();
            $('#mymodal-insert')
                .css("width", "100px")
                .click($.proxy(this.insertFromMyModal, this));
            $("#mymodal-textarea").focus();
        }, this);
        // initialize modal with callback
        this.modalInit('Paste as plain text', '#mymodal', 500, callback);
    },
    insertFromMyModal: function (html) {
        this.selectionRestore();
        // remove formatting from the text pasted into the textarea
        html = $('#mymodal-textarea').val();
        var tmp = this.document.createElement('div');
        html = html.replace(/<br>|<\/H[1-6]>|<\/p>|<\/div>/gi, '\n');
        tmp.innerHTML = html;
        html = tmp.textContent || tmp.innerText;
        html = $.trim(html);
        html = html.replace('\n', '<br>');
        html = this.cleanParagraphy(html);
        // insert the text we pulled out of the textarea into the rich text editor
        this.insertHtml(html);
        // close the modal and remove from the DOM
        this.modalClose();
        $("#mymodal").remove();
    }
};

$(".richText").redactor({
    plugins: ['pasteAsPlainText']
});

顺便说一句，如果 Internet Explorer 通过 Ctrl+shift+v 或在 Firefox 和 Chrome 等上下文菜单上提供“粘贴为纯文本”选项，我们就会告诉客户这样做！