chunchunmaru-mde

chunchunmaru markdown editor: Simple and lightweight and responsive markdown editor component based on vanilla js & marked.

Features

• Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown)
• Full-featured: Real-time Preview, Code syntax highlighting, Toolbar,...
• Compatible with all major browsers (IE8+).

Features in mind:

• Support @mention
• Drag & drop image upload

Demo page

Download & Install

Github Download

https://github.com/madeyoga/chunchunmaru-mde/releases

Usages

Create a basic chunchunmaru markdown editor

<!-- Load chunchunmaru theme -->
<link rel="stylesheet" type="text/css" href="dist/chunchunmaru-mde-dracula.min.css">

<div id="editor-container"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.7/purify.min.js"></script>
<script type="text/javascript" src="dist/chunchunmaru-mde.min.js"></script>
<script type="text/javascript">
	// Use default settings
	var editor = new chunchunmaru("editor-container", {});
</script>

Image Upload

chunchunmaru will use fetch api to post image to imageUploadUrl. if imageUploadUrl is null, uploaded image will be converted into base64 string.

Settings

{
	csrfToken: "x#90#alj$%...", // if your server requires csrf token to post
	imageUploadUrl: "yourwebsite.com/api/post_image/",
}

JSON data

{
	success: 0 | 1, 
	message: "upload success or upload fail, error message, etc.",
	url: "yourwebsite.com/uploaded/image.png"
}

Settings

chunchunmaru markdown editor settings and default values:

{
	attributes: {
	  id: "editor",
	  name: "editor",
	  placeholder: "Start writting!",
	},
	csrfToken: null, // Will be used when uploading image to imageUploadUrl setting.
	gfm: true,
	imageUploadUrl: null, // Upload url.
	livePreview: false, // Requires marked
	livePreviewContainer: "",
	previewCodeHighlight: false, // Requires highlight.js
	sanitize: true,
	saveHTML: false,
	toolbars: [ // Remove item to exclude.
	  'bold',
	  'italic',
	  'strikethrough',
	  '|',
	  'link',
	  'blockquote',
	  'code',
	  'image',
	  'uploadImage'
	  '|',
	  'center',
	  'ol',
	  'ul',
	  '|',
	  'h1',
	  'h2',
	  'h3',
	  'h4',
	  'h5',
	  'h6',
	  '|',
	  'undo',
	  'redo',
	],
};

Dependents

• Live preview: marked.js / marked repo
• Code syntax highlighting: highlight.js / highlight.js repo
• Sanitize output HTML: DOMPurify
• Iconify using Material Design Icons

Contribute

• Fork the repository!
• Clone your fork: git clone https://github.com/your-username/chunchunmaru-mde.git
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :>