Basics of xhEditor

1.1 online visual HTML editor Overview

In Web application, the most common behavior is the publishing and communication of information and comments. While publishing information, there are often requirements on the format, type, and function of information publishing, such as bold and underline, in this way, text information can be delivered to readers more visually and visually, and the efficiency of information publishing is also improved. In this context, the HTML online editor came into being.

As the name suggests, the online HTML editor is a tool used to edit HTML code online. It is often used in message board messages, Forum posts, Blog logs, and other places where users need to input HTML, is one of the common modules of Web applications. The online HTML editor can add a variety of text effects to the editing content, and provide various convenient and quick operations to maximize the editing efficiency. The online HTML editor is an essential component of any website and a powerful tool for Internet users to ride the network.

1.2. Get xhEditor

You can download the latest version of xhEditor from the xhEditor official website. The xhEditor official website address is http://xheditor.com/. open the free download link in the upper right corner. | you can find the latest version of the Code wizard.

XhEditor can be directly called without any installation or configuration. You can directly decompress and copy it to the corresponding folder of your website.

1.3. xhEditor Runtime Environment

XhEditor is developed based on the HTML, CSS, and Javascript environments of browsers. Therefore, in principle, most browsers on the market can run perfectly. Currently, the tested browser compatibility list is as follows: IE 6.0 +, firefox 3.0 +, Opera 9.6 +, Chrome 1.0 +, and Safari 3.22 + (the "+" number indicates all future versions ). XhEditor is completely based on the browser environment, so there is no operating system selectivity and it is completely cross-platform. XhEditor can also be used in any server language environment, such as PHP, ASP, and ASP. NET, JAVA, etc., can be perfectly embedded and run on your CMS, blog, forum, mall and other Internet platforms, can be very flexible and simple to achieve perfect seamless connection with your system.

1.4. Basic xhEditor User Guide

Follow these steps to learn how to use xhEditor:
Download the latest xhEditor: http://xheditor.com/download
Decompress the downloaded compressed file and upload the xheditor-zh-cn.min.js and the xheditor_emot, xheditor_plugins and xheditor_skin folders to the corresponding folder of the website.
Add the following code before calling the xhEditor web page head Tag:
<Script type = "text/javascript" src = "/javascript/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "/javascript/xheditor-zh-cn.min.js"> </script>
Note: The js file paths of jQuery and xhEditor must be modified based on the specific path of your website.
Add:
Class = "xheditor {skin: 'default '}"
Note: The preceding main parameters can also be xheditor-mfull, xheditor-mini, or xheditor-simple, which load the multi-line complete, mini, and simple toolbar respectively. The braces below are used to define more initialization parameters, which can be omitted.

After the preceding steps, you have successfully installed the xhEditor On Your webpage. To learn more about how to use the xhEditor, see xhEditor advanced usage.
2. advanced use of xhEditor
2.1. Advanced User Guide
2.2. initialize the parameter list
2.3. API function interface list
2.4. Upload Program Development specifications
2.5. Plug-in Development Guide
2.6. Skin Design Guide
2.7. Secondary Development

2.1. Advanced User Guide

Read this section first. If you are familiar with the basic usage of xhEditor, 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 initialize and transmit parameters for a specific textarea, for example:
$ ('# Elm1'). xheditor ();
Or
$ ('# Elm1'). xheditor ({tools: 'mini '});

Note: Only one of the two initialization methods can be used. If the code of both methods exists on the page at the same time, the Code of method 2 will not have any effect.

We recommend that you use method 1 because it is easier to use and does not involve any Javascript code. With simple parameter settings, you can customize the Editor interface for various effects, which is easy to use and powerful.

If you want to implement more complex interactive applications, or want the xhEditor editor to implement mutual access with your own Javascript code, you can choose to use method 2, which is relatively more free space.

XhEditor also provides an instant way to uninstall the Editor:
$ ('# Elm1'). xheditor (false );

2.2. initialize the parameter list

Example code of initialization parameters:
$ ('# Elm1 '). xheditor ({tools: 'full', skin: 'default', showBlocktag: true, internalScript: false, internalStyle: false, width: 300, height: 200, loadCSS: 'http: // upload "upload. php ", upImgExt:" jpg, jpeg, gif, png "});

Initialization parameter list:
Tools: custom tool button
Parameter Values: full, mfull, simple, and mini)
Or custom string, such as: 'Cut, Copy, Paste, Pastetext, |, Source, Fullscreen, about'

Complete button table:
|: Delimiter
/: Force line feed
Cut: Cut
Copy: Copy
Paste: Paste
Pastetext: Text Paste
Blocktag: paragraph tag
Fontface: font
FontSize: font size
Bold: Bold
Italic: Italic
Underline: Underline
Strikethrough: dashes
FontColor: font color
BackColor: font background color
SelectAll: select all
Removeformat: delete text format
Align: Align
List: List
Outdent: reduce indentation
Indent: Increase indentation
Link: hyperlink
Unlink: delete a link
Img: Image
Flash: Flash Animation
Media: Windows media player video
Emot: emotion
Table: Table
Source: Switch Source code mode
Preview: Preview the current Code
Print: Print
Fullscreen: Switch to full screen mode
About: About xhEditor
Skin: skin style selection
Parameter Values: default (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 mode window)
Parameter Value: 0 (do not show shadow), value greater than 0 (show shadow and set the depth of shadow)
ClickCancelDialog: Click any location to cancel the Panel Function
Parameter Value: The default value is true (the click Cancel function is enabled) and false (to disable the click Cancel function, you must click the cancel button to close the button panel)
ShowBlocktag: show the paragraph label
Parameter Value: true (show paragraph label), false (not displayed)
LinkTag: retained status of the link label of the style link
Parameter Value: true (retain the link label of the style link), false (clear the link label of the style link)
InternalScript: Internal JS Code retained status
Parameter Value: true (keep internal JS Code), false (clear internal JS Code)
InlineScript: Reserved status of inline JS Code
Parameter Values: true (keep inline JS Code) and false (clear inline JS Code)
InternalStyle: the internal style is retained.
Parameter Value: true (retain internal style), false (clear internal style)
InlineStyle: The Inline style is retained.
Parameter Value: true (retain inline style), false (clear inline style)
Width: Editor width
Parameter Value: number without unit, for example, 300
Height: Editor height
Parameter Value: number without unit, for example, 100
LoadCSS: Load Style
Parameter Value: URL address, URL array, and direct internal style, for example, '1.css'{}'1.css', '2.css '],' <style> body {font-size: 20px ;} </style> '<br/> remarks: 1.0.0 RC3 adds the internal style loading function.
Fullscreen: full screen by default
Parameter Value: true (full screen size), false (standard size)
SourceMode: Default source code mode
Parameter Values: true (source code mode) and false (edit mode)
ForcePtag: force P tag
Parameter Value: true (P label is mandatory), false (not mandatory), true by default
ForcePasteText: forcibly converts pasted content to text
Parameter Value: true (forced conversion to text), false (no conversion to text), default value: false
Remarks: added in v1.1.0
DisableContextmenu: Right-click the disabled editing area
Parameter Value: true (right-click menu disabled), false (disabled), default: false
Remarks: added in v1.1.0
EditorRoot: root path of the editor JS File
Parameter value: the root path of the editor. It is used to locate the editor's root path in some special circumstances. The default value is null. Read the Default Editor root path.
Remarks: added in v1.1.0
Shortcuts: Custom keyboard shortcuts
Parameter: array of objects corresponding to the Event code
Example: {'ctrl + enter': function () {$ ('# frmtest'). submit ();}}
Note: 1.0.0 beta2 is newly added
UrlBase: base address of the relative URL address
Parameter: the URL of a string to locate resources in different paths in the front and back.
Remarks: 1.1.0 added
UrlType: select the forced conversion mode for the local URL address
Parameters: abs (absolute path), root (root path), and rel (relative path)
Note: 1.0.0 beta2 is newly added. In v1.1.0, the name is changed from localUrl to urlType.
EmotPath: Modify the URL root path of an emoticon image.
Parameter: the URL address of the string. It is null by default and points to the default expression in the editor path.
Remarks: 1.1.0 added
EmotMark: whether to mark the emot attribute on the img label.
Parameter: true (annotation), false (not annotation), default value: false
Note: If the ubb plug-in is used, set this attribute to true.
Note: 1.0.0 beta2 is newly added
Emots: add custom emojis
Parameter: You can define multiple arrays of JSON objects, for example: {qq: {name: 'qq', count: 55, width: 25, height: 25, line: 11 }, msn: {name: 'msn ', count: 40, width: 22, height: 22, line: 8 }}
Name: group name
Count: Number of emotices
List: emoticons list, for example: {test1: 'emoticons 1', test2: 'emoticons 2'}. The key name indicates the file name, the extension must be gif, and the key value indicates the alt information.
Width: the width of a single expression area. It must be greater than or equal to the maximum width of the expression.
Height: the height of the single-expression area. It must be greater than or equal to the maximum height of the single-expression area.
Line: Number of emojis displayed on a single line
Note: One value must be selected for count and list. Note that the alt of the img inserted in count mode is empty.
Note: 1.0.0 beta2 is newly added
WordDeepClean: option for in-depth cleanup of Word documents
Parameter: true (in-depth cleanup), false (if in-depth cleanup is not performed, the style effect is retained). The default value is true.
Note: If the website application needs to retain more Word styles, set this value to false, but the size of the generated HTML code will increase significantly.
Note: 1.0.0 beta2 is newly added
HoverExecDelay
Parameter: Value (unit: milliseconds). The default value is 100. It is set to-1 to disable this function.
Remarks: 1.0.0 rc2 added
DefLinkText: the default text of the hyperlink.
Parameter Value: string (default value: "click to open link ")
Note: This parameter value is used only when no content is selected.
ModalWidth: the default width of the showModal pop-up window.
Parameter Value: Numeric value. The default value is 350.
Note: The default width of the pop-up window
ModalHeight: the default height of the showModal pop-up window.
Parameter Value: Numeric value. The default value is 220.
Note: The default height of the pop-up window
ModalTitle: whether the title bar above is displayed in the showModal pop-up window
Parameter Value: true (displayed), false (not displayed)
Note: this parameter is used to control whether the top title bar is displayed in the pop-up window. If you want to display a more customized iframe window, you can use this parameter to hide the top title bar.
UpBtnText: Text of the upload button
Parameter Value: any string. Default Value: "Upload"
Note: 1.0.0 beta2 is newly added
Html5Upload: whether to enable HTML5 upload support
Parameter Values: true (allowed) and false (not allowed). The default value is true.
Note: This function requires the browser to support HTML5 upload.
Note: 1.0.0 Final is newly added
UpMultiple: How many files can be uploaded at a time
Parameter Value: a value greater than 0. Default Value: 99. set to 1 to disable Multifile upload.
Note: This function requires the browser to support HTML5 upload.
Remarks: 1.0.0 RC3 added
UpLinkUrl: URL for uploading and receiving hyperlink files
Parameter value: the URL of the server program to be uploaded by the user. By default, the hyperlink upload function is disabled. For details, see demo8 demo file.
Note: The built-in variable {editorRoot} can be used to represent the root path of the current editor, for example, {editorRoot} upload. php.
UpLinkExt: restrict the local file extension before a hyperlink is uploaded.
Parameter Value: List of file extensions restricted before hyperlink upload. The default value is zip, rar, and txt. It is recommended to be consistent with the Server Extension check list.
UpImgUrl: URL for receiving and uploading image files
Parameter value: the server-side program URL for receiving user uploads. The default value is to disable the upload function. For details, see demo8 demo file.
Note: The built-in variable {editorRoot} can be used to represent the root path of the current editor, for example, {editorRoot} upload. php.
UpImgExt: Specifies the local file extension before uploading images.
Parameter Value: List of file extensions restricted before uploading an image. The default value is jpg, jpeg, gif, and png. We recommend that you check the file extension list with the server.
UpFlashUrl: URL for receiving and uploading animated files
Parameter value: the server-side program URL for receiving user uploads. The default value is to disable the upload function. For details, see demo8 demo file.
Note: The built-in variable {editorRoot} can be used to represent the root path of the current editor, for example, {editorRoot} upload. php.
UpFlashExt: Specifies the local file extension before an animation is uploaded.
Parameter Value: List of file extensions restricted before an animation is uploaded. The default value is swf. It is recommended that this parameter be consistent with the Server Extension check list.
UpMediaUrl: URL for receiving and uploading video files
Parameter value: the server-side program URL for receiving user uploads. The default value is to disable the upload function. For details, see demo8 demo file.
Note: The built-in variable {editorRoot} can be used to represent the root path of the current editor, for example, {editorRoot} upload. php.
UpMediaExt: Specifies the local file extension before video upload.
Parameter Value: List of file extensions restricted before video upload. The default value is avi. We recommend that you check the file extension list with the server.
OnUpload: callback function for successful File Upload
Parameter value: the function to be executed after success
Note: The value returned when this function is executed is the msg variable returned by the upload program, which may be a string or array. If it is a string, it directly represents a url. If it is an array, it must contain a url variable, others can be customized by developers
Note: 1.0.0 beta2 is newly added
Plugins: extensions of custom buttons
Description of the attributes of the plug-in object:
C: Style Sheet Name
T: plug-in name (displayed when the mouse is above the button)
S: shortcut, for example, "ctrl + enter"
H: whether to hover the mouse over and execute directly. 1: Execute directly. (if the current value is omitted, it means not to execute directly)
E: code to be executed after the button is clicked (if the code is omitted, the current plug-in name is used as the parameter to call the execCommand function of the browser)

Note:
If you want the sample table to be stored in the template directory ui.css of the system, leave the style name of the plug-in object blank and the corresponding style will be automatically called according to the plug-in name, for example, xhEdtBtnCut and xhEdtBtnCopy, where Cut and Copy are plug-in

For details about the call method, see demo9 in the demo folder.

2.3. API function interface list

API 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 list:
Focus: focus the editor.
No Parameter
SetSource: Set the editor source code
Parameter 1: source code content to be set, for example, '<p> aaa </p>'
GetSource: returns the source code in the editor format.
No Parameter
AppendHTML: paste the HTML content to the end of the editor.
Parameter 1: HTML code to be pasted, for example, '<p> uuu </p>'
Note: Add version 0.9.5
GetSelect: returns the currently selected content.
Parameter 1: Return format. Optional. 'text': return text format. All other values return HTML format.
PasteHTML: paste the HTML content to the current cursor of the editor.
Parameter 1: HTML code to be pasted, for example, '<p> uuu </p>'
Parameter 2: whether to overwrite and paste, leave blank (overwrite and paste), true (paste before the Cursor Selection area), and false (paste after the Cursor Selection Area)
PasteText: paste the text to the current cursor of the editor.
Parameter 1: The text to be pasted. For example, 'the content is displayed completely as is <strong> aaa </strong>'
Parameter 2: whether to overwrite and paste, leave blank (overwrite and paste), true (paste before the Cursor Selection area), and false (paste after the Cursor Selection Area)
FormatXHTML: format the XHTML code
Parameter 1: HTML code to be formatted. For example, '<B> aaa </B>' is returned, and '<strong> aaa </strong>' is returned'
Parameter 2: whether the code indentation line feed, true (indent formatting is executed), false (indent formatting is not executed), default value: false
ToggleSource: switch between source code mode and edit mode
Parameter 1: NULL (switch), true (show source code mode), false (show edit mode)
ToggleFullscreen: switch between full screen mode and standard size
Parameter 1: NULL (switch), true (display full screen mode), false (display standard mode)
ToggleShowBlocktag: Switch the display status of the block tag
Parameter 1: NULL (switch), true (switch to display block label), false (switch to do not display block label)
AddShortcuts: Add shortcuts
Parameter 1: shortcut key value, for example, 'ctrl + enter'
Parameter 2: The program code that the user needs to respond to after pressing the shortcut key, for example, function () {$ ('# frmTest'). submit ();}
Allows you to add multiple response codes for the same shortcut key value.
Note: 1.0.0 beta2 is newly added
DelShortcuts: delete shortcuts
Parameter 1: shortcut key value, for example, 'ctrl + enter'

Note: 1.0.0 Final is newly added
Exec: Execute the button and plug-in now
Parameter 1: tool button name (case-insensitive), for example, Link and img
Note: this function can be called within the plug-in or in external Javascript code.
ShowModal: Display Mode window
Parameter 1: title of the mode window
Parameter 2: content of the mode window
Parameter 3: w the width of the mode window
Parameter 4: h of the mode window
Parameter 5: onRemove, the callback function when the mode window is closed
ShowIframeModal: display the iframe mode window
Parameter 1: The title of the mode window
Parameter 2: iframe address ifmurl. the built-in variable {editorRoot} can be used to represent the root path of the current editor, for example, {editorRoot} xheditor_plugins/test.html.
Parameter 3: The callback function provided to the target iframe page for callback. You can call callback('1.gif') in this form on the iframe page ');
Parameter 4: w the width of the mode window
Parameter 5: h of the mode window
Parameter 6: onRemove, the callback function when the mode window is closed
Settings: gets or modifies the internal parameters of the editor.
InternalScript: whether to clear internal code
InlineScript: whether to clear Inline code
InternalStyle: whether to clear internal styles
InlineStyle: whether to clear inline styles
ForcePtag: force P tag
UpLinkUrl: URL of the hyperlink upload interface
UpLinkExt: extended restrictions on Hyperlink local upload
UpImgUrl: Image Upload interface address
UpImgExt: restrictions on local Image Upload
UpFlashUrl: animation upload interface address
UpFlashExt
UpMediaUrl: video upload interface address
UpMediaExt: Video local upload extension limit
BeforeSetSource: Call this function before setting the source code to the editor.
BeforeGetSource: This function is called before the editor returns the source code.
Focus: This function is called back when the editor obtains the focus.
Blur: calls back this function when the editor loses focus.

Note: Only valid variables can be modified. Other variables are only used during editor initialization.

2.4. Upload Program Development specifications

Development of the upload receiving program must be read:
The upload program is divided into standard HTML 4 upload and HTML5 upload:
1. html 4 uploads files using standard form upload fields. The name of the file to be uploaded is filedata.
2. The entire POST data stream Uploaded By HTML5 is the complete data of the uploaded file, and the local file name and other information are stored in the HTTP_CONTENT_DISPOSITION server variable.
The returned content must be a standard json string with the following structure: {"err": "", "msg": "200906030521128703.gif"} or {" err ":"", "msg": {"url": "200906030521128703.jpg"," localfile ":" test.jpg "," id ":" 1 "} Note: If structure 2 is selected, the url variable is required.

For more details, see the demos folder in the release package. Upload. php, upload. asp, upload. aspx is only a demo reference code. If you are using other server scripting languages, you must modify the upLinkUrl, upImgUrl, upFlashUrl, and upMediaUrl in the initialization parameters, develop a Server Upload and receiving program. If you want to use it in your own project, modify the code or re-develop it. during the development process, pay attention to the format and size restrictions of the uploaded files, and pay attention to the server script security issues.

Recommended Solution for file upload management:
When the editor is initialized, it keeps up with the unique trace value generated by the server after upload. php, for example, upload. php? Infoid = 123
This trace value is saved to the database in the server receiving program. It can also limit the total number of files uploaded or the total size of files under a single trace value. Otherwise, this is a vulnerability that can upload unlimited files.
When the current form is submitted, compare the HTML content submitted by the editor with the uploaded content in the database to delete all unused upload files.
Regular server scripts are used to delete unsubmitted file records from the uploaded database. This prevents others from using your website as a free album space.

2.5. Plug-in Development Guide

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

Next we will introduce 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 showiframemodalinterface ', 'uploadgui.html', function (v) {_ this. loadBookmark (); _ this. pasteText ('Return value: \ r \ n' + v);}, 500,300 );
}}

The function implemented by this plug-in is to open an iframe and insert the parameter string returned by iframe to the cursor of the current editor.
Test7 is the plug-in name, which is called in the tools initialization parameters.
C: 'testclassname' is the style name of the plug-in.
T: 'test 7: showIframeModal (Ctrl + 7) 'is the prompt text displayed with the mouse placed on the button.
S: 'ctrl + 7' is the shortcut for defining the plug-in. In the editor area, execute this plug-in event according to the configured shortcut;
E: function () {} is the code to be executed after the plug-in is clicked.

Note:
You can use this method to call all the API functions in Section 2. 3. If you use the callback function, save this variable in a temporary variable, for example, _ this;
In some browsers, opening the operation interface that will shift the focus will lead to the loss of the focus in the editing area. For example, showIframeModal. In the callback function, you must first execute the loadBookmark function to restore the focus before calling functions such as pasteHTML;
If the expected sample table is stored in the template directory ui.css of the system, leave the style name of the plug-in object blank and the corresponding style is automatically called according to the plug-in name, for example, xhEdtBtnCut and xhEdtBtnCopy. The Cut and Copy are plug-in names;

If you want the xhEditor development team to customize special features, skins, and plug-ins for you, please refer to the business service page we provide.

2.6. Skin Design Guide

The skin of xhEditor is saved in the xheditor_skin folder. Each skin contains a sub-Folder. The folder structure is as follows:
Xheditor_skin
─ ── Default
├─Ui.css
├─Iframe.css
└ ── Img
├─Icons.gif
~──...
Registry.loading.gif
The editing tool is stored in the ui.css file by using the pattern window and pattern.
The editing example is stored in the iframe.css file.
Images used in the editor kernel and all images used in css files are stored in the img folder.
Simple parsing of ui.css files

XheLayout: Editor table style; xheTool: style of the area where the tool button is located; xheButton: button style; xhePanel: style of the Operation Panel; xheMenu: menu style; xheEmot: expression style; xheColor: color selector style; xheDialog: Dialog Box style on the panel; xheModal: Mode window style;

The structure of the xhEditor skin is relatively simple, and the design can be completed with a certain degree of HTML and CSS design basics.

If you want the xhEditor development team to customize special features, skins, and plug-ins for you, please refer to the business service page we provide.

2.7. Secondary Development

Because secondary development is relatively complex, you need to be familiar with the xhEditor source code structure, and the developer level is high or low, so there are also various problems. For this reason, the xhEditor development team does not provide any technical documents or technical support to non-commercial authorized users.

If you want the xhEditor development team to customize special features, skins, and plug-ins for you, please refer to the business service page we provide.

3. Other related
3.1. FAQs

3.1. FAQs
Which jQuery versions are compatible with xhEditor?
My webpage is GB2312 encoded. How can I make the xhEditor not garbled?
When xhEditor is loaded normally and the value of textarea is read, Why cannot the latest editing result be read?
How can I add a custom expression?
How can I overwrite the default emoticon provided by the editor?
Document. domain is set on the current page. How can xhEditor work properly?
Textarea is in a hidden area. How do I initialize the editor?
When a common form is used for submission, how does one obtain the old value from the server?
Which jQuery versions are compatible with xhEditor?

The original version of xhEditor was developed based on jQuery 1.3.2. Therefore, all versions of the v1.0 series are currently compatible with 1.3.2. For better code performance, xhEditor officially recommends the latest version 1.4.2.

Although v1.0 is the most compatible with jQuery 1.3.2, it also finds an unmodifiable problem during actual testing: the thumbnail upload mode cannot be used in ie6. If you do not need the thumbnail mode, you can run the xhEditor v1.0 series perfectly on the basis of jQuery 1.3.2.
My webpage is GB2312 encoded. How can I make the xhEditor not garbled?

If you use the mini compression version of the latest xhEditor version, because the text in it is fully UTF-8 encoded, you can directly call it without garbled characters.

If the source code js file or the early xhEditor version is used, garbled characters will occur when used in non-UTF-8 encoded webpages. You only need to set the charset attribute of the script to UTF-8 to solve the problem perfectly:
<Script type = "text/javascript" charset = "UTF-8" src = "xheditor-zh-cn.js"> </script>
When xhEditor is loaded normally and the value of textarea is read, Why cannot the latest editing result be read?

Currently, all online editors on the network use the newly created iframe for visual editing. xhEditor is no exception, therefore, you must re-Synchronize the latest editing results to the original textarea before submission.

By default, xhEditor binds the onsubmit event to the form object where textarea is located. When you click the submit button, xhEditor synchronizes the latest results to textarea, then, the script is submitted to the server together with other form items in the form. Therefore, if you do not need to use Javascript For additional processing, there is no problem with normal form-based submission.

If you need to use Javascript to process the editing results, such as submitting a form through ajax, there are three solutions:
Use jQuery event binding or the standard DOM binding method to bind a submit event to the form (the binding code must be after the xhEditor initialization code), that is, after xhEditor returns the value and then reads it, reading the value of textarea in the corresponding bound function is the latest edited result;
Use the standard value method of jQuery: $ ('# textarea_id'). val ();
Use the special read value API provided by xhEditor: editor. getSource ();

How can I add a custom expression?

You can use the emots parameter from