Fork me on Github
Advanced

THIS is the typewriter for the modern web.

Go on, start typing here ...

1. get scripts

bower install wysihtml

or download the latest release  from Github.

2. include the scripts in your HTML

<!-- wysihtml core javascript with default toolbar functions --> 
<script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script>

<!-- rules defining tags, attributes and classes that are allowed -->
<script src="bower_components/wysihtml/parser_rules/advanced_and_extended.js"></script>

3. create the element to edit and toolbar

<!-- toolbar with suitable buttons and dialogues -->
<div id="toolbar">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">H1</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p">P</a>
</div> <!-- element to edit -->
<div id="editor" data-placeholder="Go on, start editing..."></div>

4. initialize editor

<script>
  var editor = new wysihtml5.Editor('editor', {
    toolbar: 'toolbar',
    parserRules: wysihtml5ParserRules
  });
</script>

See more code examples or read our wiki for configuration and available commands.

What is wysihtml.

It’s an open source, community developed wysiwyg html rich text editor. Any web developer can grab it and use it in her projects.

What's good about it.

The source code of the editor is completely library agnostic — no jQuery, Prototype etc. required. Wysihtml is curated by Voog team, who forked it from Xing. Thank you!

features.

  • Fast and lightweight

  • Auto-linking of urls as-you-type

  • Valid, semantic HTML5 (even when pasting from Word)

  • No iframes required

  • No jQuery required

  • Modular, add your own tools

Chrome
1+
Firefox
3.5+
IE 9+
Opera
12+
Safari
5+
Mobile
(all)
Wysihtml is an open source project curated by the Voog team