Using/Integrating TinyMCE | TOC |
<!-- 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 --> |
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:
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 < 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). |
<!-- 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 --> |
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. |
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. |
<a href="javascript:tinymce.execCommand('Bold');">[Do bold]</a> |
Go to: Table of contents | Top |