TinyMCE Editor

About this Editor

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.

Developers can use TinyMCE in their own web projects in order to enable end users to add/edit content to a website or other application.

TinyMCE is customizable, so you can specify which buttons go on the toolbar, etc. Many toolbar options are available as plugins, and you simply add the appropriate parameters from within the JavaScript when you call the editor.

Setting Up TinyMCE Editor

Basic Setup

Setting up TinyMCE is easy. Here's all the code you need for a basic setup with minimal tools:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "#mytextarea"
        });
    </script>
</head>
<body>
    <h1>TinyMCE Getting Started Guide</h1>
    <form method="post">
        <textarea id="mytextarea"></textarea>
    </form>
</body>
</html>

Full Featured Setup

Here's an example of the code required to set up TinyMCE with the same options as the above editor. This is a full featured example — this sets up the editor with all features.

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

<script type="text/javascript">
tinymce.init({
    selector: "#mceEditor",
    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,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});
</script>
<textarea id="myEditor"></textarea>

To use TinyMCE in your own project, check out the TinyMCE website.