687 lines
31 KiB
HTML
Executable file
687 lines
31 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" and "target" 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).</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.</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>
|
|
</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.<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>
|