redactor.js pastePlainText-但是需要按钮来粘贴html [英] redactor.js pastePlainText - but need button to paste html instead

问题描述

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

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 seems to work well.

但是，某些客户仍然需要将html粘贴到富文本框中.我们使用插件在工具栏上添加了以html格式粘贴"按钮，但是我们无法计算出要添加到插件中的代码以将剪贴板内容按原样粘贴到编辑器中.救命！

However SOME customers still need to paste html into the rich text boxes. We've added a "paste as html" button to the toolbar using a plugin but we can't work out what code to add to the plugin to paste the clipboard content as-is into the editor. Help!

我们几乎很乐意删除pastePlainText选项，而是在工具栏上具有粘贴为纯文本"按钮，但是我们也无法解决该问题.

We'd be almost as happy to remove the pastePlainText option and have a "paste as plain text" button on the toolbar instead, but we also can't work out how to do that.

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

推荐答案

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

We now have a solution to this.

我们在这里树错了树:出于安全原因，很难从剪贴板中读取.我们假定redactor.js可以执行此操作，但实际上，只有在用户通过Ctrl + v或上下文菜单自行启动粘贴之后，它才似乎从RTF编辑器中读取.这意味着单击按钮触发粘贴"并不容易.我相信至少有一个jquery插件可以尝试解决该问题，还有一堆涉及Flash的解决方案，但是我们正在寻求更轻巧的修复程序.

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. 将redactor设置为接受html(即，我们未设置pastePlainText选项).
2. 导致我们的按钮显示一个包含文本区域的模式对话框，用户将其html内容粘贴到该对话框中.粘贴内容后，我们将对其进行处理以去除html并保留换行符.

因此，想要保留格式的用户只需粘贴到RTE中，而想要以纯文本格式粘贴的用户单击新按钮.这是插件的代码.

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

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

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!

这篇关于redactor.js pastePlainText-但是需要按钮来粘贴html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！