Add TinyMCE editor in PHP or HTML

  •  
  •  
  •  
  •  
  •  
  •  

When you need to save formatted text or HTML content from users on your website, using any WYSIWYG editor like TinyMCE, you need a textarea field. TinyMCE editor is web based WYSIWYG editor which enables you to convert HTML textarea field to an editor. The TinyMCE editor is converting the formatted text into HTML when the form is submitted to the server. So, in this tutorial, I will show you the simple steps about how to add TinyMCE editor in a PHP or HTML file. Download the latest version of TinyMCE editor from the following link Download TinyMCE. Extract the zip file and paste the whole folder within your project root folder. Also, you can get all files together in source code from the below download link. So, let’s go add TinyMCE editor.

You, may also like to read the following tutorial –

Add TinyMCE editor in PHP or HTML

Add TinyMCE editor’s JS library

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>

The first thing you need to do is include the JS library of the TinyMCE editor into your PHP or HTML or web page.

The HTML part

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

The only thing about html part is, you need to create a textarea with a name and id attribute in it.

Initiate the TinyMCE editor

<script>
tinymce.init({
  selector: 'textarea#editor', //Change this value according to your HTML
  auto_focus: 'element1',
  width: "500",
  height: "200"
});
</script>

tinymce.init({…})  function initiates the tinymce editor. Within this function, you can configure the TinyMCE editor. If you look carefully, you can see that the configuration properties are simple straight forward. For example, the id of the textarea field.

The following example code will replace textarea with TinyMCE editor instance passing by the selector textarea#editor.

selector: 'textarea#editor'

The following code automatically set the focus to an editor instance.

auto_focus: 'element1'

If you want to specify a width and/or height to the TinyMCE editor, paste the following code in yours.

width: "500",
height: "200"

These are the very basic configuration of TinyMCE editor. However, you can customize a TinyMCE editor by adding more plugins, toolbars theme and so on.

TinyMCE Editor -- Add TinyMCE editor in PHP or HTML

More Configuration of TinyMCE editor

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

Hope you enjoyed the tutorial. You can download the complete source code from the below download link and please like and share the tutorial link to others.

About Mitrajit

One thought on “Add TinyMCE editor in PHP or HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *