Use of tinymce
Http://tinymce.moxiecode.com/download.php
Don't forget to download the Language Pack
After downloading the package, decompress the package and use it. Check the directory structure first.
+-Docs help document
+-Examples
+-Jscripts Program Subject
+-Tiny_mce
+-Langs Language
+-Plugins
+-Themes topic
+-Utils component
Overwrite the file in the tiny_mce package to the file in the directory with the same name.
Then you can take a look at the documentation under the doc is good, there are also Chinese online can download the http://www.inpeck.com/TinyMceManual/TinyMceManual.rar from the following address
In fact, it is easy to use. You can also check the document when configuring some parameters.
You can refer to several small official examples. The following is a simple description:
Create a simple HTML file first
<HTML>
<Head>
<Title> tiny_mce example </title>
<Script language = "JavaScript" type = "text/JavaScript" src = "jscripts/tiny_mce/tiny_mce.js"> </SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
Tinymce. INIT ({
Theme: "advanced ",
Mode: "exact ",
Elements: "AA ",
Save_callback: "customsave ",
Content_css: "example_advanced.css ",
Extended_valid_elements: "A [href | target | Name]",
Plugins: "table ",
Language: "zh_cn ",
Theme_advanced_buttons3_add_before: "tablecontrols, separator ",
Theme_advanced_styles: "header 1 = header1; header 2 = header2; header 3 = header3; Table ROW = tablerow1", // theme specific setting CSS classes
Debug: false
});
</SCRIPT>
</Head>
<Body>
The following is a textarea with the name AA
<Textarea name = "AA" style = "width: 100%" rows = "15">
</Textarea>
</Body> In this way, the textarea of name = AA can be replaced with tinymce.
There are many parameters. It is best to refer to the document for more information,
The following is a description on the Internet. The address is:
Http://my.opera.com/smile_bug/blog/show.dml/261237
Several common parameter descriptions: (detailed descriptions are provided in the compressed package's docs)
Mode: textareas/specific_textareas/exact
Textareas: replace all textarea on the current page with the editor
Specific_textareas: Not very clear (Specific textarea ??), Use with textarea_trigger
Exact: replace Div or textarea with the specified ID as the editor, which must be used with elements. As mentioned in the example.
Theme: Advanced/simple
Advanced: Advanced Mode with more features. (Default)
Simple: basic mode, with only basic functions.
Plugins: advhr/advimage/advlink/contextmenu/emotions/flash/autosave/style/Layer/iespell/insertdatetime/paste/preview/print/save/noneditable/spellchecker/searchreplace/table/zoom/ directionality/fullscreen/fullpage/inlinepopups/fullpage
These are built-in plug-ins, which can be understood by their names. There are some plug-ins with other functions on the website. You can go and put them in the plug-in directory.
("-" Added so that MCE does not try to load this plug-in from the plug-in directory, such as plugins: "table, contextmenu, paste,-externalplugin ")
Language: EN/zh_cn/zh_cn_utf8 ......
Set the language to be used. On the website, note that both Chinese Simplified and Traditional Chinese have two types of uft8. be sure to use the page encoding.
(Eg: language: "en ")
Width:
Height:
Set the editor width and height
Relative_urls: false/true, (default: True)
Remove_script_host: false/true, (default: True)
(Eg: relative_urls: false,
Remove_script_host: false
In this way, the content will use an absolute path, that is, the domain name will be added .)
Theme_advanced_toolbar_location: ToP/bottom (default: Bottom)
Theme_advanced_toolbar_align: Left/center/right (default: Center)
Theme_advanced_buttons <1-N>
Theme_advanced_buttons <1-N> _ add
Theme_advanced_buttons <1-N> _ add_before
Here are some settings under the advanced topic.
Theme_advanced_toolbar_location, theme_advanced_toolbar_align, and theme_advanced_statusbar_location respectively set the positions of the toolbar, alignment, and status bar.
Theme_advanced_buttons <1-N> specifies the button for the nth row.
Theme_advanced_buttons <1-N> _ Add add a button to the end of the n-th row
Theme_advanced_buttons <1-N> _ add_before
(Eg: theme_advanced_buttons3 :'',
Theme_advanced_buttons2_add: "insertdate, inserttime ",
Theme_advanced_buttons2_add_before: "zoom"
In this way, the third row is empty, that is, it is not displayed. The Insert Date and time are added to the back of the second row, and the insert zoom starts in the second row)
Study the parameters and select some of your favorite configurations. Of course, there are still a lot of functions. Let's take a look at the documentation and you will be able to easily apply it to your project in the future.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
