CODEWITHSUNDEEP
javascriptapitinymcetextareawysiwyg
giri
giri

Reputation: 2844

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

Upvotes: 3

Views: 22101

Answers (2)

Eben Watts
Eben Watts

Reputation: 141

<!DOCTYPE html>
<html>
<head>
   <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
   <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
   <textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

Copy & paste the snippet below into your HTML page

Upvotes: 1

James Hibbard
James Hibbard

Reputation: 17795

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>

Upvotes: 9

Related Questions