[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Successor to CentOS] AlmaLinux OS server construction/migration service

[For WordPress only] Cloud server “Web Speed”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Reservation system development] EDISONE customization development service

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[Global exclusive service] Beyond's MSP in North America and China

[YouTube] Beyond official channel “Biyomaru Channel”

SimpleMDE, a Markdown editor that can be used in both browsers and electronics

2017.05.19

Web system development

table of contents

1 introduction
2 Use from node.js
3 Recommendation of modification
4 Trouble
5 summary

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.

If you found this article helpful , please give it a like!

[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

The person who wrote this article

About the author

Yoichi Bandai

My main job is developing web APIs for social games, but I'm also fortunate to be able to do a lot of other work, including marketing.
Furthermore, my portrait rights in Beyond are treated as CC0 by him.

Effective use of Backlog's API [RGames (Rakuten Games)] I think browser games will come in the future