Usage configuration of TinyMCE

Initialization

When initializing TinyMCE, add the following code to the HEAD tag of the page. According to the settings in the following example, all TEXTAREA text fields are converted to the editor during page loading. There are other modules, which will be detailed 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 above red part is the location of the tiny_mce.js script file, which contains all the code required by the editor. The subject and Language Pack will be loaded during initialization.

The blue part is the initialization call, which generates a global instance of TinyMCE. The settings and name-value attributes will be described later.



Set



The setting of the init method passed to tinyMCE as the name-Value Attribute controls the global behavior of the program. The following table lists all keys and possible key values. Note that names enclosed in [] are optional and are not required.

General settings
Mode	Mode can be one of the following values: Textareas-converts all TEXTAREA components into an editor when loading a page. Specific_textareas-convert all TEXTAREA with the "mce_editable" attribute value true to the editor. Exact-only converts to the exact component specified in the "elements" setting.
[Theme]	Specifies the name of the topic to be used. The topic is placed in the themes directory of TinyMCE. The default value is default. TinyMCE comes with three built-in themes: simple, default, and advanced. If you want to create your own topic, read the topic section of the document carefully.
[Plugins]	This option is a list of theme plug-ins separated by commas (, for example, it can be used only to expand the image dialog box ). These plug-ins cover the features defined in the theme template. The plug-in logic should be contained in a file named "editor_plugin.js", which is the only file contained in the plug-in directory. For example: "my_image_dialog, my_link_dialog ". If you want to create your own plug-in, read the topic section of the document carefully.
[Language]	The Language Pack used in TinyMCE. This should be FN Code such as se, uk, and us, which is used to obtain the language pack from the "langs" directory, the default value is "uk ". For Chinese users, we recommend that you use "zh-CN"
[Elements]	The list of components separated by commas (,) to be converted to the editor. This option is only used when the "mode" option is set to "exact. The element in the list can be any HTML component with the id or name attribute.
[Ask]	When "mode" is set to "textareas" or "specific_textareas", this option is applied to ask whether the user input box will be converted into an editor. If you want to use this option, set it to true.
[Textarea_trigger]	Attributes of a textarea (text field) trigger. The default value is "mce_editable ". This option is only used when "mode" is set to "specific_textareas.
[Valid_elements]	List of component conversion parts separated by commas. 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" and convert Element B to strong, by default, target is set to "_ blank" and href, target, and align attributes are maintained. When matching the component and attribute names, you can use the like *, + ,? Such a wildcard. Character: , The delimiter between each component definition. / The delimiter between two synonymous components. The first component is the one that will be used for output (that is, the second component is replaced by the first component ). | The delimiter between attribute definitions. [ Defines the start symbol of the attribute list of a component. ] Defines the end symbol of the attribute list of a component. = Set the default value of an attribute to a specific value. Example: "target = _ blank" : Forcibly set the attribute value to a specific value. Example: "border: 0" < Verify the value of an attribute. Example: "target <_ blank? _ Self" ? The delimiter between the property check values. Special variables: {$ Uid}-generates a unique ID number. Example: "p [id: {$ uid}]". The default value of this option is the following mode: "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 * [*], which is particularly useful when using the invalid_elements option.
[Extended_valid_elements]	Add available components 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]	List of component names to be excluded from the output, separated by commas.
[Trim_span_elements]	True/False. If this parameter is set to true, unnecessary components are removed. The default value is true.
[Verify_css_classes]	True/False. If it is set to true, the class attribute of CSS is verified. The default value is true.
[Verify_html]	True/False. Whether the HTML content needs to be verified. The default value is true.
[Urlconvertor_callback]	The name of the function called when the cleanup process processes the URL. This function must follow the following format: func (url, node, on_save) and return the converted URL. This setting is designed for integration purposes. The url parameter indicates the address to be converted, the node indicates the node containing the URL, and on_save is a Boolean value (true when the user submits the form ).
[Preformatted]	True/False. If it is set to true, the editor converts tabs into indents. In addition to other whitespace (blank characters, line breaks, etc.) characters, it is like the effect of PRE in HTML tags. The default value is false.
[Insertlink_callback]	The name of the function called when the "insertlink" command is executed. This function obtains the address and target of the selected link and returns an array named "href", "target", and "title. When a new window is used, tinyMCE. insertLink is called on window. opener (the parent window in the pop-up window) to be compatible with Mozilla.
[Insertimage_callback]	The name of the function called when the "insertimage" command is executed. This function retrieves the url of the selected image and returns an array named "src" and "alt. To be compatible with Mozilla, tinyMCE. insertImage is called on window. opener. Function Format: insertimage (src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action ).
[Setupcontent_callback]	The name of the function 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 of the editor.
[Save_callback]	The name of the function called when the triggerSave command is called. Function Format: save (id, content, node). If a specific return value exists, the value is added to the HTML form component. Therefore, you can use this function to customize user conversion logic.
[Docs_language]	The language used in the TinyMCE document, which should be FN Code such as se, uk, us, etc, it is used to obtain documents from the "<theme>/docs/<lang>" directory. The default value of this option is the same as that of the language option.
[Width]	The editor width. The default width is the width of the component that was replaced.
[Height]	The height of the editor. The default height is the height of the previously replaced component.
[Content_css]	The path of the CSS file to be used in the editing window should be page-related.
[Popups_css]	The path of the CSS file used in the pop-up window for inserting links and images should be related to the page.
[Editor_css]	The path of the CSS file used by the editor should be page-related.
[Encoding]	Editor output encoding. Currently, this option can only be "html" or empty. If it is set to "html", the output of the editor is HTML encoded. For example, <is changed to <. The default value is null.
[Debug]	True/False. If it is set to true, debugging information such as the css file path will be displayed.
[Visual]	True/False. If it is set to true, when the border is set to 0, a dotted line appears in the table in the editor to achieve better visual effects. The default value is true.
[Visual_table_style]	You can customize the style of a table. The default value is "border: 1px dashed # BBBBBB ".
[Add_form_submit_trigger]	True/False. If it is set to true, the "onsubmit" event of all forms is forcibly processed and saved. The default value of this option is true.
[Add_unload_trigger]	True/False. If it is set to true, a triggerSave call is triggered in the current window when the "onunload" event occurs. This triggerSave call does not perform any cleanup, because it is used to process the forward/backward buttons. The default value of this option is true.
[Force_br_newlines]	True/False. This option forces the editor to replace paragraph symbols (P) with line breaks (BR ). The default value of this option is false. (Experimental phase)
[Force_p_newlines]	True/False. If this option is enabled, the Mozilla/Firefox browser generates a paragraph symbol (P) When you press Enter. A line break (BR) is generated when you press Shift + Enter ). The default value of this option is true.
[Relative_urls]	True/False. If it is set to true, the absolute path is converted to the relative path. The default value is true.
[Remove_script_host]	True/False. When it is set to true, if the host name and port number in the URL are consistent with the current location of the editor, they will be removed. For example, if the site where the editor is located is a http://www.somesite.com, the following link http://www.somesite.com/somedir/somepage.html will be converted to/somedir/somepage.html. If relative_urls is set to false, this option is set to true by default.
[Focus_alert]	True/False. If it is set to true, an annoying warning box will appear when the editor loses focus. The default value is true.
[Document_base_url]	This document URL is used when converting an absolute path to a relative path. This option specifies the current default document of the editor. Note: If this option is specified to a domain name, add the Protocol prefix and end with a slash. Example: http://www.somehost.com/mydir/
[Custom_undo_redo]	True/False. This option improves the Undo/Redo function. The default value is true.
[Custom_undo_redo_levels]	You can customize the maximum number of Undo operations. The default value is unlimited.
[Custom_undo_redo_keyboard_shortcuts]	If the editor is used, you can use the Ctrl + Z and Ctrl + Y shortcut keys to undo and redo. By default.
[Fix_content_duplication]	True/False. This option fixes a duplicate content bug in MSIE. It is enabled by default, but can be disabled (false) for compatibility ).
[Directionality]	This option can be used to set the text direction for languages such as Arabic. Possible values: ltr and rtl. Default Value: ltr (left to right ).
[Auto_cleanup_word]	If enabled, HTML pasted from MS office/Word will be cleared automatically. The default value of this option is false. Note: Currently, this operation only supports MSIE.
[Cleanup_on_startup]	If enabled, text fields and components will be cleared during editor initialization. The default value is false.
[Inline_styles]	If enabled, attributes such as width, height, vspace, heat map, and align will be replaced by style attributes. The default value is false. When using this option, remember to apply the style attribute to the correct component.
[Convert_newlines_to_brs]	If enabled, all \ n (New Line) will be converted to <br/> components at editor startup. The default value of this option is false.
[Auto_reset_designmode]	The design mode needs to be reset because there is a bug when calling the none/block Method of style. display to show/hide a TinyMCE editor. Once enabled, this option is automatically reset when the editor is focused. The default value is false.
[Entities]	A table with names searched by character code. the elements in the table are Entity lists separated by commas. This list is distinguished by odd and even items. The odd items are the character code used for conversion, and the even items represent the entity name of the character code. For example: "8205, zwj, 8206, lrm, 8207, rlm, 173, shy ".
[Cleanup_callback]	Custom cleanup function. This option can be expanded based on the default cleanup. This function call is separate from the default call. It does not replace the default clean-up function, but is just an extension. Click plug-in cleanup to view more details.
Advanced Settings of a topic
[Theme_advanced_toolbar_location]	This option is used to change the default position of the toolbar. Possible values: "top" and "bottom ". The default value is "bottom ".
[Theme_advanced_toolbar_align]	This option is used to set whether the alignment of the toolbar is left, center, or right. The default value is center.
[Theme_advanced_styles]	This option can be used to add the CSS class and name in the style drop-down box. The format is as follows: "<title >=< class> ;..". If this option is not specified, the CSS class of the main content is automatically imported. Example: "Header 1 = header1; Header 2 = header2; Header 3 = header3"
[Theme_advanced_buttons1]	The list of buttons to be included in the first line in the toolbar, separated by commas. For example, "bold, italic, underline ". The button names are as follows: 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, struct, forecolor, charmap, visualaid, spacer, cut, copy, paste
[Theme_advanced_buttons2]	The same as above. The difference is that the second line of the toolbar is specified.
[Theme_advanced_buttons3]	The difference is that the third line of the toolbar is specified.
[Theme_advanced_buttons <N> _ add]	Add additional control/buttons to the N-th line in the toolbar. Example: theme_advaned_buttons3_add: "iespell ".
[Theme_advanced_buttons <N> _ add_before]	Add additional controls/buttons to the default button for the specified N row on the toolbar. For example, theme_advaned_buttons3_add_before: "iespell ".
[Theme_advanced_disable]	List of buttons/components to be disabled, separated by commas. For example: "formatselect ".
[Theme_advanced_source_editor_width]	The width of the source file editor window.
[Theme_advanced_source_editor_height]	The height of the source file editor window.
[Theme_advanced_path_location]	The location of the component path list, which may be "top" or "bottom ". The default value is "none"
[Theme_advanced_blockformats]	List of formats to be blocked in the formatselect list, separated by commas. Default Value: p, address, pre, h1, h2, h3, h4, h5, h6.

Next, let's take a look at the highlights of page 2nd:

TinyMCE details: click here
TinyMCE: click here

Recommended reading:

Install jira4.1.2forLinux and hack Rich Text Editor TinyMCE

1 2 3 Next Page