How to Use the jQuery editing plug-in TinyMCE

Source: Internet
Author: User

JQuery editing plug-in TinyMCE is an html editing plug-in that can be easily integrated into your system. Unlike FckEditor, TinyMCE requires specialized background language integration. TinyMCE can easily integrate asp.net, php, java can easily perform extension and secondary development.

Download case after modifying the simplified file size: download the file to your local device

Free in http://linux.bkjia.com/

The username and password are both www.bkjia.com

The specific download directory is available in/June 26/June 26/July 26/jQuery editing plug-in TinyMCE usage

For the download method, see

1 html

<Textarea id = "txtcontent" runat = "server" name = "elm1" rows = "15" cols = "80" style = "width: 80%"> </textarea>

2. js reference
Reference tiny_mce.js and jquery-1.4.2.min.js first
TinyMCE call:

<Script type = "text/javascript">
TinyMCE. init ({
// General parameter configuration
Mode: "textareas ",

Theme: "advanced ",

Plugins: "pagebreak, style, layer, table, save ",

// Configure topic Parameters
Theme_advanced_buttons1: ", bold, italic, underline, strikethrough ",
Theme_advanced_buttons2: "",
Theme_advanced_toolbar_location: "top ",
Theme_advanced_toolbar_align: "left ",
Theme_advanced_statusbar_location: "bottom ",
Theme_advanced_resizing: true,

// You can change your style here
Content_css: "css/word.css ",

External_link_list_url: "lists/link_list.js ",

// Replace values for the template plugin
Template_replace_values :{
Username: "Some User ",
Staffid: 991234 ″
}
});
</Script>

Parameters:
Mode: textareas or exact
Elements: used with exact in mode. Its value is the id or name of the textaear to be used in html.
Theme: the style used.
Skin: Find the style under the corresponding skin directory
Skin_variant: css selection for files in the skin directory, for example, skin_variant: "black" indicates skins \ o2k7 \ ui_black.css
Plugins: select and use the INS under the plugins folder
Theme_advanced_buttons1: display the function buttons of the first line, and theme_advanced_buttons2.

3. Expansion
Append an image to the input box using js and display it. The js Code is as follows:

TinyMCE.exe cCommand ('mceinsertcontent', false, "<p> </p> ");

Obtain the content of the input box using js. The Code is as follows:
TinyMCE. getInstanceById ('txtcontent'). getBody (). innerHTML

TinyMCE details: click here
TinyMCE: click here

Recommended reading:

Install jira4.1.2forLinux and hack Rich Text Editor TinyMCE

Usage configuration of TinyMCE

TinyMCE User Manual

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.