“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Article copy assistant, one-click copy to wechat public platform, Zhihu download Markdown

Why write this script

Recently opened a front-end public account, need to push some high-quality articles, but due to the relationship of time, the original content is too little, the conventional approach is to reprint some excellent articles to their own public account.

process

Using scripted flow

HTML turn markdown

www.bejson.com/convert/htm…

devtool.tech/html-md

Github.com/mixmark-io/…

use

  • Step 1: Install the Chrome Oilmonkey extension
  • Step 2: Install the article copy assistant

The implementation code

Most of the code comes from Markdown-nice

Javascript implementation download markdown file, nuggets are using nuxt.js to implement SSR, so all data will be stored in the global object NUXT,

__NUXT__. State. The column. Entry. Article_info. Mark_content so that you can get directly to the markdown file content,

However, if a user writes an article using a rich text editor instead of markdown, there will be no mark_content data, and this will involve turning HTML to Markdown

We can do this using the Turndown library.

Download file js

export const downLoad = (filename, code) = > {
  // The file name of the download
  var file = new File([code], filename, {
    type: "text/markdown"});// Create hidden downloadable links
  var eleLink = document.createElement("a");
  eleLink.download = filename;
  eleLink.style.display = "none";
  // The downloaded content is converted to a BLOB address
  eleLink.href = URL.createObjectURL(file);
  // Trigger the click
  document.body.appendChild(eleLink);
  eleLink.click();
  // Then remove
  document.body.removeChild(eleLink);
};
Copy the code

Replication implementation

Use clipboard API event. The clipboardData. SetData () this is the modern browsers support API

A simple example

document.addEventListener('copy'.function(e){
  e.clipboardData.setData('text/plain'.'foo');
  e.preventDefault(); // Block browser default events
});
Copy the code

With this code, you can modify the clipboard contents in JavaScript, preventing browser default events

document.getElementById("copyBtn").onclick = function() {
  document.execCommand('copy');
}
Copy the code

Then you need to trigger replication

The final code

export const copySafari = (text) = > {
  / / for input
  let input = document.getElementById("copy-input");
  if(! input) {// Input cannot be hidden with CSS, it must exist inside the page.
    input = document.createElement("input");
    input.id = "copy-input";
    input.style.position = "absolute";
    input.style.left = "-1000px";
    input.style.zIndex = "1000";
    document.body.appendChild(input);
  }
  // make input select a character that doesn't matter
  input.value = "NOTHING";
  input.setSelectionRange(0.1);
  input.focus();

  // Copy triggered
  document.addEventListener("copy".function copyCall(e) {
    e.preventDefault();
    e.clipboardData.setData("text/html", text);
    e.clipboardData.setData("text/plain", text);
    document.removeEventListener("copy", copyCall);
  });
  document.execCommand("copy");
};
Copy the code

TODO

More platforms will be needed in the future

  • Jane’s book
  • Think no
  • CSDN

Github

tampermonkey-copy-helper

That’s all the content of this article. I hope this article is helpful to you. You can also refer to my previous articles or share your thoughts and experiences in the comments section.