Last year, I made a vUE project of public cloud. There is a function in the project, which is to paste the DOM content in the manuscript into the Baidu editor, and then basically restore the style in the manuscript in the editor. Let’s take a look at the project screenshots. Copy the previous content in the toolCopy from the editorAfter receiving the request, I first looked for a plug-in that could copy text to the paste board. After research, clipboard.js became the first choice.The use of clipboard.js is as follows.

1. Install by NPM install

2. Import Clipboard to the page

Clipboard can be used in two different ways: target (innerHtml) and text (text). The target is the innerHtml of the DOM string under the node. The data-clipboard field is written to the element that needs to trigger the copy function. The differences are as follows:

This is a copy of innerHtml in contentArea2

This is to copy the string inside the text double quotes.

Create a Clipboard object by calling new Clipboard().

Paste is the class name of the node from which you want to start copying events.

5, replication function, through Clipboard provided on method to listen to the success of replication, and trigger the successful callback event

Here the e.c. with our fabrication: learSelection (); To clear the selected style in the target element after the copy. 6. You can also listen for replication failures

This is where you can copy and paste to your clipboard.

However, the requirement is to paste it into baidu editor, continue to develop, and find that most DOM strings can be displayed normally in Baidu editor. Then the problem came again, I found that some pasted content would have style changes, audio tags could not play and other problems.

Select the source code in the editor and compare the two sides of the source code to find that the DOM string pasted into the editor will be changed, such as the percentage of the width unit, audio tag, etc. The workaround: Replace the replaced fields in the DOM string before it is pasted out, and then replace the contents of the DOM string back in the configuration file of the editor.

So let’s copy that substitution, let’s say I replace audio with audio1The replacement in the editor, in the ueditor.all.js file, in the UE.commands[‘ inserthtml ‘] configuration, adds the replacement back code

To solve this problem, you can restore most of the manuscript style.