Fork me on Github

Examples

Minimal needed code:

<div id="editor" data-placeholder="Go on, start editing..."></div>
<script>
  var editor = new wysihtml5.Editor('editor');
</script>

With 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>

<script>
  var editor = new wysihtml5.Editor('editor', {
    toolbar: 'toolbar',
    parserRules:  wysihtml5ParserRules // defined in file parser rules javascript
  });
</script>

Iframe/textarea mode:

Suitable for turning existing textareas into something more or if better security and more reliable containment is needed that an <iframe> can offer.
<!-- 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 -->
<textarea id="editor" placeholder="Go on, start editing..."></textarea>

<script>
  var editor = new wysihtml5.Editor('editor', {
    toolbar: 'toolbar',
    parserRules:  wysihtml5ParserRules // defined in file parser rules javascript
  });
</script>

Binding by elements instead of ID:

<!-- toolbar with suitable buttons and dialogues -->
<div class="toolbar">
  <a data-wysihtml5-command="bold">bold</a>
</div>

<!-- element to edit -->
<textarea class="editor" placeholder="Go on, start editing..."></textarea>

<script>
  var editor = new wysihtml5.Editor(document.querySelector('.editor'), {
    toolbar: document.querySelector('.toolbar'),
    parserRules:  wysihtml5ParserRules // defined in file parser rules javascript
  });
</script>

Toolbar with dialogue:

<!-- toolbar with suitable buttons and dialogues -->
<div class="toolbar">
  <a data-wysihtml5-command="createLink">link</a>
  <div data-wysihtml5-dialog="createLink" style="display: none;">
    Link: <input data-wysihtml5-dialog-field="href" value="http://">
    <a data-wysihtml5-dialog-action="save">OK</a>
    <a data-wysihtml5-dialog-action="cancel">Cancel</a>
  </div>
</div>

<!-- element to edit -->
<textarea class="editor" placeholder="Go on, start editing..."></textarea>

<script>
  var editor = new wysihtml5.Editor(document.querySelector('.editor'), {
    toolbar: document.querySelector('.toolbar'),
    parserRules:  wysihtml5ParserRules // defined in file parser rules javascript
  });
</script>