Giri Giri - 3 months ago 43
Javascript Question

Can we add advanced text editors to a textarea in html page

Advanced text editors seems to provide text editing buttons within a

textarea
field, which can be similar to the bold, italics, quote and add picture buttons. I'm well aware of how to add text-editors (like
wysiwig
,
tinymce
etc.,) within a
Content management systems
(drupal, joomla), but I'm not sure whether we can add those
API
s to our simple html pages that contains a textarea field.

Does any one have any clue on how to add those APIs??

Answer

Use Quill - A cross browser rich text editor with an API.

From the docs:

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <div>Hello World!</div>
</div>

<!-- Include the Quill library -->
<script src="http://quilljs.com/js/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor');
  editor.addModule('toolbar', { container: '#toolbar' });
</script>
Comments