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

Question

我们的大多数客户提示格式从 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
 });

Answer 1

我们现在有了解决方案。

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

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

1. 将编辑器设置为接受 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)提供“粘贴为纯文本”选项，我们只会告诉客户这样做!