Markdown Editor

27 October 2021 by mithril

Level: beginner • Mithril.js Version: latest

3rd-party editor m.mount m.trust markdown official

This example shows a very simple markdown editor using marked.js. Here we can also see how easy it is with Mithril.js to integrate and use 3rd-party libraries. The example was taken from the official website at https://mithril.js.org/examples.html and slightly modified.

Live Example #

JavaScript #

//model
var state = {
	text: "# Markdown Editor\n\nType on the top panel and see the result on the bottom panel",
	update: function(value) {
		state.text = value
	}
}

//view
var Editor = {
	view: function() {
		return [
			m("textarea.input", {
				oninput: function (e) {
				  state.update(e.target.value)
        },
				value: state.text
			}),
			m(".preview", m.trust(marked(state.text))),
		]
	}
}

m.mount(document.body, Editor)

CSS #

html, body {
    height: 100%;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0 0 10px;
}

#editor {
    display: flex;
    height: 100%;
}

.input, .preview {
    box-sizing: border-box;
    height: 50%;
    margin: 0;
    padding: 10px;
    width: 100%;
}

.input {
    border: 0;
    border-bottom: 1px solid #ccc;
    outline: none;
    resize: none;
}

The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.

Besides Mithril.js' hyperscript function m() we can see different Mithril.js API methods like m.trust or m.mount.

The example was contributed by mithril and last modified on 27 October 2021. Click here to see more examples contributed by the author.

Contribute #

If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.

See more code examples  •  Edit this example on GitHub