Makona Editor

A block-style editor for the web.

Blocks

Blocks Rock. Create content via different types of blocks, like Markdown blocks, image blocks, list blocks, etc. Making your own block types is easy!

<textarea>

textarea's are for text. Edit your content in a textarea like God intended. No, it's not WYSIWYG, but it is universally COMPATIBLE, which is pretty cool.

React JS

React makes it all so easy. Makona is built on top of the fantastic React javascript mini-framework from Facebook/Instagram, giving it a rock-solid foundation.

Project Goals

Makona is in the very early stages of life, and it's goals are a bit different than other block-syle editors, such as Sir Trevor.

Based on React JS
Work on wider range of platforms, including legacy browsers (IE8+) up to modern tablets
All editing is done in a <textarea> (as opposed to a contenteditable div), so we sacrifice WYSIWYG while actually editing, but we gain universal compatibility.

Get Involved!

If you would like to learn React JS and contribute to the development of Makona, especially the visual style, come see us on Github.

Demo

[
                  {
                    "id": 11,
                    "position": 1,
                    "type": "image",
                    "data": {
                      "src": "http://www.driventrainingsystems.com/wp-content/uploads/2012/12/cowbell.jpg"
                    }
                  },
                  {
                    "id": 12,
                    "position": 2,
                    "type": "markdown",
                    "data": {
                      "text": "# Markdown Block \n This is *italic* and **bold** \n \n* list a \n* list b\n\n and more  \n\n1. number list alpha\n1. number list beta\n"
                    }
                  },
                  {
                    "id": 14,
                    "position": 5,
                    "type": "code",
                    "data": {
                      "lang": "javascript",
                      "text": "function (arg1) {\n  console.log(\"Im in ur function\");\n  if (x == y) {\n    callMe();\n  }\n}\n"
                    }
                  },
                  {
                    "id": 15,
                    "position": 6,
                    "type": "document",
                    "data": {
                      "icon_url": "/assets/file_type_icons/pdf.png",
                      "title": "Small_doc.pdf",
                      "url": "https://dl.dropboxusercontent.com/u/2180623/Small%20doc.pdf"
                    }
                  }
                ]