Search code examples
javascriptapitinymcetextareawysiwyg

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 APIs to our simple html pages that contains a textarea field.

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


Solution

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