Initialization

Inorder to initialize the TinyMCE the following code must be placed within HEAD element of a document. The following example is configurated to convert all TEXTAREA elements to editors when the page loads, there are other modes aswell they are described in greater detail later on.

<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
   tinyMCE.init({
      mode : "textareas"
   });

</script>
<!-- /tinyMCE -->

Notice the red section above is the location to them tiny_mce.js script file, this file contains all code needed by the editor, themes and language packs are loaded upon initialization.
The blue section above is the initialization call, this sets up the TinyMCE global instance, the settings or name/value pairs are described later on.

Settings

The settings that are passed as an name/value collection to the init method in tinyMCE controls the global behavior of the application. Each of these keys and their possible values are described below. Notice, names within [] are considered optional and is not a requierd setting.

General settings
mode Mode can be one of the following values:

textareas - Converts all TEXTAREA elements to editors upon pageload.
specific_textareas - Converts all TEXTAREA elements with the attribute "mce_editable" set to true.
exact - Converts only explicit elements, these are listed in the "elements" setting.
[theme] Theme template to use, this should be a name of the theme and the themes are located in the themes directory of TinyMCE. Defaults to "default. TinyMCE is distributed with 3 build in themes these are simple, default and advanced. If you want to create your own themes please read more about it in the theme section of the documentation.
[plugins] This option is a comma sparated list with chained theme plugins to for example only extend only the image dialog, these extentions override functions defined in the theme template. The plugin logic should be included in a file called "editor_plugin.js" is the only one that is included from the plugin directory. Example: "my_image_dialog,my_link_dialog". If you want to create your own plugins please read more about it in the theme section of the documentation.
[language] Language pack to use with TinyMCE, this should be a ISO-639-2 code and it's used to retrive the language packs located in "langs". This setting defaults to "en".
[elements] Comma separated list of elements to convert to editors, this option is only used when "mode" is set to "exact". This list of elements may be any HTML element as long as it has an id or name attribute.
[ask] When the "mode" is set to "textareas" or "specific_textareas" this option apply and asks the user if the area is to be converted to a editor instance or not. Set it to true if you want to enable this option.
[textarea_trigger] Name of textarea trigger attribute, this defaults to "mce_editable". If the option "mode" is set to "specific_textareas" only elements with the trigger set to "true" will be converted, if the "mode" option is set to textareas or exact all elements except those with the trigger set to "false" will be converted.
[valid_elements] Comma separated list element convertion parts.

For example: a[href|target=_blank],strong/b,div[align],br.

The example string above tells TinyMCE to remove all elements that are not a "a, strong, div or br" element, convert b elements to strong elements, default target to "_blank" and keep the href, target and align attributes of the elements. Wildcards such as *,+,? may be used in element or attribute name matching.

Characters:
 ,  Separates element definitions.
 /  Separates element synonymous. The first element is the one that will be outputted.
 |  Separates attribute definitions.
 [  Starts a new attribute list for a element definition.
 ]  Ends a attribute list for a element definition.
 =  Makes the attribute to default to the specified value. For example "target=_blank"
 :  Makes the attribute to be forced to the specified value. For example "border:0"
 <  Verifies the value of a attribute. For example "target<_blank?_self"
 ?  Separates attribute verification values, see above.
 +  Makes the element open if no child nodes exists. Example: +a.

Special variables:
{$uid} - Results in a unique ID. For example "p[id:{$uid}]".

Use *[*] to include all elements and all attributes this can be very useful when used with the invalid_elements option.
[extended_valid_elements] Adds valid elements to the end of the "valid_elements" list. This option can be useful when you just want to add a few elements to the default list. The format of this option is the same as "valid_elements".
[invalid_elements] Comma spearated list of element names to be excluded from output.
[trim_span_elements] True/False option, if this option is set to true unneeded span element will be removed. Default value is true.
[verify_css_classes] True/False option, if this option is set to true CSS class attributes will be verified against the CSS. Default value is true.
[verify_html] True/False option is the HTML contents should be verified or not. Default value is true.
[urlconvertor_callback] Function name to call when URL:s are processed by the cleanup process the function should be in the following format. func(url, node, on_save) and should return the converted URL. This setting is to be used for integration purposes only. The url parameter contains the URL to be converted, the node is the actual node that contains the URL and the on_save is a true/false state that is true if the user submits a form.
[preformatted] True/False option, if this option is set to true the editor will insert TAB characters on tab and preserve other whitespace characters just like a PRE HTML element does. This option is set to false by default.
[insertlink_callback] Name of function to call when "insertlink" command is executed. This function gets the selected link url and target and should return a array with "href", "target" and "title" as collection names or call the tinyMCE.insertLink on window.opener for compatiblity with Mozilla if a new window was used. Function format: linkcallback(href, target, title, action).
[insertimage_callback] Name of function to call when "insertimage" command is executed. This function gets the selected image url and should return a array with a collection names src and alt or call the tinyMCE.insertImage on window.opener for compatiblity with Mozilla if a new window was used. Function format: insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action).
[setupcontent_callback] Name of function to be called when a editor instance is initialized, Function format: setupContentCallback(editor_id, node), where the editor_id is the id of the editor and node is the body element node of the editors iframe.
[save_callback] Name of function to call when the triggerSave function is called. Function format: save(id, content, node), if a return value is specified that value will be added to the HTML form element. So it's possible to add custom convertion logic in this function.
[docs_language] Documentation language to use with TinyMCE, this should be the FN codes like se, uk, us and so forth and it's used to retrive the docs located in "<theme>/docs/<lang>". This setting defaults to the "language" option.
[width] Width of editor instances, this defaults to the width of the element that was replaced.
[height] Height of editor instances, this defaults to the height of the element that was replaced.
[content_css] CSS to be used for the content window/iframe. This should be a page relative path.
[popups_css] CSS to be used for the popup windows like insertlink and insertimage. This should be a page relative path.
[editor_css] CSS to be used for the editor. This should be a page relative path.
[encoding] Output encoding for the editor, this option may only be "html" or nothing at the time. If this option is set to "html" the output will be HTML encoded so < will be &lt; and so forth. The default value of this option is nothing.
[debug] True/False option, if this one is set to true debug information like paths to CSS files and so fort are displayed.
[visual] True/False option, if this attribute is set to true visual aid lines will be applied to tables with border size set to 0. This option is on by default.
[visual_table_style] Enables users to set the visual aid style of tables with a custom look and feel. The default value of this option is: "border: 1px dashed #BBBBBB".
[add_form_submit_trigger] True/False option. If this option is set to true a event handler will be added do "onsubmit" on all forms to force triggerSave. The default value of this option is true.
[add_unload_trigger] True/False option. If this option is set to true a event handler will be added do "onunload" of the current window to force a triggerSave call. This triggerSave call will not do any cleanup since this is for handling of back/forward history buttons. The default value of this option is true.
[force_br_newlines] True/False option. This option forces output of BR elements instead of P elements. The default state of this option is off/false. (Experimental)
[force_p_newlines] True/False option. If this option is enabled Mozilla/Firefox will generate P elements on Enter/Return key and BR elements on Shift+Enter/Return. This option is enabled by default.
[relative_urls] True/False option. If this option is enabled absolute URLs are converted to relative URLs. The default state of this option is true.
[remove_script_host] True/False option. If this option is enabled the host and port from URLs are removed if they point within the same host as the script. For example if the editor is location on http://www.somesite.com a link to http://www.somesite.com/somedir/somepage.html will result in /somedir/somepage.html, i.e absolute within the same host. This behavior is on by default if the relative_urls option is set to false.
[focus_alert] True/False option. If this option is enabled a annoying alert will be shown when the editor isn't focused. The default state of this option is true.
[document_base_url] This document URL is used when converting absolute URLs to relative URLs. This option defaults the the editor instances current document. Notice if this option points to a domain remember to use the protocol part and this option should be ended with a trailing slash. Example: http://www.somehost.com/mydir/
[custom_undo_redo] This option enables the custom undo/redo logic that makes undo/redo work better. This is a True/False option and it's enabled by default.
[custom_undo_redo_levels] This option sets the maximum number of undo levels, there is no limit by default.
[custom_undo_redo_keyboard_shortcuts] If enabled keyboard shortcuts for Ctrl+Z and Ctrl+Y is added to the editor. This option is enabled by default.
[fix_content_duplication] This option enables a fix for the content duplication bug that appears in MSIE. This fix is enabled by default but can be disabled for compatiblity reasons. True/False option.
[directionality] This option enables the possibility to change the text directionality to for example Arabic languages. Possible values: ltr, rtl. Default to: ltr.
[auto_cleanup_word] If enabled cleanup of MS office/Word HTML will be executed automaticly on paste operations. The default value of this option is false. Note: This option is currently only available for MSIE.
[cleanup_on_startup] If enabled contents of textareas and elements will be cleaned upon editor initialization. The default value for this option is false.
[inline_styles] If enabled attributes like width, height, vspace, hspace and align gets placed within the style attribute instead. The default value for this option is false. Remeber to enable the style attribute in valid elements when using this one.
[convert_newlines_to_brs] If enabled all \n (new lines) will be converted to <br /> elements on loading, this option defaults to false.
[auto_reset_designmode] Becurse there are bugs when showing/hiding a TinyMCE editor by using the style.display none/block method the designmode needs to be resetted, this option enabled this value to be auto resetted each time a area is focused, this option is disabled by default.
[entities] Comma separated list of the entitiy lookup table used to convert char codes into names such as &oring;. This list is in a odd, even format where odd values are the numbers to be converted and the even is the entity name that represents that number. For example: "8205,zwj,8206,lrm,8207,rlm,173,shy".
[entity_encoding] Controls how characters are encoded into entity values. This option can be set to "numeric" to get &#<char num>; codes or "named" to use the "entities" option to encode chars into names or "raw" to skip encoding. The default value of this option is named.
[cleanup_callback] Custom cleanup callback function, this enabled users to add custom cleanup logic to extend the build in one. This callback is called separatly from the default one, it doesn't replace the old one it just extends it. Check the plugin cleanup function for more details.
[nowrap] Sets the how content is to be word wrapped. This option is a true/false option and is disabled by default.
[external_link_list_url] URL to a backend page (PHP,ASP,ASPX,JSP) that is to populate a array with links called tinyMCELinkList check the example_link_list.js for a example format. This option enables you to better integrate TinyMCE with a backend system.
[external_image_list_url] URL to a backend page (PHP,ASP,ASPX,JSP) that is to populate a array with links called tinyMCEImageList check the example_image_list.js for a example format. This option enables you to better integrate TinyMCE with a backend system.
[file_browser_callback] String containting the callback function to execute on all "browse" buttons. These buttons will apaear when this option is enabled. The callback function format is: fileBrowserCallBack(field_name, url, type, win). Where field_name is the form field to place browse result in, the url is the url that is to be changed and type is link/image or flash and the win is the window reference. The window reference is also stored in a window argument called window accessable using tinyMCE.getWindowArg("window").
[auto_focus] String with the editor instance id "mce_editor_<index 0-n>" or the form element name/id.
[oninit] Gets called when all editor instances are initialized, this should contain a string. For example: "myfunc();".
[oninit] Gets called when all editor instances are initialized, this should contain a string. For example: "myfunc();".
[onchange_callback] Gets executed when content changed within a editor instance, the function format is "callback(instance);".
[init_instance_callback] Gets executed when content changed within a editor instance is added to the editor, the function format is "callback(instance);".
[cleanup] Enabled or disables the cleanup process. If this option is set to false all cleanup will be skipped and the raw browser content will be returned from editor. This mode should only be used for debugging purposes since MSIE doesn't generate valid HTML. This option defaults to "true".
[remove_linebreaks] Enabled or disables the removal of line breaks from the HTML code. Since many systems autoconverts new lines to br elements on submit the default behavior of TinyMCE is to place all HTML code on one line.
[button_tile_map] Enabled or disables the usage of button tile maps, for performance TinyMCE can use a single image instead of a image for each button. This option is disabled by default.
[submit_patch] Adds a patch function for the form.submit() call, so triggerSave gets auto executed. This option is enabled by default.
Advanced theme specific settings
[theme_advanced_layout_manager] This option contains what layout manager to use currently there are three SimpleLayout, RowLayout and CustomLayout. Where SimpleLayout is the default layout manager.
[theme_advanced_blockformats] Comma separated list of blockformats for the formatselect list. Defaults to: p,address,pre,h1,h2,h3,h4,h5,h6.
[theme_advanced_styles] This option enables you to add CSS classes and names for them to the style selection droplist. The format is "<title>=<class>;..". If this option isn't used the content CSS classes will automaticly be imported.
Example: "Header 1=header1;Header 2=header2;Header 3=header3"
[theme_advanced_source_editor_width] Source editor window width.
[theme_advanced_source_editor_height] Source editor window height.
Advanced theme SimpleLayout settings
[theme_advanced_toolbar_location] This option enabled you to change the location of the toolbar. Possible values are "top" and "bottom". The default value is "bottom".
[theme_advanced_toolbar_align] This option enabled you to change toolbar alignment to left, center or right. This option defaults to center.
[theme_advanced_buttons1] Comma separated list of buttons to include on row 1. For example "bold,italic,underline".

Possible button names:
bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator, col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor, charmap, visualaid, spacer, cut, copy, paste
[theme_advanced_buttons2] Same as above but the 2:nd row.
[theme_advanced_buttons3] Same as above but the 3:nd row.
[theme_advanced_buttons<N>_add] Adds extra controls/buttons to the specified row (N). For example: theme_advaned_buttons3_add : "iespell".
[theme_advanced_buttons<N>_add_before] Adds extra controls/buttons to the specified row (N) before the default ones. For example: theme_advaned_buttons3_add_before : "iespell".
[theme_advanced_path_location] Location of element path list. Possible values "top" or "bottom". Defaults to "none"
[theme_advanced_disable] Comma separated list of buttons/elements to be disabled for example "formatselect".
Advanced theme RowLayout settings
[theme_advanced_containers] Comma separated list of container names (panels).
[theme_advanced_containers_default_class] Default class name to be applied to all containers. Defaults to "container".
[theme_advanced_containers_default_align] Default align to be applied to all containers. Defaults to "center".
[theme_advanced_container_<c>] Comma separated list of controls to add to the container. Where <c> is the container name. There are two special controls "mceEditor" and "mcePath".
[theme_advanced_containers_<c>_class] Class name to apply to the specific container. Where <c> is the container name.
[theme_advanced_containers_<c>_align] Align to be applied to the specific container. Where <c> is the container name.
Advanced theme CustomLayout settings
[theme_advanced_custom_layout] Custom layout manager callback. This option should contain a function name, the format of the function call is customLayout(template).

Heres a example of a more complex initialization:

<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
   tinyMCE.init({
      mode : "exact",
      theme : "mytheme",
      language : "se",
      elements : "elm1,elm2"
  });

</script>
<!-- /tinyMCE -->

Functions (For advanced usage)

TinyMCE has a global instance with some public functions that can be called from the page.

Syntax: tinyMCE.triggerSave([skip_cleanup]);

Description: Makes a cleanup and moves the contents from the editor to the form field. This method is automaticly called by tinyMCE by adding a trigger on the forms submit method.

Parameters:
[skip_cleanup] - Disables the cleanup process of trigger save. Defaults to false. (Optional)

Returns: Nothing

Syntax: tinyMCE.updateContent(form_element_name);

Description: Moves the contents from the form element to the editor, this does the opposite of triggerSave(). This method can be used when you want to change the contents of the editor dynamicly.

Parameters:
form_element_name - The name of the form element to get contents from.

Returns: Nothing
Syntax: tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);

Description: This method executes a command by name on the editor instance specified by the editor_id parameter.

Parameters:
editor_id - ID of editor instance or element id/name of the replaced element.
command - Command to execute check the execCommand function for details.
[user_interface] - Is a user interface to be used or not.
[value] - Value to pass with command for example a URL.

Returns: Nothing
Syntax: tinyMCE.execCommand(command, [user_interface], [value]);

Description: This method executes a command by name on the selected editor instance.

Parameters:
command - Command to execute for example "Bold" or "Italic". These are defined by Mozilla Midas spec. But there are a some tinyMCE specific commands.

mceLink Opens the insert link dialog and inserts a link.
mceImage Opens the insert image dialog and inserts a image.
mceCleanup Removed unwanted elements and attributes from the HTML code.
mceHelp Opens the manual pages.
mceAddControl Adds a editor control to the element id/name specified as value.
mceRemoveControl Removes a specific control by editor_id name. The value is the editor_id to remove, editor ids are in the following format: "mce_editor_<index>". DOM element ids and form element names can allso be used.
mceFocus Focuses the editor by the id placed in value. Editor id's are in the format "mce_editor_<index>". DOM element ids and form element names can allso be used.
mceSetCSSClass Sets the CSS class attribute or creates a new span of the selection. The value is the css class name to assign to selected element or new span element.
mceInsertContent Inserts contents of value parameter to current cursor position.
mceReplaceContent Replaces the current selection with the HTML code in value. The {$selection} variable gets replaced with the currently selected text contents.
mceSetAttribute

Sets a attribute of the currenly selected element. The value of this command should be a name/value array with the following parameters.

name - Attribute name to set.
value - Attrbute value to set.
[targets] - Target elements to add attribute on. Default: p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address.

Example of usage:
tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});

mceToggleVisualAid

Toggles visual aid/guidelines mode on/off.

mceAnchor

Inserts a named anchor element, the value is the name of the anchor.

mceResetDesignMode

Resets the designMode state of all editor instances, this command is useful on Firefox if the editor is placed in tabs or shown/hidden with style.display="none/block". Call this command after the editor displayed again.

mceSelectNode

Selects the node/element passed as value. This command will also scroll to the elements location within the editor.

mceSelectNodeDepth

Selects the node/element by depth relative from the current node. So a value of 0 will select the currently focused node. This command will also scroll to the elements location within the editor.


user_interface - Tells if the command is to display a user interface or not. True/False option.
value - Value to pass for the command for example to insertLink it's the URL of the link.

Returns: Nothing

Example:
<a href="javascript:tinymce.execCommand('Bold');">[Do bold]</a>

Syntax: tinyMCE.insertLink(href, target);

Description: This method inserts a link a the cursor position of the selected editor instance or updates the selected link with new data. This method should be called upon "ok" in the insertLink popup when you create custom themes.

Parameters:
href - HREF/URL of the link.
target - Target of the link.

Returns: Nothing
Syntax: tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);

Description: This method inserts a image a the cursor position of the selected editor instance or updates the selected image with new data. This method should be called upon "ok" in the insertImage popup when you create custom themes.

Parameters:
src - Image src url.
alt - Alternative text of img element.
border - Border of image element.
hspace - Horizontal spacing of image element.
vspace - Vertical spacing of image element.
width - Width f image element.
height - height f image element.
align - Alignt of image element.
title - Link title of image element.
onmouseover - On mouse over event handler of image element.
onmouseout - On mouse out event handler of image element.

Returns: Nothing
Syntax: tinyMCE.triggerNodeChange();

Description: This method is to be called when external changes is made to the editor. This method will then call the "handleNodeChangeCallback" callback in the theme.

Parameters: None

Returns: Nothing
Syntax: tinyMCE.getContent();

Description: This method returns the HTML contents of the currently selected editor or null if no editor was selected.

Parameters: None

Returns: HTML contents of the currently selected editor or null.
Syntax: tinyMCE.setContent(html);

Description: This method sets the HTML contents of the currently selected editor.

Parameters:
html - HTML Source code to set.

Returns: None.
Syntax: tinyMCE.getEditorInstance(editor_id);

Description: This method returns a editor instance by editor id.

Parameters:
editor_id - Editor instance to retrive.

Returns: TinyMCE Editor instance (TinyMCEControl).
Syntax: tinyMCE.importThemeLanguagePack([theme]);

Description: This method imports/loads theme specific language packs. This may be called from custom themes.

Parameters:
[theme] - Name of the current theme. This is a optional parameter it defaults to the global "theme" setting. This parameter is useful within theme plugins.

Returns: None.
Syntax: tinyMCE.importPluginLanguagePack(plugin, valid_languages);

Description: This method imports/loads plugin specific language packs. This may be called from custom plugins.

Parameters:
plugin - Name of the current plugin.
valid_languages - Comma separated list of supported languagepacks.

Returns: None.
Syntax: tinyMCE.applyTemplate(html);

Description: This method replaces settings and lang variables in the theme.

Parameters:
html - HTML code to apply theme variable substitution on.

Returns: New converted, HTML code.
Syntax: tinyMCE.openWindow(template, [args]);

Description: This method opens a new window by the template data assigned, it will get the width, height and html data from template parameters. The args array contains variable names to be substituted.

There are some custom window arguments:
mce_replacevariables - Enables/Disables the language/variable replacement of the document HTML. Enabled by default.
mce_windowresize - Enables/Disables the auto resize feature of popupwindows. Enabled by default.

Parameters:
template - Name/Value array with width, height, html and file keys in it.
[args] - Name/Value array with variable names to replace. Variables in the template file key value (URL) gets replaced with the argument list. For example: image.php?src={$src} gets replaced with image.php?src=image.gif.

Returns: None.
Syntax: tinyMCE.getWindowArg(name, [default_value]);

Description: This method returns a window argument defined by name. This function is to be used in theme popup windows to retrive dialog parameters.

Parameters:
name - Name of window argument to get.
[default_value] - Default value to be returned if window argument is missing.

Returns: Window argument value.
Syntax: tinyMCE.setWindowArg(name, value);

Description: This method sets a window argument by name. This can for example be useful if plugin are to call other plugins.

Parameters:
name - Name of window argument to set.
value - Value to set in window argument.

Returns: Window argument value.
Syntax: tinyMCE.getParam(name, [default_value], [strip_whitespace]);

Description: This method returns a TinyMCE configuration parameter.

Parameters:
name - Name of window argument to get.
[default_value] - Default value to be returned if window argument is missing.
[strip_whitespace] - If true all whitespace will be removed from return value, default: false.

Returns: TinyMCE configuration parameter.