How To Install Tinymce On Your Website

Are you a web developer and want to implement tinymce on your website to make it easy during writing and posting of content to be viewed with some awesome formatting like text color,text size,tables,inserting image,paragraph without any coding,tinymce will do that for you.Today we are going to take a little tutor on how to install tinymce on your website automatically without any coding required.

In this tutorial we are going to be looking at how to install tinymce within a shortest period of time and get it running on your website.

Tinymce can be installed in two ways and we are taking them step by step.

The first one is running it on the cloud.Running tinymce on the cloud just copy and paste this code on your HTML head tags

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>    <script>tinymce.init({ selector:'textarea' });</script>

This is how is going to be placed on your HTML as shown below

<!DOCTYPE html>  <html>  <head>    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>    <script>tinymce.init({ selector:'textarea' });</script>  </head>  <body>    <textarea>Next, get a free TinyMCE Cloud API key!</textarea>  </body>  </html>

But if you want to run the script on your own website without the cloud method,then follow this procedures successfully.

Steps

1. Download the script here
2. Extract the script to a folder
3. Create a javascript page and name it script.js and paste the below code there.

tinymce.init({    selector: 'textarea',    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 codesample'    ],    toolbar1: 'insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',    toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',    image_advtab: true,    templates: [      { title: 'Test template 1', content: 'Test 1' },      { title: 'Test template 2', content: 'Test 2' }    ],    content_css: [      'css?family=Lato:300,300i,400,400i',      'css/codepen.min.css'    ]   });

4.Now go to your HTML and search for <head> and place the below code after <head>

<head>    <script src="installation path/tinymce.min.js"></script>    <script src="script.js"></script>  </head>

After all this steps follow successfully,this functionality get the get the tags <textarea> automatically with that you can be able to editable your items and give them better formatting.

Note:The installation path as mentioned earlier is the folder where the tinymce resides.Below is the demo of tinymce