Skip to content
Star

Modes

Inline Editor Two Instances

You can have more than one editor instance on the same page. However, this will not affect the editing experience. You can even drag and drop images from one editor to the other.

inline-two-instances

Try it yourself:

This is the first editor instance

book

This is the second editor instance

book

Edit in JSFiddle

HTML

<div id="froala-editor1">
  <p>This is the first editor instance</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>
<br/>
<div id="froala-editor2">
  <p>This is the second editor instance</p>
  <img src="https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" class="fr-fil" alt="book" width="150"/>
</div>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor1, div#froala-editor2').froalaEditor({
      toolbarInline: true,
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
    })
  });
</script>
File: 3816