Markdown online editor

First post the editor address, covering the most markdown syntax quick operation, real-time compilation real-time preview, support direct export md format files, support weibo map bed. Pure front-end implementation, don’t worry about data being stored in the background. Mobile terminal adaptation is not performed. PC is recommended. Welcome you have writing requirements of the big guy trial, put forward valuable advice.

Background & Preface

Some MD editors on the market have real-time preview, such as Digging gold, no action buttons (shortcuts, huh), which is not very convenient to use, while the action buttons of simple book are limited by the number of simple book drills. In fact, the MD editor of Youdao Dictionary does a good job, but recently, I have encountered a problem that I cannot input Chinese, so I discard it. So simply their own masturbation, you can meet the needs of their own writing. Even if it is difficult to use, you have to suffer because you do not have a Windows device, so please modify the scrollbar style yourself.

technology

vue less iview markdown-it iconfont

The plug-in

Markdown-it-mark feature markdown-it-emoji emoji parsing highigh.js code highlighting markdown-it-task-checkbox checkbox feature markdown-it-footnote Footnote function

Plug-in effect

== Highlight == : SMILing_IMP:

  • text
  • text

    [1] [2]

The Nuggets don’t support tags and emojis.

The principle of

In the editor input component watch input content changes, there is a change in real-time call markdown-it render function, and real-time update in localStorage, to prevent page misoperation is jumped out and then return to the painstaking writing of the content is gone. At the same time, it can also achieve the need to open the page to continue to write the next time. The draft is cleared after the file is exported. Because it does not call the interface to store data, it does not do the function anti-shake processing. If you need to introduce it, please add it by yourself. The address of weibo map bed is from a tool page, I feel that the brother who wrote that tool is also from other places, haha (kidding), post the address of the tool: map bed tool

Download package

Git clone [email protected]: ch957869975 / md – editor. The git NPM run dev or NPM run build open port 8080 can see a preview

Interesting point

And there are a couple of interesting points that I’ll mention when I do this.

Inserts character at cursor position

Document selection is supported by IE, and most browsers support selectionStart and selectionEnd. These two properties are dynamically concatenated with the substring method of the string. Note that the string concatenated with this method does not trigger bidirectional binding of variables, so I manually trigger the input event for the textarea as follows:

 document.querySelector('textarea').dispatchEvent(new Event('input'))
Copy the code

Files are generated and downloaded at the front end

Downloads are not uncommon in front-end development, but file writing is probably not, and I would never have done file generation if I hadn’t written it. The code is as follows:

if (!this.editorContent || !window.localStorage.getItem('MarkdownDraft')) {
     return this.$Notice.error({ title: 'You haven't written anything yet.'})}const content = this.editorContent
const elem = document.createElement('a');
elem.download = 'draft.md';
elem.style.display = 'none';
const blob = new Blob([content], { type: 'text/plain' });
elem.href = URL.createObjectURL(blob)
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
setTimeout((a)= > {
   this.editorContent = ' '
   window.localStorage.removeItem('MarkdownDraft')},300)
Copy the code

The idea is clear: generate only when there is a value, to avoid generating an empty file. After the Blob object is used to generate the corresponding content, create an invisible A tag and add the href and Download attributes to it. Manually trigger the click event and remove the tag. But you need to consider compatibility. Here is the support for A. download, IE does not support!! .

No way. Make a judgment call.

 if(! ('download' in document.createElement('a'))) return this.$Notice.error({ title: 'Browser not supported' })
Copy the code

Maybe what about Internet Explorer? Answer: : 9102 years, you still use IE, do not abandon you abandon who?

Component communication

Communication between components, because of laziness, using bus.js, the actual code is only two lines

import Vue from 'vue'
export default new Vue()
Copy the code

The principle is that all components mounted on the same instance can trigger events on the instance. In theory, communication between any components can be realized regardless of the component hierarchy. However, this approach is not recommended, because it will make your logic jump too much, which is reflected in your code. The events bound by component A on the bus can not be found where to trigger, and the events triggered by component B can not be found where to bind, so it is difficult to maintain.

conclusion

Simple function, simple technology, simple UI, simple deployment. A simple little project, depending on whether you want to do it or not.

The editor address and source address are posted here. Have the cheek to ask a star. Blog address

Not everything is going to work out, but everything is worth a try. Come on!

Ps: The following two footnotes correspond to the plugin effect demonstration, do not worry about.

  1. Footnote 1 ↩ ︎

  2. Footnote 2 ↩ ︎