Javascript js粘贴纯文本-但需要按钮来粘贴html

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

但是，一些客户仍然需要将html粘贴到富文本框中。我们已经使用插件向工具栏添加了“粘贴为html”按钮，但我们无法确定要向插件添加什么代码才能将剪贴板内容按原样粘贴到编辑器中。救命啊

我们很乐意删除粘贴纯文本选项，在工具栏上有一个“粘贴为纯文本”按钮，但我们也不知道如何做到这一点

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的解决方案，但我们正在寻找一个更轻量级的解决方案

相反，我们做了以下工作

将redactor设置为接受html（即我们没有设置粘贴明文选项）

使我们的按钮显示一个包含文本区域的模式对话框，用户将其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']
});

if（！RedactorPlugins）var RedactorPlugins={}；
RedactorPlugins.pasteAsPlainText={
init：函数（）{
//在单击时向工具栏添加调用showMyModal方法的按钮
this.buttonad（'pasteAsPlainText'，'pasteAsPlainText'，'this.showMyModal'）；
},
//粘贴文本按钮处理程序
showMyModal:函数（）{
//向DOM添加一个模态
var$modalHtml=$（'Paste content here to remove formattingInsert'）；
$（“正文”）.append（$modalHtml）；
//显示modal时执行回调
var callback=$.proxy（函数（）{
这个.selectionSave（）；
$（“#mymodal insert”）
.css（“宽度”，“100px”）
。单击（$.proxy（this.insertFromMyModal，this））；
$（“#mymodal textarea”）.focus（）；
}，这个）；
//使用回调初始化模态
this.modalInit（'粘贴为纯文本'，'#mymodal'，500，回调）；
},
insertFromMyModal:函数（html）{
这个.selectionRestore（）；
//从粘贴到文本区域的文本中删除格式
html=$（'#mymodal textarea'）.val（）；
var tmp=this.document.createElement（'div'）；
html=html.replace（/
| | |/gi，“\n”）；
tmp.innerHTML=html；
html=tmp.textContent | | tmp.innerText；
html=$.trim（html）；
html=html.replace（'\n'，'
'）；
html=这个.cleanParagraphy（html）；
//将我们从文本区域提取的文本插入富文本编辑器
这个.insertHtml（html）；
//关闭模式并从DOM中删除
这个。modalClose（）；
$（“#mymodal”）.remove（）；
}
};
$（“.richText”）.redactor({
插件：['pasteAsPlainText']
});

---

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

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

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

参考-

if（！RedactorPlugins）var RedactorPlugins={}；
RedactorPlugins.pasteasplaintext=函数（）
{
返回{
init:function（）
{
//在单击时向工具栏添加调用showMyModal方法的按钮
var button=this.button.add（'pasteasplaintext'，'pasteas Plain Text'）；
this.button.setAwesome（'pasteasplaintext'，'fa-paste'）；
this.button.addCallback（按钮，this.pasteasplaintext.showMyModal）；
},
getTemplate:function（）
{
//此函数用于为要添加的模态创建模板
返回字符串（）
+ ''
+ '  '
+'将内容粘贴到此处以删除格式'
+ '    '
+ '  '
+ '';
},
showMyModal:函数（）{
//获取并加载模板
this.modal.addTemplate（'pasteasplaintext'，this.pasteasplaintext.getTemplate（））；
this.modal.load（'pasteasplaintext'，'pasteasplaintext'，500）；
//创建取消和插入按钮
this.modal.createCancelButton（）；
var buttonPaste=this.modal.createActionButton（“粘贴”）；
按钮开始（'click'，this.pasteasplaintext.insertFromMyModal）；
//保存当前内容、显示模式并将焦点添加到文本区域
this.selection.save（）；
this.modal.show（）；
$（“#mymodal textarea”）.focus（）；
},
insertFromMyModal:函数（html）{
//从粘贴到文本区域的文本中删除格式
html=$（'#mymodal textarea'）.val（）；
var tmp=document.createElement（'div'）；
html=html.replace（/
| | |/gi，“\n”）；
tmp.HT
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();
        }
    };
};