TinyMCE - Javascript WYSIWYG editor

Advanced

Some advanced installation configurations are shown here.

<!-- place in header of your html document -->
<script>
tinymce.init({
    selector: "textarea#elm1",
    theme: "modern",
    width: 300,
    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 | l      ink 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>

<!-- place in body of your html document -->
<textarea id="elm1" name="area"></textarea>

Example breakdown

selector: "textarea#elm1",

Select only the textarea with ID elm1

theme: "modern",

Set the modern theme (default, not needed).

width: 300,

Width of editor in pixels, integer value.

height: 300,

Height of editor in pixels, integer value.

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"
],

A list of plugins that should be included on load.

content_css: "css/content.css",

Set a css to use inside the editor window, should be a stripped down version of your website CSS, with things such as styles for headers (H1-H6), table layouts, margins, paddings around elements (images, paragraphs etc).

toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l   
ink image | print preview media fullpage | forecolor backcolor emoticons",

Select what buttons you might want in your toolbar, you can use comma or space as a seperator.

    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'}
    ],

Very powerfull styles configuration, for example, "Bold text" simply makes a <b> tag, "Red Text" makes a span with a style coloring it RED.

The "Table row" can only be applied to a table row (tr).

Check out the formats options for more information on how to bend these options to your will.

Inline

Some config options showing some advanced inline editing options, having two different areas, one H1 and one DIV getting edited with different TinyMCE configuration.

<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> 

The H1 element should look like this

<h1 class="edit">Edit this title</h1>

The DIV element should look like this

<div class="edit">This is my content</div>

Configuration

Core options

Plugin options