Xheditor Editor Basics _ Web Editor

Source: Internet
Author: User
Tags file upload numeric value

1.1. An overview of the online visual HTML editor

One of the most common behaviors in Web applications is the release and exchange of information and speech. In the information release at the same time, there will be information on the release of the format, type and functional requirements, such as: bold, underline and so on, so that the text information can be more beautiful image conveyed to the reader, but also improve the efficiency of information publishing. In the context of this requirement, the HTML online editor has emerged.

As the name suggests, the online HTML editor is the online editing of HTML code tools, it is often used in message board messages, forum posts, blog Writing log or the need for users to input HTML places, is one of the common Web application modules. The online HTML editor can add a variety of colorful text effects to the editing content, as well as provide a variety of convenient and quick operation functions, and maximize the efficiency of editing. Online HTML editor is an indispensable component of any website, and it is a powerful tool for Internet users to gallop the network.


1.2. Get Xheditor

You can visit the Xheditor official website to download the latest version of the Xheditor editor, xheditor the official website address is: http://xheditor.com/, open the right corner of the free download | Code Wizard link to find the latest version of the download address.

Xheditor without any installation, without any settings, directly uncompressed and copied to your site corresponding folder can be called directly below.


1.3. Xheditor Operating Environment

Xheditor is developed based on browser-based HTML, CSS, and JavaScript environments, so in principle most of the browsers in the market are running perfectly, and currently tested browser compatibility lists are as follows: IE 6.0+,firefox 3.0+,opera 9.6+, Chrome 1.0+,safari 3.22+ (+ symbol for all new versions later). Xheditor is completely browser-based, so there is no operating system selectivity and is completely cross-platform. Xheditor can also be applied to any server-side language environment, such as: PHP, ASP, ASP.net, Java, etc., you can in your CMS, blogs, forums, malls and other Internet platforms perfect embedded operation, can be very flexible and simple and your system to achieve seamless convergence.


1.4. Xheditor Basic Use Guide

You can learn to use xheditor simply by following these simple steps:
Download the latest version xheditor:http://xheditor.com/download
Unzip the downloaded compressed file, upload the xheditor-zh-cn.min.js and Xheditor_emot, Xheditor_plugins, and Xheditor_skin three folders to the appropriate folder in the Web site
Add the following code before the end of the page head tag that requires calling the Xheditor editor:
<script type= "Text/javascript" src= "/js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "/js/xheditor-zh-cn.min.js" ></script>
Note: jquery and xheditor of the JS file path, according to your site specific path situation to modify
Add in the TextArea property of the text box that you want to implement visualization:
Class= "Xheditor {skin: ' Default '}"
Note: The front main parameter can also be xheditor-mfull, Xheditor-mini, or xheditor-simple, loaded with multiple rows of full, mini, and simple toolbars respectively. The following braces are used to define more initialization parameters and can be omitted.

After the above steps, you have successfully installed the Xheditor Editor on your Web page. If you need to learn more about the use of Xheditor editors, see: Xheditor advanced use.
2. Xheditor Advanced Use
2.1. Advanced Use Guidance
2.2. Initialize parameter list
2.3. API function Interface List
2.4. Upload Program Development Specification
2.5. Plugin Development Guide
2.6. Skin Design Guide
2.7. About two development

2.1. Advanced Use Guidance

Read this chapter first: Xheditor basics, if you are already familiar with the basic use of xheditor, please continue.

Xheditor provides two ways to initialize the editor:
Method 1: Use the class attribute to initialize and pass various initialization parameters, for example:
Class= "Xheditor {skin: ' Default '}"
Method 2: Use the jquery plug-in interface provided by Xheditor to implement initialization and transfer parameters for a particular textarea, for example:
$ (' #elm1 '). Xheditor ();
Or
$ (' #elm1 '). Xheditor ({tools: ' mini '});

Special note: Two initialization methods can only choose one use, if the two methods of the code in the same page, Method 2 code does not have any effect.

We are more likely to recommend using Method 1 because it is simpler to use and does not involve any JavaScript code. The editor interface for various effects can be customized with simple parameter settings, easy to use and powerful.

If you want to implement more complex interactive applications, or if you want the Xheditor editor to be able to access your JavaScript code for each other, you can choose to use Method 2, which is relatively more free space.

Xheditor also provides an instant Uninstall editor method:
$ (' #elm1 '). Xheditor (false);

2.2. Initialize parameter list

Initialize parameter Sample code:
$ (' #elm1 '). Xheditor ({tools: ' Full ', skin: ' Default ', Showblocktag:true,internalscript:false,internalstyle:false, Width:300,height:200,loadcss: ' Http://xheditor.com/test.css ', fullscreen:true,sourcemode:true,forceptag:true, Upimgurl: "upload.php", Upimgext: "Jpg,jpeg,gif,png"});

Initialize parameter list:
Tools: Customizing Tool buttons
Parameter values: Full (complete), Mfull (multiple lines complete), simple (easy), Mini (mini)
or a custom string, for example: ' Cut,copy,paste,pastetext,|,source,fullscreen,about '

Full button table:
|: Separator
/: Force line Wrap
Cut: Cutting
Copy: Copying
Paste: Paste
Pastetext: Text Paste
Blocktag: Paragraph Labels
Fontface: Fonts
FontSize: Font Size
Bold: Bold
Italic: Italic
Underline: Underline
Strikethrough: underlined
FontColor: Font Color
BackColor: Font background color
SelectAll: Select All
Removeformat: Delete text formatting
Align: Aligning
List: Lists
Outdent: Reduce indentation
Indent: Increasing indentation
Link: Hyperlinks
Unlink: Delete link
IMG: Pictures
Flash:flash Animation
Media:windows Media Player Video
Emot: Facial expression
Table: Tables
Source: Switching mode
Preview: Previewing the current code
Print: Printing
Fullscreen: Toggle Full-screen Mode
About: About Xheditor
Skin: Skin Style selection
Parameter values: Default Style, O2007blue (Office 2007 Blue), O2007silver (Office 2007 Silver), Vista (Vista), Nostyle (Nostyle)
Layershadow: The depth of the shadow (the background shadow of the button panel and the modal window)
Parameter value: 0 (No shadow displayed), greater than 0 value (show Shadow and set Shadow depth)
Clickcanceldialog: Click anywhere to cancel the button panel function
Parameter value: Default True (Open click Cancel function), False (off Click Cancel function, must click "Cancel" button to close button panel)
Showblocktag: Show paragraph labels
Parameter value: True (display paragraph label), False (not shown)
Linktag: Style link link label retention status
Parameter value: True (Preserve style link link label), False (Clean style link link label)
Internalscript: Internal JS code retention status
Parameter value: True (keep internal JS code), False (clean internal JS code)
InlineScript: Inline JS code retention status
Parameter value: True (keep inline JS code), False (clean inline JS code)
Internalstyle: Internal style retention status
Parameter value: True (Preserve internal style), false (clean internal style)
Inlinestyle: inline style retention status
Parameter value: True (preserve inline style), false (clean inline style)
Width: Editor Widths
Parameter values: Numbers with no units, example: 300
Height: Editor Height
Parameter values: Numbers with no units, example: 100
LOADCSS: Load Style
Parameter values: URL address, URL array, and direct internal style, for example: ' 1.css ', [' 1.css ', ' 2.css '], ' <style>body{font-size:20px ' </style> ' <br/> Note: 1.0.0 RC3 new Add load internal style feature
Fullscreen: Default Full-screen display
Parameter value: True (full screen size), False (standard size)
Sourcemode: Default source code mode
Parameter value: True (source code mode), False (edit mode)
Forceptag: Force P label
Parameter value: True (Force P tag), False (not mandatory), default True
Forcepastetext: Forces the pasted content to be converted to text
Parameter value: True (forced text), False (does not turn text), default false
Note: v1.1.0 newly added
Disablecontextmenu: Disables the edit area's right button menu
Parameter value: True (disable right-click menu), False (not available), default false
Note: v1.1.0 newly added
Editorroot: The root path of the editor JS file
Parameter values: The root path of the editor, which, in some special cases, locates the editor's root path, defaults to NULL, and reads the default editor root path
Note: v1.1.0 newly added
Shortcuts: Customizing keyboard shortcuts
Parameters: An object array of shortcut key corresponding event codes
Example: {' Ctrl+enter ': function () {$ (' #frmTest '). Submit ();
Note: 1.0.0 Beta2 new additions
URLBase: Base address of relative URL
Parameter: The URL address of the string to resolve the resource location problem that is not in the same path before and after
Note: 1.1.0 newly added
Urltype: Local URL address cast method selection
Parameters: ABS (absolute path), root (Root path), rel (relative path)
Note: 1.0.0 beta2 new Add, v1.1.0 version of the name changed from Localurl to Urltype
Emotpath: Modify the URL root path of the expression picture
Parameter: URL address of string, default is null, point to default expression under editor path
Note: 1.1.0 newly added
Emotmark: Whether to mark Emot attributes on the expression img tag
Parameter: True (callout), false (not callout), default to False
Note: If you use the UBB plug-in, set this property to True
Note: 1.0.0 Beta2 new additions
Emots: Adding Custom expressions
Parameters: Can define multiple JSON object arrays, examples are as follows: {qq:{name: ' QQ ', Count:55,width:25,height:25,line:11},msn:{name: ' MSN ', count:40,width:22, Height:22,line:8}}
Name: Expression Group name
Count: Number of expressions
List: Emoticons, example: {test1: ' expression 1 ', test2: ' Expression 2 '}, the key name represents the filename, the extension must be GIF, the key value represents the ALT information
Width: Single expression area wide, must be greater than or equal to the maximum expression width
Height: Single expression of the region, must be greater than or equal to the maximum expression height
Line: Single display number of expressions
Description: Count and list must select one of the values, note that the count mode insert expression img alt is empty
Note: 1.0.0 Beta2 new additions
Worddeepclean:word Document Depth Cleanup options
Parameters: True (deep cleanup), false (do not drill down, preserve style style effects), default to True
Note: If the site application needs to retain more word style effect, set this value to false, but the resulting HTML code volume will be greatly increased
Note: 1.0.0 Beta2 new additions
Hoverexecdelay: Time to pause for automatic execution of delays
Parameters: Numeric value (in milliseconds), defaults to 100, set to-1 to turn off this feature
Note: 1.0.0 RC2 new additions
Deflinktext: Default text for hyperlinks
Parameter value: string (Default: "Click Open Link")
Description: This parameter value is used only if no content is selected
Default width of Modalwidth:showmodal pop-up window
Parameter value: Numeric value, defaults to 350
Description: Default width of pop-up window
Default height of the Modalheight:showmodal pop-up window
Parameter value: Numeric value, defaults to 220
Description: Default height of pop-up windows
Whether the Modaltitle:showmodal pop-up window displays the top title bar
Parameter value: True (displayed), False (not displayed)
Description: Control whether the pop-up window shows the top of the title bar, the default for display, if you need to display a more customized to personalize the iframe window, you can hide the above title bar through this parameter
Upbtntext: The text of the upload button
Parameter value: Any string, default value: "Upload"
Note: 1.0.0 Beta2 new additions
Html5upload: Whether to open HTML5 upload support
Parameter value: True (Allowed), false (not allowed), default to True allow
Description: This feature requires browser support HTML5 upload
Note: 1.0.0 final new additions
Upmultiple: How many files are allowed to be uploaded at a time
Parameter value: value greater than 0, default: 99, set to 1 close multiple file uploads
Description: This feature requires browser support HTML5 upload
Note: 1.0.0 RC3 new additions
Uplinkurl: Hyperlink file upload receive URL
Parameter value: Receives the user to upload the server-side program URL, the default left blank to disable the hyperlink upload function, the concrete use method please refer to Demo8 demo file
Note: You can use the built-in variable: {Editorroot}, which represents the root path of the current editor, for example: {editorroot}upload.php
Uplinkext: Restrict local file extensions before hyperlinks are uploaded
Parameter values: The list of file extensions that are restricted before the hyperlink is uploaded, by default: Zip,rar,txt, recommended in line with the server-side extension checklist
Upimgurl: Picture file upload receive URL
Parameter value: Receives the user to upload the server-side program URL, the default blank is disables the upload function, the concrete use method please refer to Demo8 demo file
Note: You can use the built-in variable: {Editorroot}, which represents the root path of the current editor, for example: {editorroot}upload.php
Upimgext: Restrict local file extensions before uploading pictures
Parameter values: The list of file extensions that are restricted before the picture is uploaded, by default: Jpg,jpeg,gif,png, recommended in line with the server-side extension checklist
Upflashurl: Animated file upload receive URL
Parameter value: Receives the user to upload the server-side program URL, the default blank is disables the upload function, the concrete use method please refer to Demo8 demo file
Note: You can use the built-in variable: {Editorroot}, which represents the root path of the current editor, for example: {editorroot}upload.php
Upflashext: Restrict local file extensions before animated uploads
Parameter values: The list of file extensions that are restricted before the animation is uploaded, by default: SWF, which is recommended to be consistent with the server-side extension checklist
Upmediaurl: Video file upload receive URL
Parameter value: Receives the user to upload the server-side program URL, the default blank is disables the upload function, the concrete use method please refer to Demo8 demo file
Note: You can use the built-in variable: {Editorroot}, which represents the root path of the current editor, for example: {editorroot}upload.php
Upmediaext: Restrict local file extensions before video uploads
Parameter values: The list of file extensions that are restricted before video uploads, by default: AVI, which is recommended to be consistent with the server-side extension checklist
Onupload: File Upload success callback function
Parameter values: Functions that need to be executed after success
Note: This function is returned by the value of the return of the program MSG variable, may be a string or array, if the string is a direct representation of the URL, if the array, you must include a URL variable, other can be customized by the developer
Note: 1.0.0 Beta2 new additions
Plugins: Custom button Plug-in Extensions
Attribute interpretation of the plug-in object:
C: Style sheet name
T: Plug-in name (displayed when the mouse is over the button)
S: Shortcuts, example: "Ctrl+enter"
H: Whether mouse hover direct execution, 1: Direct execution (omit current value represents not direct execution)
E: Button After the click of the code to execute (omit the execution code, then the current plug-in name as a parameter, call the browser's execcommand function)

Special Note:
If you want the style sheet to be stored in the system's own template catalog ui.css, leave the style name of the plug-in object blank, and the corresponding style is automatically called by the plug-in name, for example: Xhedtbtncut, Xhedtbtncopy, where cut and copy are plug-in names

Please refer to the Demo9 in the demo folder for a specific call method


2.3. API function Interface List

API Interface Sample code:
var editor=$ (' #elm1 '). Xheditor ({tools: ' Full ', skin: ' Default '});
Editor.focus ();
Editor.setsource (' str ')
Shtml=editor.getsource ()
editor.appendhtml (' <p>aaa</p> ')
editor.pastehtml (' <p>aaa</p> ')
Editor.pastetext (' str ')
shtml=editor.formatxhtml (' <b>aaa</b> ')
Editor.togglesource ()
Editor.togglefullscreen ()
alert (EDITOR.SETTINGS.UPIMGEXT);
editor.settings.upimgext= ' Txt,doc ';

API Interface List:
Focus: Get the editor focused
No parameters
SetSource: Setting editor source code
Parameter 1: The source code content to be set, example: ' <p>aaa</p> '
GetSource: Returns the source code after editor format
No parameters
appendhtml: Paste HTML content at the end of the editor
Parameter 1: HTML code to paste, example: ' <p>uuu</p> '
Note: 0.9.5 version added
Getselect: Returns the currently selected content
Parameter 1: Returns the format, optionally ' text ' returns the text format, all other values are returned in HTML format
pastehtml: Paste HTML content to the editor at the current cursor
Parameter 1: HTML code to paste, example: ' <p>uuu</p> '
Parameter 2: Overwrite paste, leave blank (overlay paste), true (paste before cursor selection area), False (paste after cursor selection area)
Pastetext: Pasting text into editor at current cursor
Parameter 1: The text to paste, example: ' Here's the content exactly as it appears <strong>aaa</strong> '
Parameter 2: Overwrite paste, leave blank (overlay paste), true (paste before cursor selection area), False (paste after cursor selection area)
formatxhtml: Formatting XHTML code
Parameter 1: HTML code to be formatted, example: ' <b>aaa</b> ', return ' <strong>aaa</strong> '
Parameter 2: Code indent wrap, True (indent formatted), False (without indentation formatting), default to False
Togglesource: Switching between source code and edit mode
Parameter 1: null (toggle), True (display source code mode), False (show edit mode)
Togglefullscreen: Toggle between Full-screen mode and standard size
Parameter 1: null (toggle), True (show Full-screen mode), False (show standard mode)
Toggleshowblocktag: Toggle block Label Display status
Parameter 1: null (toggle), True (toggle to display block label), False (toggle to not display block label)
Addshortcuts: Add shortcut keys
Parameter 1: Shortcut key value, example: ' Ctrl+enter '
Parameter 2: The program code that the user needs to respond to when the shortcut key is pressed, for example: function () {$ (' #frmTest '). Submit ();
Description: Allows multiple response codes to be added repeatedly for one of the same shortcut key values
Note: 1.0.0 Beta2 new additions
Delshortcuts: Delete shortcut keys
Parameter 1: Shortcut key value, example: ' Ctrl+enter '

Note: 1.0.0 final new additions
EXEC: Execute buttons and plugins now
Parameter 1: Tool button name (case-insensitive), Example: Link, img
Description: This function can be invoked inside a plug-in or outside JavaScript code
ShowModal: Display Mode window
Parameter 1: Caption title of the modal window
Parameter 2: Contents content of the schema window
Parameter 3: Width of the modal window W
Parameter 4: Height of the mode window H
Parameter 5: callback function when the modal window closes onremove
Showiframemodal: Display an iframe mode window
Parameter 1: Caption of the modal window
Parameter 2:iframe address Ifmurl, you can use the built-in variable: {Editorroot}, which represents the root path of the current editor, for example: {editorroot}xheditor_plugins/test.html
Parameter 3: A callback function that is provided to the target IFRAME page back call, which can be invoked in this form in the IFRAME page: callback (' 1.gif ');
Parameter 4: Width of the modal window W
Parameter 5: Height of the mode window H
Parameter 6: callback function when the modal window closes onremove
Settings: Get or modify editor internal parameters
Internalscript: Do you want to clear the internal code
InlineScript: Whether to clear inline code
Internalstyle: Do you want to clear the internal style
Inlinestyle: Whether to clear inline styles
Forceptag: Force the use of P tags
Uplinkurl: Hyperlink Upload interface Address
Uplinkext: Hyperlink local upload extension limit
Upimgurl: Image Upload Interface address
Upimgext: Picture local upload extension restrictions
Upflashurl: Animation Upload interface Address
Upflashext: Animation local upload extension restrictions
Upmediaurl: Video Upload interface address
Upmediaext: Video local upload extension restrictions
Beforesetsource: Call this function before you set the source code to the editor
Beforegetsource: Call this function before returning the source code from the editor
The focus: Callback This function when the editor gets focused
Blur: Callback This function when the editor loses focus

Note: Changes to valid variables are limited to, and other variables are only used when the editor initializes


2.4. Upload Program Development Specification


Upload receive program development must read:
Upload program to the standard HTML4 upload and HTML5 upload two cases of processing:
1, HTML4 upload using the standard form upload domain, upload file domain name: filedata
2, HTML5 upload the entire post data stream is the uploaded file complete data, and local file name and other information stored in http_content_disposition this server variable
The return content must be a standard JSON string, and the structure can be as follows: {"Err": "," MSG ":" 200906030521128703.gif "} or {" Err ":", "msg": {"url": " 200906030521128703.jpg "," LocalFile ":" Test.jpg "," id ":" 1 "} Note: If you choose Structure 2, the URL variable is a must

For more details, please refer to the Demos folder in the release package. where upload.php, upload.asp, upload.aspx only for demo reference code, if you are using other Server scripting language, please do the initialization parameters of the Uplinkurl, Upimgurl, Upflashurl and Upmediaurl to modify and develop the corresponding server upload receive program. If you want to use in your own projects, please modify the code or redevelopment, the development process, please note the format of the upload file and size restrictions, attention to server script security issues.


Upload file Management proposal plan:
An absolutely unique trace value generated by a server after the editor is initialized, for example: upload.php?infoid=123 upload.php
In the server receive program with this tracking value in the database, but also can limit the total number of uploaded files or total file size under a single tracking value, otherwise, is a can upload unlimited files of the vulnerability
At the end of the current form submission, the HTML content submitted by the editor is compared to the uploaded content in the database, and all unused upload files are deleted.
Periodically, the server script deletes the file records that are not submitted in the uploaded database, which prevents others from putting your site in a free album space.


2.5. Plugin Development Guide

Standard plug-in development process:
Design the plugin icon and define CSS in the page
Define plug-in parameters and write initialization parameters plugins
Code to execute when writing a plug-in call

Here's a brief introduction to one of the simplest plug-ins in demo09:
<style type= "Text/css" >
. testclassname {
Background:transparent URL (img/plugin.gif) no-repeat 20px 20px;
BACKGROUND-POSITION:3PX 3px;
}
</style>
Test7:{c: ' Testclassname ', T: ' Test 7:showiframemodal (ctrl+7) ', S: ' Ctrl+7 ', e:function () {
var _this=this;
_this.showiframemodal (' Test Showiframemodal interface ', ' uploadgui.html ', function (v) {_this.loadbookmark (); _this.pastetext ( ' return value: \ r \ n ' +v);},500,300);
}}

The function of this plug-in is to open an IFRAME and insert the parameter string returned by the IFRAME at the current editor cursor.
Where Test7 is the name of the plug-in used to invoke in the tools initialization parameter
C: ' Testclassname ' is the plug-in's style name
T: ' Test 7:showiframemodal (ctrl+7) ' is the hint text that the mouse puts on the button
S: ' Ctrl+7 ' is a shortcut for defining plug-ins, and the plugin event is executed in the editor area by a shortcut set;
E:function () {} code to execute after the plugin is clicked

Special Note:
The plug-in execution function can use this. To invoke all API interface functions in the 2.3 chapter. If you use a callback function, save the This variable in a temporary variable, such as _this;
In some browsers, opening the action interface that shifts the focus causes the edit area focus to be lost. For example: Showiframemodal, in the callback function, you need to perform the Loadbookmark function to restore the focus before you can call pastehtml functions.
If you want the style sheet to be stored in the system's own template catalog Ui.css, leave the plug-in object style name blank, and the appropriate style will be invoked automatically according to the plug-in name, for example: Xhedtbtncut, Xhedtbtncopy, where cut and copy are plug-in names;

If you want the Xheditor development team to customize your special features, skins and plug-ins, please refer to our Business Services page.


2.6. Skin Design Guide

Xheditor skin is stored in the Xheditor_skin folder, one subfolder per skin, and the folder structure is as follows:
Xheditor_skin
└─default
├─ui.css
├─iframe.css
└─img
├─icons.gif
├─ ...
└─loading.gif
The editor buttons, panels, modal windows, and so on are all uniformly stored in the Ui.css file
The style of the editing area is stored in the Iframe.css file
Images used in the editor kernel and all images used in CSS files are stored uniformly in the IMG folder
Ui.css file Simple parsing

Xhelayout: Editor table style; Xhetool: style of the area where the tool button is located; Xhebutton: button style; Xhepanel: action panel Style; Xhemenu: Menu style; Xheemot: Expression style ; Xhecolor: style of color selector; Xhedialog: Dialog style on panel; Xhemodal: Mode window style;

Xheditor skin structure is relatively simple, with a certain degree of HTML and CSS design can complete the design work.

If you want the Xheditor development team to customize your special features, skins and plug-ins, please refer to our Business Services page.


2.7. About two development

Due to the relatively high complexity of two development, it is necessary to be familiar with the Xheditor source code structure, and the developer's level is high and low, so there are also a variety of problems that arise easily. For this reason, the Xheditor development team does not provide any technical documentation and technical support for non-commercial authorized users, and I hope you understand.

If you want the Xheditor development team to customize your special features, skins and plug-ins, please refer to our Business Services page.


3. Other relevant
3.1. Use frequently asked questions


3.1. Use frequently asked questions
What jquery versions can xheditor be compatible with?
My page is GB2312 encoded, how can I make the Xheditor editor not garbled?
Normal load Xheditor, read the value of textarea, why not read the latest editing results?
How do I add a custom expression?
How do I overwrite the default expression with the editor's own?
The current page set Document.domain, how to let the xheditor work properly?
TextArea in a hidden area, how do I initialize the editor?
Using a normal form submission, how can the value of each service end always be the previous old edit result?
What jquery versions can xheditor be compatible with?

The original version of Xheditor was developed based on the jquery 1.3.2, so that all versions of the V1.0 series are currently compatible with the largest 1.3.2. For better code performance, Xheditor is currently recommending the use of the latest version 1.4.2.

Although the v1.0 version of the series can be the largest compatible jquery 1.3.2, but in the actual testing process, also found an irreversible problem: under the IE6 can not use the thumbnail upload mode. If you don't need to use the thumbnail pattern, you can run the Xheditor v1.0 version series perfectly on the jquery 1.3.2 basis.
My page is GB2312 encoded, how can I make the Xheditor editor not garbled?

If you use the latest version of the mini Xheditor version, because the text inside the full utf-8 encoding, you can call directly, there will be no garbled phenomenon.

If you are using a source code JS file or an earlier version of Xheditor, UTF-8 encoded in the use of the Web page will appear garbled phenomenon, just the script CharSet property set to Utf-8 can be resolved perfectly:
<script type= "Text/javascript" charset= "Utf-8" src= "Xheditor-zh-cn.js" ></script>
Normal load Xheditor, read the value of textarea, why not read the latest editing results?

At present, all the online editors in the network use the newly created IFRAME to realize the visual editing, Xheditor is no exception, so it is necessary to resynchronize the latest editing results to the original textarea before submitting.

Xheditor The default is to bind the OnSubmit event in the form object where textarea is located, and when the user clicks the Submit button, Xheditor synchronizes the latest results back to textarea, which is then submitted to the server-side script with the other form items in the form. Therefore, if you do not need to use JavaScript for extra processing, there is no problem with normal form-form submissions.

If you need to use JavaScript for additional editing results in your Web pages, such as Ajax submission forms, there are three different solutions:
Bind the Submit event on the form using either the event bindings of jquery or the standard DOM binding method (the binding code must be behind the Xheditor initialization code), that is, after the value is returned by the Xheditor, Reading the value value of the textarea in the corresponding bound function is the latest edit result;
Use the standard value method of jquery: $ (' #textarea_id '). Val ();
Use the dedicated read-value API interface provided by Xheditor: Editor.getsource ();

How do I add a custom expression?

You can use the Emots parameter in the initialization parameter from the

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.