Medium.js – control of content editable

Control of content editable with the Medium.js library.

Medium.js – nice way of content editable

A tiny JavaScript library for making content editable beautiful (Like Medium’s editor). Medium.js keeps HTML code within content-editable semantic, simple, and clean. Medium.js also supports placeholders, automatic HR (or BR, or P) creation, events, hotkeys, simple & complex element injection, and more!

It’s cross-browser. The library js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE8+. Browser support is constantly improving!

Key features

– Great for writing titles, comments, or entire articles

– Much more expressive and customizable than input or textarea

– WYSIWYG editor or Toolbar ready

– Rich text editing with hotkeys (cmd/ctrl+[b,u,i])

– Placeholders

– Inline, partial, and rich editors

– Automatics HR (or BR, or P) tag insertion on two empty paragraphs in succession

– Free & Open Source

– Modern browser compliant

Demo: control of content editable with Medium.js
Demo: control of content editable with Medium.js

It’s easy to use!

See an example below:

...
    <head>
        <script src="rangy-core.js"></script>
        <script src="rangy-classapplier.js"></script>
        <script src="undo.js"></script>
        <script src="medium.js"></script>
        <link rel="stylesheet" href="medium.css">
    </head>
    <body>
        <div id="editor"></div>
    
        <script>
            new Medium({
                element: document.getElementById('editor')
            });
        </script>
    </body>
...

License: MIT

Homepage:

http://jakiestfu.github.io/Medium.js

GitHub:

https://github.com/jakiestfu/Medium.js

You may also like:

SCEditor – a lightweight jQuery WYSIWYG editor

A nice, editable jQuery table plugin with Bootstrap_

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn3Pin on Pinterest1