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

我们的大多数客户都抱怨从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. 设置redactor接受html（即我们没有设置pastePlainText选项）。
2. 导致我们的按钮显示包含textarea的模式对话框，用户将其粘贴到其中。 粘贴内容后，我们会处理它以去除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 = $('
Paste content here to remove formatting
Insert
'); $("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(/
|<\/H[1-6]>|<\/p>|<\/div>/gi, '\n'); tmp.innerHTML = html; html = tmp.textContent || tmp.innerText; html = $.trim(html); html = html.replace('\n', '
'); 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等上下文菜单上使用，我们就会告诉客户这样做！

Answer 2

如果您刚刚从Redactor v9升级到v10，您会发现上面的代码不起作用，因为Redactor现在已经更新了大部分现有API并添加了新模块。 例如，v9中的.modalInit（），。selectRestore（）,. selectSave（），。insertHtml（）现在是v10中的.modal.load（），selection.restore（）,. selecta.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() + '
' + ' 
' + ' Paste content here to remove formatting' + ' ' + ' 
' + '
'; }, 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(/
|<\/H[1-6]>|<\/p>|<\/div>/gi, '\n'); tmp.innerHTML = html; html = tmp.textContent || tmp.innerText; html = $.trim(html); html = html.replace('\n', '
'); // close modal, restore content and insert 'plain' text this.modal.close(); this.selection.restore(); this.insert.html(html); $("#mymodal").remove(); } }; };