Installing and configuring TINYMCE. Initialization and parameters

Introducing the great and mighty JS text editor

As you already understand, the editor is a platform Javascript editor of HTML code, i.e. WYSIWYG editor for websites and web applications. The developer of this useful product is Moxiecode Systems AB. Key features of the program include: support for themes/templates, language support and the ability to connect plugins. The TinyMCE HTML editor is used in many management systems and website engines, including the BIT company CMS v 1.01 management system. We can note the program as an excellent and highly functional tool for editing HTML code, inserting videos, text and graphic information, tables and graphs. True, we also note the paucity of Russian-language information about the methods and properties of the JS editor TinyMCE (but you're in luck! Here you will find answers to basic questions and learn how to work with the TinyMCE editor).

As you can see from the title image above, the JS editor is very similar to the text editor in office applications - the operating principle of the TinyMCE editor is similar. For users not familiar with the capabilities of html and css, there is a graphical editor interface. For users who are proficient in the HTML and CSS programming language, there is also an advanced HTML editor. This editor allows you to solve almost any problem related to page design.

The instructions are fully applicable for editor version 3.5.11. For later versions, the methodology for working with the editor should also be similar.

Installing and configuring TinyMCE

1. Download the latest version of the editor here and unpack it.

2. Copy the contents of the archive to the site directory you need.

3. Connect the editor to our site by inserting the code into the desired page:

<script type="text/javascript" src="/path/to/tiny_mce.js"></script>

4. Initialize the editor using JavaScript code:

<!-- TinyMCE -->
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "simple"
 });
</script>
<!-- /TinyMCE -->
<textarea></textarea>

5. Done! Now you have inserted and initialized the simplest TinyMCE editor.

As you noticed, connecting and initializing the JS editor takes place in 3 logical steps:

• connecting the library to the site page
• object initialization
• inserting a textarea tag, which becomes a graphical html editor.

Initializing the editor and its parameters

The TinyMCE editor can be initialized with various parameters, themes, and plugins. In this section we will look at some parameters and their meanings. Here is an example of initializing the editor in the BIT company CMS V 1.01 management system:

<!-- TinyMCE -->
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "exact",
        elements: "content_editor",
        theme : "advanced",
        language:"ru",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,precode,uploads_image",
    
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,preCode,anchor,image,uploads_image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {  username : "Some User",  staffid : "991234"  }
    });
    </script>
<!-- /TinyMCE -->

mode [ textareas | exact | specific_textareas | n one ] - determines which html instances will be converted into TinyMCE graphic editors.

• textareas  - Converts all <textarea> tags to editor view
• specific_textareas  - only elements that have the selector specified in the editor_selector parameter or do not have the selector specified in editor_deselector are converted

<script type="text/javascript">
        tinyMCE.init ({
            mode : "specific_textareas",
            editor_selector : "editme",
            language:"ru",
            theme : "simple"
        });
    </script>
<textarea id="content" class="editme" name="content"></textarea>

• exact  - only elements whose identifiers are listed in the elements parameter are converted (example from BIT company CMS).
  
• none  - elements are not converted

theme [ simple | advanced ] - defines the editor initialization mode.

• simple  - a mode that includes basic functions and prohibits flexible configuration
• advanced  - a mode that allows flexible configuration of plugins, editor buttons, editor themes, etc.

language  - specifies the language pack code for the TinyMCE graphic editor.

plugins  — list of plugins initialized with the editor, separated by commas.

theme_advanced_buttons<1-n>  - Contains a list of controls to insert into the toolbar, where <1-n> is the line in the toolbar.

theme_advanced_toolbar_location  - specifies where the toolbars should be located: top - at the top, bottom - at the bottom.

theme_advanced_toolbar_align  - allows you to set the alignment of the toolbar: left, right and center.

theme_advanced_statusbar_location  - sets the position of the status bar (top - top, bottom - bottom), or indicates its absence - none.

theme_advanced_resizing  - enables - true or disables - false the ability to resize the editor window. Doesn't work if theme_advanced_statusbar_location is set to none.

skin  - indicates which skin of this theme should be used.

skin_variant  - indicates which skin variant should be used.

content_css  - connects a custom css file (or a set of files separated by commas) that will be used in the editor.

relative_urls  - sets whether links in the editor will be relative (true) or absolute (false).

template_replace_values ​​- converting a page element into a graphical html code editor with parameters.

template_replace_values : { username : "Some User", staffid : "991234" }

So we will summarize with the issue of connecting and initializing the TinyMCE graphical html code editor for the site. Thanks to all!