How to install TinyMCE in 5 minutes

Quick Installation

TinyMCE is an effect web development tool. It is insanely easy to install and use. All you have to do is download TinyMCE and copy the following code in the <head> of your web page.

<!DOCTYPE html>
<html>
<head>
    <script src="//your installation path/4.1/tinymce.min.js"></script> 
    <!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
    <script>
        tinymce.init({selector:'textarea'});
    </script>
</head>

After inserting the above in <head> of the webpage, you can insert the following in <body>. This can of course vary with what you desire to put in the <body>. Let’s use a simple textarea and some generic test as an example:

<body>
    <textarea>Your content here</textarea>
</body>

After you are done with the above mentioned steps, your quick configuration will be completed. You will have this as an end result:

Screenshot

Basic Installation

It is almost identical to quick installation. But since the developers have listed it as two separate installation modes, it won’t hurt to follow the protocol!
Therefore, for basic installation you put the following code in the <head> of your page:

<script type="text/javascript" src="your installation path "></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script type="text/javascript">
    tinymce.init({
        selector: "textarea"
    });
</script>

The following goes in the <body> of your page:

<form method="post">
    <textarea></textarea>
</form>

When you have followed the above steps, the effect will be equal to previous chapter.

This initialization code will work correct only if you have just one <texarea> tag on the page. Otherwise all the texareas will be transformed to TinyMCE editor instances.

Advanced configuration

In advanced configuration, you get many options. You get the option of changing width and height. You get to install plugins of your choice, use advance font options, create tables and more. In other words your toolbar will be completely revolutionized.
Note: We will look at all the options you get in detail in advance tutorials.

One other interesting addition in the advanced configuration is the option of custom CSS settings.

So how do you get so much done? – Just by copy-pasting the following in your page’s <head>:

<script type="text/javascript" src="tinymce_4.1.3/tinymce/js/tinymce/tinymce.min.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>
    tinymce.init({
        selector: "textarea#elm1",
        theme: "modern",
        width: 500,
        height: 300,
        plugins: [
             "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
             "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
             "save table contextmenu directionality emoticons template paste textcolor"
       ],
       content_css: "css/content.css",
       toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
       style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ]
    }); 
</script>  

And this will go in your page’s <body> tag:

<body>
    <textarea id="elm1" name="area"></textarea>
</body>

Here is how TinyMCE looks like when advance configured:

Screenshot

Inline mode

How to configure inline editing option?

After learning quick, basic and advanced editing options, next we will learn how to install the inline editing option.

Inline editing option allows your content to be divided into different sections so you can edit the webpage according. In the example we will see, we will create an inline option for our heading <h1> and our content <div> and we will see how they are separately editable.

Place the following code in the <head>:

<script type="text/javascript" src="tinymce_4.1.3/tinymce/js/tinymce/tinymce.min.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>
    tinymce.init({
    selector: "div.edit",
    theme: "modern",
    plugins: [
        ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"],
        ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"],
        ["save table contextmenu directionality emoticons template paste"]
    ],
    add_unload_trigger: false,
    schema: "html5",
    inline: true,
    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image     | print preview media",
    statusbar: false
    });
    tinymce.init({
        selector: "h1.edit",
        theme: "modern",
        add_unload_trigger: false,
        schema: "html5",
        inline: true,
        toolbar: "undo redo",
        statusbar: false
    });
</script>

Then create two tags for heading and content and place them into the page’s <body> like this:

<h1 class="edit">Edit this title</h1>
<div class="edit">This is my content</div>

And there you have it, two separately editable regions and there is the way to install inline editing option.

With the above mentioned coding, the toolbar won’t appear automatically, it would only appear once you click on the content or the title.

Comments

Your comment will be the first!