|
Detailed explanation of tinyMCE usage
initialization
When initializing TinyMCE, you need to add the following code to the HEAD tag of the page. According to the settings in the following example, all TEXTAREA text fields will be converted into editors when the page is loaded. There are other modules as well, which we will describe in detail later.
<!-- 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 -->
Note that the red part above is the location of the tiny_mce.js script file, which contains all the code required by the editor. The theme and language pack will be loaded during initialization.
The blue part is the initialization call, which creates a global instance of TinyMCE. The settings and name-value properties will be described later. set up The settings passed to tinyMCE's init method as name-value attributes control the global behavior of the application. All keys and possible key values are shown in the following table. Note that names enclosed in brackets [] are optional and not required settings.
| General settings | | mode | Mode can be one of the following values:
textareas - Convert all TEXTAREA components into editors on page load.
specific_textareas - turns all TEXTAREAs with the "mce_editable" attribute set to true into editors.
exact - Only convert the exact components specified in the "elements" setting. | | [theme] | Specify the name of the theme to be used. The theme will be placed in the themes directory of TinyMCE. The default is default. TinyMCE comes with three built-in themes, simple, default and advanced.
If you want to create your own theme, please read the themes section of the documentation carefully. | | [plugins] | This option is a comma-separated list of theme plugins (e.g. to extend only the image dialog). These plugins override functionality defined in theme templates. The plugin logic should be contained in a file called "editor_plugin.js", which is the only file included in the plugin directory.
For example: "my_image_dialog,my_link_dialog".
If you want to create your own plugin, please read the themes section of the documentation carefully. | | [language] | The language pack used in TinyMCE. This should be an FN code like se, uk, us, etc. It is used to get the language pack from the "langs" directory. The default value for this setting is "uk".
For Chinese users, we recommend you use "zh-CN" | | [elements] | Comma separated list of components to convert to editor. This option is only used when the "mode" option is set to "exact". The elements in the list can be any HTML component with an id or name attribute. | | [ask] | When "mode" is set to "textareas" or "specific_textareas", this option is used and asks the user whether the input box should be converted into an editor.
If you want to use this option, set it to true. | | [textarea_trigger] | The property of the textarea trigger, the default value is "mce_editable".
This option is only used when "mode" is set to "specific_textareas". | | [valid_elements] | Comma separated list of component transformation parts.
For example: a[href|target=_blank],strong/b,div[align],br.
The above example tells TinyMCE to remove all components except "a, strong, div" and "br", convert element b to strong, set the default target to "_blank" and keep the href, target and align attributes. Wildcards such as *, +, and ? can be used when matching component and attribute names.
character:
| , | Separator between component definitions. | | / | Separator between two synonymous components. The first component is the one that will be used for output (i.e. the second component is replaced by the first). | | | | Separator between attribute definitions. | | [ | Defines the start symbol of a component's property list. | | ] | Defines the end of a component's property list. | | = | Sets the default value of a property to a specific value. For example: "target=_blank" | | : | Forces the value of a property to a specific value. For example: "border:0" | | < | Verify the value of an attribute. For example: "target<_blank?_self" | | ? | Separator between attribute check values, see above. |
Special variables:
{$uid} - Generates a unique ID number. For example: "p[id:{$uid}]".
The default value for this option is the following pattern:
"a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br,
img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],
table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan],
td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],
address[class|align],h1[class|align],h2[class|align],h3[class|align],
h4[class|align],h5[class|align],h6[class|align],hr".
To include all components and attributes, use *[*]. This is particularly useful when using the invalid_elements option. | | [extended_valid_elements] | Adds a valid component to the end of the "valid_elements" list. This option is useful when you only want to add some components to the default list.
The format is the same as "valid_elements". | | [invalid_elements] | Comma-separated list of component names to exclude from output. | | trim_span_elements | True/False option. If set to true, unneeded components will be removed. The default value is true. | | [verify_css_classes] | True/False option. If set to true, the CSS class attribute will be validated. The default value is true. | | [verify_html] | True/False option. Indicates whether the HTML content needs to be validated. The default value is true. | | [urlconvertor_callback] | The name of the function to be called when the sanitizer processes a URL. This function must follow the following format: func(url, node, on_save) and return the converted URL. This setting is for integration purposes only. The parameter url represents the address to be converted, node represents the node containing the URL, and on_save is a Boolean value (true when the user submits the form). | | [preformatted] | True/False option. If set to true, the editor will convert tabs to indents, but keep other whitespace characters, just like the effect of PRE in HTML tags. The default value is false. | | [insertlink_callback] | The name of the function to be called when the "insertlink" command is executed. This function gets the address and target of the selected link, returning an array with "href", "target" and "title" as collection names. When using a new window, tinyMCE.insertLink is called on window.opener for Mozilla compatibility. | | [insertimage_callback] | The name of the function to be called when the "insertimage" command is executed. This function gets the url of the selected image and returns an array with src and alt as collection name. When using a new window, tinyMCE.insertImage is called on window.opener for compatibility with Mozilla.
Function format: insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action). | | [setupcontent_callback] | The name of the function to be called when the editor is initialized. Function format: setupContentCallback(editor_id, node), where editor_id is the id of the editor, and node is the body component node where the editor is located. | | [save_callback] | The name of the function to be called when the triggerSave command is invoked. Function format: save(id, content, node). If there is a specific return value, its value will be added to the HTML form component. So you can use this function to customize the user conversion logic. | | [docs_language] | The language used in TinyMCE documents. This should be an FN code like se, uk, us, etc. It is used to get documents from the "<theme>/docs/<lang>" directory. The default value of this option is the same as the language option. | | [width] | The width of the editor. Its default width is the width of the component that was originally replaced. | | [height] | The height of the editor. Its default height is the height of the component that was originally replaced. | | [content_css] | The CSS file to be used in the editing window, its path should be relative to the page. | | [popups_css] | CSS files used in pop-up windows when inserting links and images should have paths relative to the page. | | [editor_css] | The CSS file used by the editor, its path should be relative to the page. | | [encoding] | The output encoding of the editor. This option can currently only be "html" or empty. If set to "html", the editor's output will be HTML-encoded.
For example: < will become <, and so on. The default value is empty. | | [debug] | True/False option. If set to true, debug information like css file paths will be shown. | | [visual] | True/False option. If set to true, when the border is set to 0, the table will have a dotted line in the editor for better visual effect.
The default value is true. | | [visual_table_style] | Users can customize the style of the table, the default value is: "border: 1px dashed #BBBBBB". | | [add_form_submit_trigger] | True/False option. If set to true, will force all forms' "onsubmit" event handling to occur and trigger a save. The default value of this option is true. | | [add_unload_trigger] | True/False option. If set to true, a triggerSave call will be made to the current window when the "onunload" event occurs. This triggerSave call does not do any cleanup since it is meant to handle the forward/back buttons. The default value of this option is true. | | [force_br_newlines] | True/False option. This option forces the editor to replace paragraph characters (P) with line breaks (BR). The default value of this option is false. (Experimental stage) | | [force_p_newlines] | True/False option. If this option is turned on, Mozilla/Firefox browsers will generate paragraph characters (P) when pressing the Enter key and line breaks (BR) when pressing Shift+Enter. This option defaults to true. | | [relative_urls] | True/False option. If set to true, absolute paths will be converted to relative paths. The default value is true. | | [remove_script_host] | True/False option. If set to true, the hostname and port number in the URL will be removed if they match the editor's current location.
For example, if the editor is located at http://www.somesite.com, then the following link http://www.somesite.com/somedir/somepage.html will be converted to /somedir/somepage.html.
This option defaults to true if relative_urls is set to false. | | [focus_alert] | True/False option. If set to true, an annoying alert box will appear when the editor loses focus. The default value is true. | | [document_base_url] | The document's URL is used when converting an absolute path to a relative path. This option specifies the editor's current default document.
Note If this option specifies a domain name, add the protocol prefix and end it with a slash. For example: http://www.somehost.com/mydir/ | | [custom_undo_redo] | True/False option. This option makes the undo/redo functionality more complete. The default value is true. | | [custom_undo_redo_levels] | Customize the maximum number of undo operations. The default is unlimited. | | [custom_undo_redo_keyboard_shortcuts] | If used, the editor can use the Ctrl+Z and Ctrl+Y shortcuts to implement undo and redo. Allowed by default. | | [fix_content_duplication] | True/False option. This option fixes a content duplication bug in MSIE. Enabled by default, but can be disabled (false) for compatibility. | | [directionality] | This option can set the text direction for languages like Arabic. Possible values are: ltr, rtl. Default value: ltr (left to right). | | [auto_cleanup_word] | If enabled, HTML pasted from MS Office/Word will be automatically sanitized. The default value of this option is false.
Note: This operation is currently only supported in MSIE. | | [cleanup_on_startup] | If enabled, text fields and components will be cleaned up when the editor is initialized. The default value is false. | | [inline_styles] | If enabled, properties like width, height, vspace, hspace and align will be replaced by style attributes. The default value is false.
Remember to apply the style properties to the correct component when using this option. | | [convert_newlines_to_brs] | If enabled, all \n (new lines) will be converted to <br /> components when the editor starts. The default value of this option is false. | | [auto_reset_designmode] | Because there is a bug when calling style.display's none/block methods to show/hide a TinyMCE editor, the design mode needs to be reset. This option, once enabled, will automatically reset when the editor is focused. The default value is false. | | [entities] | A table of character codes to look up names in, where the elements are comma-separated lists of entities. The list is divided into odd-numbered items and even-numbered items, where the odd-numbered items are the character codes used for conversion and the even-numbered items are the entity names representing that character code. For example: "8205,zwj,8206,lrm,8207,rlm,173,shy". | | [cleanup_callback] | Custom cleanup function. This option allows the user to extend the default cleanup. This function call is separate from the default one and does not replace the default cleanup function, but merely extends it. Click Plugin Cleanup for more details. | | Advanced theme-specific settings | | [theme_advanced_toolbar_location] | This option is used to change the default position of the toolbar. Possible values are: "top" and "bottom". The default value is "bottom". | | [theme_advanced_toolbar_align] | This option is used to set the toolbar alignment to left, center or right. The default value is center. | | [theme_advanced_styles] | This option can be used to add CSS classes and names to the style dropdown. The format is as follows: "<title>=<class>;..".
If this option is not specified, the main content section CSS classes will be automatically imported.
For example: "Header 1=header1;Header 2=header2;Header 3=header3" | | [theme_advanced_buttons1] | A comma-separated list of buttons to include in the first row of the toolbar. For example: "bold,italic,underline".
The allowed button names are:
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, the difference is that it specifies the second row of the toolbar. | | [theme_advanced_buttons3] | Same as above, the difference is that it specifies the third row of the toolbar. | | [theme_advanced_buttons<N>_add] | Adds additional controls/buttons to a specific row N on the toolbar. For example: theme_advaned_buttons3_add : "iespell". | | [theme_advanced_buttons<N>_add_before] | Adds extra controls/buttons before the default buttons in the specified Nth row of the toolbar. For example: theme_advaned_buttons3_add_before : "iespell". | | [theme_advanced_disable] | Comma separated list of buttons/components to disable. For example: "formatselect". | | [theme_advanced_source_editor_width] | The width of the source editor window. | | [theme_advanced_source_editor_height] | The height of the source editor window. | | [theme_advanced_path_location] | The position of the component path list, possible values are: "top" or "bottom". Default value: "none" | | [theme_advanced_blockformats] | formatselect list is a comma-separated list of formats to be blocked. Default value: p,address,pre,h1,h2,h3,h4,h5,h6. |
The following is a more complex initialization example:
<!-- 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 use)
TinyMCE has a global instance that provides some common functions that can be called from the page.
--------------------------------------------------------------------------------
Syntax: tinyMCE.triggerSave([skip_cleanup]);
Description: Performs a clear operation and moves the editor contents back into the form field. tinyMCE automatically calls this function by adding a trigger to the form submit method.
parameter:
[skip_cleanup] - Disables the cleanup feature of the save trigger. Defaults to false. (Optional)
Returns: None
--------------------------------------------------------------------------------
Syntax: tinyMCE.updateContent(form_element_name);
Description: Transfer the contents of the form component to the editor. This operation is the opposite of triggerSave(). This method can be used when you want to dynamically change the editor content.
parameter:
form_element_name - The name of the form whose component you want to get the content of.
Returns: None
--------------------------------------------------------------------------------
Syntax: tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);
Description: This method finds an editor instance through the editor_id parameter and executes a command on this editor.
parameter:
editor_id - The editor instance ID or the component id/name if it is replaced.
command - The command to be executed. See the execCommand function for more details.
[user_interface] - Whether to use the user interface.
[value] - The parameter to pass when executing the command, for example, a URL.
Returns: None
--------------------------------------------------------------------------------
Syntax: tinyMCE.execCommand(command, [user_interface], [value]);
Description: This method executes a specific command by name in the selected editor.
parameter:
command - The command to be executed, for example: "Bold" or "Italic". You can view the Mozilla Midas spec at this link. However, tinyMCE also has some special commands as shown in the following table:
| mceLink | Opens the Insert Link dialog box and inserts a link. | | mceImage | Opens the Insert Image dialog box and inserts an image. | | mceCleanup | Remove unnecessary components and attributes from the HTML code. | | mceHelp | Open the documentation page. | | mceInsertTable | Insert a table at the mouse position, the default size is: 2×2. If the value parameter is specified in the execCommand function, its format must be an array of the form name/value, where name has the following options: cols, rows, border, cellspacing, cellpadding. The default size of the border is: 0. | | mceTableInsertRowBefore | Insert a line before the current cursor position. | | mceTableInsertRowAfter | Insert a line after the current cursor position. | | mceTableDeleteRow | Delete the row where the mouse is currently located. | | mceTableInsertColBefore | Insert a column before the current cursor position. | | mceTableInsertColAfter | Insert a column after the current cursor position. | | mceTableDeleteCol | Delete the column where the mouse is currently located. | | mceAddControl | Adds a component control to the editor whose id/name is specified by value. | | mceRemoveControl | Removes a specific control by editor_id name. value is the editor_id (editor ID) to be removed. The editor ID format is as follows: "mce_editor_<index>".
You can also use DOM component IDs and form names. | | mceFocus | Gives focus to the editor with ID value. The editor ID format is as follows: "mce_editor_<index>". You can also use DOM component IDs and form names. | | mceSetCSSClass | Set CSS class properties, or create a new span in the select box. The value of value is the CSS class name to be assigned to the selected component or the name of the span component to be created. | | mceInsertContent | Insert the contents of value at the current cursor position. | | mceReplaceContent | Replaces the current selection with the HTML code in value. The {$selection} variable is replaced by the textual contents of the current selection. | | mceSetAttribute | Sets properties for the currently selected component. The value of this command should be a name/value array with the following parameters:
name - the name of the property to set.
value - the property value to be set.
[targets] - The target component to add the attribute to. The default is: p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address.
Example of use:
tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'}); | | mceToggleVisualAid | Whether to enable visual assistance mode | | mceAnchor | Inserts a name anchor. value is the name of the anchor point. | | mceResetDesignMode | Resets the design mode state of all editor instances. In Firefox, this command is useful when the editor is placed in a tab or is hidden with style.display="none/block". This command is called when the editor is redisplayed. | | mceSelectNode | Selects the node/component specified by value. At the same time, this command will scroll the editor to the location of this component. | | mceSelectNodeDepth | Selects the specified node/component from the current node by depth relationship. So a value of 0 will select the currently focused node. At the same time, this command will scroll the editor to the location of this component. |
user_interface - Specifies whether a command will display a user interface. True/False option.
value - The value to be passed to the command. For example, when you insert a link, this is the URL of the link.
Returns: None
Example: | <a href="javascript :tinymce.execCommand('Bold'); "> [Do bold]</a> |
Syntax: tinyMCE.insertLink(href, target);
Description: This method inserts a link at the cursor position of the currently selected editor instance, or updates an existing link with new data. When you create your own theme, this method should be called when the OK button is pressed in the popup window that inserts the link.
parameter:
href - The address/URL of the link.
target - the target of the link.
Returns: None
Syntax: tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);
Description: This method inserts an image at the cursor position of the currently selected editor instance, or updates an existing image with new data. When you create your own theme, this method should be called when the OK button in the popup window that inserts the image is pressed.
parameter:
src : The image address.
alt - Alternative text for the image.
border - The image border.
hspace - Horizontal image spacing.
vspace - vertical spacing of the image.
width - width of the image.
height - Image height.
align - Image alignment.
title – The title of the image link.
onmouseover - event handler for when the mouse is over the image.
onmouseout - event handler for when the mouse moves out of the image.
Returns: None
Syntax: tinyMCE.triggerNodeChange();
Description: This method is called when the editor undergoes external changes. This method then calls back to the subject's "handleNodeChangeCallback" method.
Parameters: None
Returns: None
Syntax: tinyMCE.getContent();
Description: This method returns the HTML content in the currently selected editor. If there is no selected editor, the method returns null.
Parameters: None
Returns: The HTML content of the currently selected editor or null.
Syntax: tinyMCE.setContent(html);
Description: This method sets the HTML content of the currently selected editor.
parameter:
html - The HTML source code to set.
Returns: None.
Syntax: tinyMCE.getEditorInstance(editor_id);
Description: This method returns an editor instance by editor_id.
parameter:
editor_id - The editor instance to get.
Returns: editor instance (TinyMCEControl).
Syntax: tinyMCE.importThemeLanguagePack([theme]);
Description: This method imports a specific language pack in the theme. This method can be called in custom themes.
parameter:
[theme] - The name of the current theme. This option is optional, and defaults to the global "theme" setting. This parameter is very useful in theme plugins.
Returns: None.
Syntax: tinyMCE.importPluginLanguagePack(plugin, valid_languages);
Description: This method imports a plugin-specific language pack. This method can be called from custom plugins.
parameter:
plugin - The name of the current plugin.
valid_languages - A comma-separated list of supported language packs.
Returns: None.
Syntax: tinyMCE.applyTemplate(html);
Description: This method replaces the settings and language variables in the theme.
parameter:
html – HTML code to replace theme variables.
Returns: The converted HTML code.
Syntax: tinyMCE.openWindow(template, [args]);
Description: This method opens a new window by getting the width, height and html data from the specified template parameter. The array parameter args contains the variable names to be replaced.
There are also some custom window parameters:
mce_replacevariables - Enable/disable language/variable replacement in HTML documents. Enabled by default.
mce_windowresize - Enable/disable the automatic resizing feature of popup windows, enabled by default.
parameter:
template - Name/Value array with width, height, html and file as keys.
[args] - A Name/Value array containing the variable names to be replaced. Key-value variables in the template file are replaced by the parameter list.
For example: image.php?src={$src} is replaced by: image.php?src=image.gif.
Returns: None.
Syntax: tinyMCE.getWindowArg(name, [default_value]);
Description: This method returns the window parameters according to name. It can be used in pop-up windows in the theme to get the parameters in the dialog box.
parameter:
name - the name of the window parameter to get.
[default_value] - The default value returned when the window parameter is missing.
Returns: the value of the window parameter.
Syntax: tinyMCE.setWindowArg(name, value);
Description: This method sets window parameters according to name. For example, it is very useful when a plug-in calls other plug-ins.
parameter:
name - The window parameter to be set.
value - The value to be set in the window parameter.
Returns: Window parameter value.
Syntax: tinyMCE.getParam(name, [default_value], [strip_whitespace]);
Description: This method returns the configuration parameters of TinyMCE.
parameter:
name - The name of the window parameter to get.
[default_value] - The default value returned when the window parameter is missing.
[strip_whitespace] - If true, all whitespace characters in the return value will be stripped. Default: false. TinyMce User Experience
tinyMce is a powerful js-based rich text editor.
Official homepage: http://www.tinymce.com/
Now the latest version is 3.4.7. The functions of this editor are almost comparable to those of Microsoft Office. All editing tools in the editor can be customized, and most advanced functions are added in the form of plug-ins. Developers can add/delete their own functions as needed.
First download the tinyMce development kit (it is recommended to download the dev version, which contains a large number of examples and you can also view the source code)
Download link: https://www.jb51.net/codes/44180.html http://www.tinymce.com/download/download.php
Then add the tinyMce file to the web page you need to use
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
You only need to add a js file, and tinyMce will load the other css and js required by it.
Then put a <textarea id="myRTE"></textarea> in the <body> of the page
Finally, use the init method of tinyMce and bind the textarea in the method configuration.
jsp page code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Word processor example</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- TinyMCE --> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", theme : "advanced", skin : "o2k7", plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example word content CSS (should be your site CSS) this one removes paragraph margins content_css : "css/word.css", // Drop lists for link/image/media/template dialogs template_external_list_url : "lists/template_list.js", external_link_list_url : "lists/link_list.js", external_image_list_url : "lists/image_list.js", media_external_list_url : "lists/media_list.js", // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); </script> <!-- /TinyMCE --> </head> <body> <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true"> <h3>Word processor example</h3> <p> This page shows you how to configure TinyMCE to work more like common word processors. There are more examples on how to use TinyMCE in the Wiki. </p> <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <p>This is the third paragraph.</p> </textarea> <input type="submit" name="save" value="Submit" /> <input type="reset" name="reset" value="Reset" /> </form> <script type="text/javascript"> if (document.location.protocol == 'file:') { alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver."); } </script> </body> </html>
In addition, all the required js files are in the jscripts under the tinymce_3.5_dev file downloaded from the official website. Put this folder under the webroot in myeclipse
|
