Add WYSIWYG HTML Editor to Textarea on Your Website


The full form of WYSIWYG is What You See Is What You Get, it lets users see what the end result will look like when the document is printed. Basically, WYSIWYG editor is driven by JavaScript that lets users enter the formatted text. The WYSIWYG editor is converting the formatted text to HTML when the web form is submitted to the server.

When you need to accept formatted text content or HTML content from the users on your website, using WYSIWYG editor to textarea is required. There are many jQuery plugins are available for adding WYSIWYG editor to textarea. In this article, we’ll provide the information about the best WYSIWYG HTML editor and show how to add HTML editor to textarea in the web page.

TinyMCE is web-based WYSIWYG editor which enables you to convert HTML textarea fields or other HTML elements to an editor. Here we’ll show you the simple steps to add TinyMCE editor to your website by writing minimal JavaScript Code.

Download the latest version of TinyMCE jQuery plugin from here – Download TinyMCE. Extract it and placed into the web application directory. Also, you can get all files together in our source code package.

HTML Code

Textarea HTML where the WYSIWYG HTML Editor would be added.

<textarea name="myTextarea" id="myTextarea"></textarea>

JavaScript Code

Include the TinyMCE JS file.

<script src='tinymce/tinymce.min.js'></script>

The following example code will replace textarea with TinyMCE editor instance by passing the selector #myTextarea. This code provides some default features of TinyMCE editor for basic uses.

tinymce.init({
    selector: '#myTextarea'
});
wysiwyg-editor-tinymce-basic-features-codexworld

This example code displays all plugins available in TinyMCE and it is for advanced use.

tinymce.init({
    selector: '#myTextarea',
    height: 500,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true
});
wysiwyg-editor-tinymce-advanced-features-codexworld

Saving TinyMCE Editor Content

Once the <form> is submitted, TinyMCE editor content will submitted to the form action URL as HTML. You can get the HTML content using $_POST variable in PHP.

$_POST['myTextarea']

1 Comment

  1. Njoku Okechukwu Val Said...

Leave a reply

Connect With CodexWorld