SimpleMDE: A Markdown editor that can be used in both browsers and electron
table of contents
Hello,
I'm Mandai, the Wild Team member of the development team.
There are many rich text editors that can be used in browsers, but when it comes to editors for Markdown, it seems like there are still very few options
This time, we will introduce SimpleMDE, which is easy to implement
introduction
a demo here , and it seems quite simple and has all the essential functions.
A CDN distribution is available, so we will use that to load the module.
All that's left to do is create a textarea in the HTML and create a new simpleMDE, and you'll have a simple Markdown editor!
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> test </title><link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"></head><body><textarea></textarea><script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script><script> var simplemde = new SimpleMDE(); </script></body></html>
It may be difficult to use on a website, but if you combine it with electron or something similar and turn it into a native desktop application, I think the uses for it will expand
Use from node.js
Next, I will show you how to use simpleMDE from electron
Here, I would like to try installing a module from npm and displaying it
First, install it
npm install simplemde
The entry point JavaScript should look something like this:
// app.js 'use strict'; var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; var mainWindow = null; app.on('window-all-closed', () => { if (process.platform != 'darwin') app.quit(); }); app.on('ready', () => { mainWindow = new BrowserWindow(); mainWindow.on('closed', ()=>{ mainWindow = null; }); mainWindow.loadURL('file://' + __dirname + '/index.html'); });
Next, create index.html at the same level.
This is almost the same as the previous HTML, but it is even simpler.
<!-- index.html --><!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> test </title><link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"></head><body><textarea></textarea><script src="./index.js"></script></body></html>
Create index.js, which will be loaded from HTML
// index.js var simplemde = require('/path/to/simplemde.min.js'); var editor = new simplemde();
After preparing the above files and compiling them, an editor with the same style as the one displayed in the browser was displayed
Recommendations for modification
simleMDE is quite extensible, and adding menus is easy.
Font Awesome for menu icons , so you don't need to prepare images for each one.
Let's try adding a save button
// index.js var simplemde = require(/path/to/simplemde.min.js''); var editor = new simplemde({ toolbar: { { name: 'save', action: save_content, className: 'fa fa-save', title: 'save', }, '|', 'bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link', 'image', '|', 'preview', 'side-by-side', 'fullscreen', '|', 'guide', } }); function save_content(){ // some processes }
You will need to implement the saving mechanism yourself, but this completes the setup on the editor side.
If you register additional menus, the default menus will disappear, so you will need to register them as well, but the setup is very easy to complete.
Troublesome points
For normal use, it seems easy to use, but when combined with other CSS frameworks, layout issues become noticeable.
For example, foundation , a border appears on every line in the preview screen between three backquotes.
The CSS integration seems a little sloppy, and since it doesn't seem to use an interpreter like Sass, you'll need to create and overwrite the CSS yourself.
Also, when using side-by-side display, which displays markdown and the preview side by side, it automatically switches to full screen.
Checking the CSS, this is also specified with !important, so there's room for improvement, and I'd like a mechanism to control this.
In terms of speed, processing becomes slower as the amount of text increases, but I think this is a problem with the CodeMirror module used internally, so if speed is important to you, you might want to consider other libraries
summary
This concludes my introduction to simpleMDE, which allows you to easily create a Markdown editor.
I think that combining it with electron is extremely effective, so creating a Markdown editor as a practice project using electron is both easy and gives a sense of accomplishment.
That's all
0
Loading...0 
The person who wrote this article
About the author
