SimpleMDE, a Markdown editor that can be used in both browsers and electronics
Hello.
I'm Mandai, in charge of Wild on the development team.
There are various rich text editors that can be used on browsers, but when it comes to editors for Markdown, I feel like there are still very few options.
This time, we will introduce SimpleMDE, which is easy to install.
introduction
A demo here , and I get the impression that it is quite simple and has the minimum necessary functions.
Distribution from CDN is available, so use that to load the module.
All you have to do now is create a textarea in the HTML and update simpleMDE to create 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 it on a website, but if you combine it with something like electron and turn it into a native desktop app, I think it will have a wider range of uses.
Use from node.js
Next, I will introduce how to use simpleMDE from electron
Here, I would like to try installing the module from npm and displaying it.
First, install it.
npm install simplemde
Make the entry point JavaScript look like the following.
// 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's 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 to read from HTML.
// index.js var simplemde = require('/path/to/simplemde.min.js'); var editor = new simplemde();
After preparing and compiling the above files, we were able to display an editor with the same style as the one displayed in the browser.
Recommendation of modification
simleMDE is also quite extensible, and menus can be added easily.
the Font Awesome as the menu icon , so there is no need to prepare an image each time.
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 incorporate the saving mechanism yourself, but the settings on the editor side are now complete.
If you register additional menus, the default menus will disappear, so you will need to register them as well, but the settings can be completed very easily.
Trouble
When used normally, it seems easy to use, but when combined with other CSS frameworks, the layout becomes noticeably distorted.
For example, foundation , a border will be displayed on every line in the area surrounded by three back quotes on the preview screen.
I feel like the CSS integration is a bit lax, but since it doesn't seem to have an interpreter such as sass installed, you'll have to create and overwrite the CSS yourself.
Also, when displaying markdown and preview side by side side by side, it automatically becomes full screen.
When I check the CSS, I see that it is specified with !important, so I think there is room for improvement, or I would like to have a mechanism that allows me to control it.
In terms of speed, when the amount of text increases, the processing becomes slower, but I feel that this is a problem with the module called CodeMirror that is used inside, so I would like to improve the speed. If you place importance on aspects, you may want to consider other libraries.
summary
This was an introduction to simpleMDE, which allows you to easily create a Markdown editor.
I feel that the combination with electron is very effective, so I think it would be easy and rewarding to try creating a Markdown editor as a study for electron.
That's it.