redactor.js pastePlainText - but need button to paste html instead

前端 未结 3 1979
误落风尘
误落风尘 2021-01-15 11:53

Most of our customers complain about formatting carried across from Word to our redactor.js rich text editor fields. We upgraded to use the pastePlainText setting, which see

相关标签:
3条回答
  • 2021-01-15 12:29

    If you, like me, were looking for a plugin to paste simple text into Redactor and found this question only to learn that the answers are very old, you'd be happy to find out that the answer is actually in the Redactor docs.

    It turns out that their example plugin with modal window is exactly that, a "paste clean text" plugin.

    You can find it here: https://imperavi.com/redactor/examples/creating-plugins/sample-plugin-with-modal-window/

    0 讨论(0)
  • 2021-01-15 12:34

    We now have a solution to this.

    We were barking up the wrong tree here: for security reasons it's difficult to read from the clipboard. We had assumed that redactor.js has the ability to do this, but in fact it appears to read from the rich text editor only after the user has initiated the paste themselves via Ctrl+v or the context menu. That means clicking a button to trigger a "paste" isn't easy. I believe there's at least one jquery plugin that attempts to solve that problem, and a bunch of solutions involving Flash, but we're after a more lightweight fix.

    Instead, we did the following.

    1. Set redactor to accept html (ie we didn't set the pastePlainText option).
    2. Caused our button to show a modal dialog containing a textarea, into which the user pastes their html content. Once the content is pasted we process it to strip out html and retain line breaks.

    So users wanting to retain formatting just paste into the RTE, and users who want to paste as plain text click the new button. Here's the code for the plugin.

    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']
    });
    

    By the way, if Internet Explorer had a "paste as plain text" option available via Ctrl+shift+v or on the context menu like Firefox and Chrome we would just have told customers to do that!

    0 讨论(0)
  • 2021-01-15 12:53

    If you've just recently upgraded from Redactor v9 to v10, you will find that the above code does not work since Redactor has now updated most of its existing APIs and added new modules. For example, .modalInit(), .selectionRestore(), .selectionSave(), .insertHtml() from v9 is now .modal.load(), selection.restore(), .selection.save(), etc in v10.

    I've modified the above code slightly and am adding it here if anybody's interested. Feel free to edit/ optimize it if needed.

    Reference - 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();
            }
        };
    };
    
    0 讨论(0)
提交回复
热议问题