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有一个“粘贴为纯文本”选项，可以通过Ctrl+shift+v或上下文菜单，如火狐和Chrome，我们会告诉客户这样做！

Answer 2

如果您最近刚刚从Red肾上腺v9升级到v10，您会发现上面的代码不起作用，因为recently现在已经更新了大部分现有的API并添加了新的模块。例如，.modalInit()、.selectionRestore()、.selectionSave()、.insertHtml()在v10中现在是.modal.load()、selection.restore()、.selection.save()等等。

我稍微修改了上面的代码，如果有人感兴趣，我会在这里添加它。如果需要，可以自由地编辑/优化它。

参考- http://imperavi.com/redactor/docs/how-to-create-modal/

if (!RedactorPlugins) var RedactorPlugins = {};

RedactorPlugins.pasteasplaintext = function()
{
    return {
        init: function()
        {
            // add a button to the toolbar that calls the showMyModal method when clicked
            var button = this.button.add('pasteasplaintext', 'Paste As Plain Text');
            this.button.setAwesome('pasteasplaintext', 'fa-paste');
            this.button.addCallback(button, this.pasteasplaintext.showMyModal);
        },
        getTemplate: function()
        {
            // this function creates template for modal that is to be added
            return String()
            + '<div id="mymodal">'
            + '  <section>'
            + '    <label>Paste content here to remove formatting</label>'
            + '    <textarea id="mymodal-textarea" style="width: 100%; height: 150px;"></textarea>'
            + '  </section>'
            + '</div>';

        },
        showMyModal: function () {
            // fetch and load template
            this.modal.addTemplate('pasteasplaintext', this.pasteasplaintext.getTemplate());
            this.modal.load('pasteasplaintext', 'Paste As Plain Text', 500);

            // create cancel and insert buttons
            this.modal.createCancelButton();
            var buttonPaste = this.modal.createActionButton('Paste');
            buttonPaste.on('click',this.pasteasplaintext.insertFromMyModal);

            // save current content, show modal and add focus to textarea
            this.selection.save();
            this.modal.show();            
            $("#mymodal-textarea").focus();

        },
        insertFromMyModal: function (html) {
            // remove formatting from the text pasted into the textarea
            html = $('#mymodal-textarea').val();
            var tmp = 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>');

            // close modal, restore content and insert 'plain' text
            this.modal.close();
            this.selection.restore();
            this.insert.html(html);
            $("#mymodal").remove();
        }
    };
};

Answer 3

如果你和我一样，正在寻找一个插件来把简单的文本粘贴到红影里，然后发现这个问题只是为了知道答案是很古老的，你会很高兴地发现答案实际上是在红演员的文档里。

事实证明，他们的例子插件与模式窗口正是，一个“粘贴干净的文本”插件。

你可以在这里找到它：https://imperavi.com/redactor/examples/creating-plugins/sample-plugin-with-modal-window/