702 lines
32 KiB
HTML
Executable file
702 lines
32 KiB
HTML
Executable file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>Using/Integrating TinyMCE</TITLE>
|
|
<link href="style.css" rel="stylesheet" type="text/css">
|
|
</HEAD>
|
|
|
|
<BODY>
|
|
|
|
<table width="100%" border="0" cellpadding="1" cellspacing="3" class="pageheader">
|
|
<tr>
|
|
<td><span class="title">Using/Integrating TinyMCE</span></td>
|
|
<td align="right"><a href="index.htm">TOC</a></td>
|
|
</tr>
|
|
</table>
|
|
<hr noshade>
|
|
<br>
|
|
<a name="init"></a>
|
|
<span class="subtitle">Initialization</span><br>
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
<table border="0" cellspacing="3" cellpadding="2" class="sample">
|
|
<tr>
|
|
|
|
<td class="samplecontent"><!-- tinyMCE --><br>
|
|
<script language="javascript" type="text/javascript"
|
|
src="<font color="#990000">jscripts/tiny_mce/tiny_mce.js</font>"></script><br>
|
|
<script language="javascript" type="text/javascript"><br>
|
|
<font color="#000099">tinyMCE.init({<br>
|
|
mode : "textareas"<br>
|
|
});</font><br>
|
|
</script><br>
|
|
<!-- /tinyMCE --></td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
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.<br>
|
|
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.<br>
|
|
<br>
|
|
<a name="settings" id="settings"></a> <span class="subtitle">Settings</span><br>
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
<table border="1" cellspacing="0">
|
|
<tr bgcolor="#CCCCCC">
|
|
<td colspan="2"><strong>General settings </strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td width="150"><strong>mode</strong></td>
|
|
<td>Mode can be one of the following values:<br> <br> <strong>textareas</strong>
|
|
- Converts all TEXTAREA elements to editors upon pageload.<br> <strong>specific_textareas</strong>
|
|
- Converts all TEXTAREA elements with the attribute "mce_editable"
|
|
set to true.<br> <strong>exact</strong> - Converts only explicit elements,
|
|
these are listed in the "elements" setting. </td>
|
|
</tr>
|
|
<tr>
|
|
<td width="150"><strong>[theme]</strong></td>
|
|
<td>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 <a href="themes.htm">theme</a> section of the documentation. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[plugins]</strong></td>
|
|
<td>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 <a href="themes.htm">theme</a> section of the documentation.</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="150"><strong>[language]</strong></td>
|
|
<td>Language pack to use with TinyMCE, this should be the FN codes like se,
|
|
uk, us and so forth and it's used to retrive the language packs located
|
|
in "langs". This setting defaults to "uk".</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="150"><strong>[elements]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[ask]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[textarea_trigger]</strong></td>
|
|
<td>Name of textarea trigger attribute, this defaults to "mce_editable".
|
|
This option is only used when "mode" is set to specific_textareas.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[valid_elements]</strong></td>
|
|
<td>Comma separated list element convertion parts.<br> <br>
|
|
For example: a[href|target=_blank],strong/b,div[align],br.<br> <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. <br>
|
|
<br> <strong>Characters:</strong><br>
|
|
<table border="0" cellspacing="0" cellpadding="3">
|
|
<tr>
|
|
<td> , </td>
|
|
<td>Separates element definitions.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> / </td>
|
|
<td>Separates element synonymous. The first element is the one that
|
|
will be outputted.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> | </td>
|
|
<td>Separates attribute definitions.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> [ </td>
|
|
<td>Starts a new attribute list for a element definition.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> ] </td>
|
|
<td>Ends a attribute list for a element definition.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> = </td>
|
|
<td>Makes the attribute to default to the specified value. For example
|
|
"target=_blank"</td>
|
|
</tr>
|
|
<tr>
|
|
<td> : </td>
|
|
<td>Makes the attribute to be forced to the specified value. For example "border:0"</td>
|
|
</tr>
|
|
<tr>
|
|
<td> < </td>
|
|
<td>Verifies the value of a attribute. For example "target<_blank?_self"</td>
|
|
</tr>
|
|
<tr>
|
|
<td> ? </td>
|
|
<td>Separates attribute verification values, see above. </td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<strong>Special variables:</strong><br>
|
|
{$uid} - Results in a unique ID. For example "p[id:{$uid}]".<br>
|
|
<br>
|
|
This option defaults to the following pattern:<br> "a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br,<br>
|
|
img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],<br>
|
|
table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan],<br>
|
|
td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],<br>
|
|
address[class|align],h1[class|align],h2[class|align],h3[class|align],<br>
|
|
h4[class|align],h5[class|align],h6[class|align],hr"</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[extended_valid_elements]</strong></td>
|
|
<td>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".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[invalid_elements]</strong></td>
|
|
<td>Comma spearated list of element names to be excluded from output. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[trim_span_elements]</strong></td>
|
|
<td>True/False option, if this option is set to true unneeded span element will be removed. Default value is true.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[verify_css_classes]</strong></td>
|
|
<td>True/False option, if this option is set to true CSS class attributes will be verified against the CSS. Default value is true.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[verify_html]</strong></td>
|
|
<td>True/False option is the HTML contents should be verified or not. Default value is true.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[urlconvertor_callback]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[preformatted]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[insertlink_callback]</strong></td>
|
|
<td>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).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[insertimage_callback]</strong></td>
|
|
<td>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).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[setupcontent_callback]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[save_callback]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[docs_language]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[width]</strong></td>
|
|
<td>Width of editor instances, this defaults to the width of the element that
|
|
was replaced. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[height]</strong></td>
|
|
<td>Height of editor instances, this defaults to the height of the element
|
|
that was replaced. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[content_css]</strong></td>
|
|
<td>CSS to be used for the content window/iframe. This should be a page relative
|
|
path.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[popups_css]</strong></td>
|
|
<td>CSS to be used for the popup windows like insertlink and insertimage.
|
|
This should be a page relative path.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[editor_css]</strong></td>
|
|
<td>CSS to be used for the editor. This should be a page relative path.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[encoding]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[debug]</strong></td>
|
|
<td>True/False option, if this one is set to true debug information like paths
|
|
to CSS files and so fort are displayed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[visual]</strong></td>
|
|
<td>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.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[visual_table_style]</strong></td>
|
|
<td>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".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[add_form_submit_trigger]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[force_br_newlines]</strong></td>
|
|
<td>True/False option. This option forces output of BR elements instead of
|
|
P elements. The default state of this option is off/false. (Experimental)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[relative_urls]</strong></td>
|
|
<td>True/False option. If this option is enabled absolute URLs are converted
|
|
to relative URLs. The default state of this option is true.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[remove_script_host]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[focus_alert]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[document_base_url]</strong></td>
|
|
<td>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/</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[custom_undo_redo]</strong></td>
|
|
<td>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.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[custom_undo_redo_levels]</strong></td>
|
|
<td>This option sets the maximum number of undo levels, there is no limit by default.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[fix_content_duplication]</strong></td>
|
|
<td>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. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[directionality]</strong></td>
|
|
<td>This option enables the possibility to change the text directionality to for example Arabic languages. Possible values: ltr, rtl. Default to: ltr. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[auto_cleanup_word]</strong></td>
|
|
<td>If enabled cleanup of MS office/Word HTML will be executed automaticly on paste operations. The default value of this option is true. Note: This option is currently only available for MSIE. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[cleanup_on_startup]</strong></td>
|
|
<td>If enabled contents of textareas and elements will be cleaned upon editor initialization. The default value for this option is false.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[inline_styles]</strong></td>
|
|
<td>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. </td>
|
|
</tr>
|
|
<tr bgcolor="#CCCCCC">
|
|
<td colspan="2"><strong>Advanced theme specific settings </strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_toolbar_location]</strong></td>
|
|
<td>This option enabled you to change the location of the toolbar. Possible values are "top" and "bottom". The default value is "bottom". </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_styles]</strong></td>
|
|
<td>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.<br>
|
|
Example: "Header 1=header1;Header 2=header2;Header 3=header3"</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_buttons1]</strong></td>
|
|
<td>Comma separated list of buttons to include on row 1. For example "bold,italic,underline".<br>
|
|
<br>
|
|
Possible button names:<br>
|
|
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</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_buttons2]</strong></td>
|
|
<td>Same as above but the 2:nd row.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_buttons3]</strong></td>
|
|
<td>Same as above but the 3:nd row.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_buttons<N>_add]</strong></td>
|
|
<td>Adds extra controls/buttons to the specified row (N). For example: theme_advaned_buttons3_add : "iespell".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_disable]</strong></td>
|
|
<td>Comma separated list of buttons/elements to be disabled for example "formatselect".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_source_editor_width]</strong></td>
|
|
<td>Source editor window width.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_source_editor_height]</strong></td>
|
|
<td>Source editor window height.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>[theme_advanced_blockformats]</strong></td>
|
|
<td>Comma separated list of blockformats for the formatselect list. Defaults to: p,address,pre,h1,h2,h3,h4,h5,h6.</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
Heres a example of a more complex initialization:<br>
|
|
<br>
|
|
<table border="0" cellspacing="3" cellpadding="2" class="sample">
|
|
<tr>
|
|
<td class="samplecontent"><!-- tinyMCE --><br> <script language="javascript"
|
|
type="text/javascript" src="<font color="#990000">jscripts/tiny_mce/tiny_mce.js</font>"></script><br>
|
|
<script language="javascript" type="text/javascript"><br>
|
|
<font color="#000099">tinyMCE.init({<br>
|
|
mode : "exact",<br>
|
|
theme : "mytheme",<br>
|
|
language : "se",<br>
|
|
elements : "elm1,elm2"<br>
|
|
});</font><br> </script><br> <!-- /tinyMCE --></td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<a name="functions" id="functions"></a> <span class="subtitle"><strong>Functions</strong></span><strong>
|
|
(For advanced usage)</strong><br>
|
|
<br>
|
|
TinyMCE has a global instance with some public functions that can be called from
|
|
the page.<br>
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.triggerSave();<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters:</strong> None<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing<br>
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.updateContent(form_element_name);<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters:<br>
|
|
</strong>form_element_name - The name of the form element to get contents from.<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method executes a command by name on the editor instance specified by the editor_id parameter.<br>
|
|
<br>
|
|
<strong>Parameters:</strong><br>
|
|
editor_id - ID of editor instance or element id/name of the replaced element.<br>
|
|
command - Command to execute check the execCommand function for details.<br>
|
|
[user_interface] - Is a user interface to be used or not.<br>
|
|
[value] - Value to pass with command for example a URL. <br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing
|
|
<hr noshade>
|
|
<strong><a name="execcommand"></a>Syntax:</strong> tinyMCE.execCommand(command, [user_interface], [value]);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method executes a command by name on the selected
|
|
editor instance.<br>
|
|
<br>
|
|
<strong>Parameters:<br>
|
|
</strong>command - Command to execute for example "Bold" or "Italic".
|
|
These are defined by<a href="http://www.mozilla.org/editor/midas-spec.html" target="_blank">
|
|
Mozilla Midas spec.</a> But there are a some tinyMCE specific commands. <br>
|
|
<br>
|
|
<table border="1" cellspacing="0">
|
|
<tr>
|
|
<td width="150"><strong>mceLink</strong></td>
|
|
<td>Opens the insert link dialog and inserts a link.</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="150"><strong>mceImage</strong></td>
|
|
<td>Opens the insert image dialog and inserts a image.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceCleanup</strong></td>
|
|
<td>Removed unwanted elements and attributes from the HTML code.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceHelp</strong></td>
|
|
<td>Opens the manual pages.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceInsertTable</strong></td>
|
|
<td>Inserts a new table at cursor location the default size is 2x2. If the value parameter is specified it should contain a name/value array, this array has the following options cols, rows, border, cellspacing, cellpadding. The default border is set to: 0. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableInsertRowBefore</strong></td>
|
|
<td>Inserts a row before/above the current cursor location. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableInsertRowAfter</strong></td>
|
|
<td>Inserts a row after/under the current cursor location. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableDeleteRow</strong></td>
|
|
<td>Deletes the row at the current cursor location. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableInsertColBefore</strong></td>
|
|
<td>Inserts a column before the current cursor location.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableInsertColAfter</strong></td>
|
|
<td>Inserts a column after the current cursor location.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceTableDeleteCol</strong></td>
|
|
<td>Deletes the column at the current cursor location. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceAddControl</strong></td>
|
|
<td>Adds a editor control to the element id/name specified as value. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceRemoveControl</strong></td>
|
|
<td>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. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceFocus</strong></td>
|
|
<td>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. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceSetCSSClass</strong></td>
|
|
<td>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. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceInsertContent</strong></td>
|
|
<td>Inserts contents of value parameter to current cursor position.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceReplaceContent</strong></td>
|
|
<td>Replaces the current selection with the HTML code in value. The {$selection} variable gets replaced with the currently selected text contents. </td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceSetAttribute</strong></td>
|
|
<td><p>Sets a attribute of the currenly selected element. The value of this command should be a name/value array with the following parameters.<br>
|
|
<br>
|
|
<strong>name</strong> - Attribute name to set.<br>
|
|
<strong>value</strong> - Attrbute value to set.<br>
|
|
<strong>[targets]</strong> - Target elements to add attribute on. Default: p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address.<br>
|
|
<br>
|
|
Example of usage:<br>
|
|
tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceToggleVisualAid</strong></td>
|
|
<td><p>Toggles visual aid/guidelines mode on/off.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>mceAnchor</strong></td>
|
|
<td><p>Inserts a named anchor element, the value is the name of the anchor. </p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
user_interface - Tells if the command is to display a user interface or not. True/False
|
|
option.<br>
|
|
value - Value to pass for the command for example to insertLink it's the URL of
|
|
the link.<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing<br>
|
|
<br>
|
|
<strong>Example:</strong><br>
|
|
<table border="0" cellspacing="3" cellpadding="2" class="sample">
|
|
<tr>
|
|
<td class="samplecontent"><a href="<font color="#990000">javascript:tinymce.execCommand('Bold');</font>">[Do
|
|
bold]</a></td>
|
|
</tr>
|
|
</table>
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.insertLink(href, target);<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters:<br>
|
|
</strong>href - HREF/URL of the link.<br>
|
|
target - Target of the link.<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.insertImage(src, alt, border, hspace, vspace,
|
|
width, height, align);<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters:<br>
|
|
</strong>src - Image src url.<br>
|
|
alt - Alternative text of img element.<br>
|
|
border - Border of image element.<br>
|
|
hspace - Horizontal spacing of image element.<br>
|
|
vspace - Vertical spacing of image element.<br>
|
|
width - Width f image element.<br>
|
|
height - height f image element.<br>
|
|
align - Alignt of image element.<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.triggerNodeChange();<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters: </strong>None<br>
|
|
<br>
|
|
<strong>Returns:</strong> Nothing
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.getContent();<br>
|
|
<br>
|
|
<strong>Description: </strong>This method returns the HTML contents of the currently selected editor or null if no editor was selected.<br>
|
|
<br>
|
|
<strong>Parameters: </strong>None<br>
|
|
<br>
|
|
<strong>Returns:</strong> HTML contents of the currently selected editor or null.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.setContent(html);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method sets the HTML contents of the currently selected editor.<br>
|
|
<br>
|
|
<strong>Parameters:<br>
|
|
</strong>html - HTML Source code to set. <br>
|
|
<br>
|
|
<strong>Returns:</strong> None.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.importThemeLanguagePack([theme]);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method imports/loads theme specific language packs. This may be called from custom themes. <br>
|
|
<br>
|
|
<strong>Parameters:</strong><br>
|
|
[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.<br>
|
|
<br>
|
|
<strong>Returns:</strong> None.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.importPluginLanguagePack(plugin, valid_languages);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method imports/loads plugin specific language packs. This may be called from custom plugins. <br>
|
|
<br>
|
|
<strong>Parameters:</strong><br>
|
|
plugin - Name of the current plugin.<br>
|
|
valid_languages - Comma separated list of supported languagepacks.<br>
|
|
<br>
|
|
<strong>Returns:</strong> None.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.applyTemplate(html);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method replaces settings and lang variables in the theme. <br>
|
|
<br>
|
|
<strong>Parameters:</strong>
|
|
<br>
|
|
html - HTML code to apply theme variable substitution on. <br>
|
|
<br>
|
|
<strong>Returns:</strong> New converted, HTML code.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.openWindow(template, [args]);<br>
|
|
<br>
|
|
<strong>Description: </strong>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.<br>
|
|
<br>
|
|
<strong>Parameters:</strong> <br>
|
|
template - Name/Value array with width, height and html keys in it. <br>
|
|
[args] - Name/Value array with variable names to replace. <br>
|
|
<br>
|
|
<strong>Returns:</strong> None.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.getWindowArg(name, [default_value]);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method returns a window argument defined by name. This function is to be used in theme popup windows to retrive dialog parameters. <br>
|
|
<br>
|
|
<strong>Parameters:</strong> <br>
|
|
name - Name of window argument to get. <br>
|
|
[default_value] - Default value to be returned if window argument is missing. <br>
|
|
<br>
|
|
<strong>Returns:</strong> Window argument value.
|
|
<hr noshade>
|
|
<strong>Syntax:</strong> tinyMCE.getParam(name, [default_value], [strip_whitespace]);<br>
|
|
<br>
|
|
<strong>Description: </strong>This method returns a TinyMCE configuration parameter. <br>
|
|
<br>
|
|
<strong>Parameters:</strong> <br>
|
|
name - Name of window argument to get. <br>
|
|
[default_value] - Default value to be returned if window argument is missing. <br>
|
|
[strip_whitespace] - If true all whitespace will be removed from return value, default: false. <br>
|
|
<br>
|
|
<strong>Returns:</strong> TinyMCE configuration parameter.<br>
|
|
<hr noshade>
|
|
<table width="100%" border="0" cellpadding="1" cellspacing="3" class="pagefooter">
|
|
<tr>
|
|
<td>Go to: <a href="index.htm">Table of contents</a></td>
|
|
<td align="right"><a href="#">Top</a></td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
</BODY>
|
|
</HTML>
|