In order to support both Firefox and IE, we often use the (id) method to obtain HTML objects. However, the getElementById method can only get a single object, but there is nothing to do with the CheckBox array.
1. Download the latest version of xhEditor. Download address:/download
2. Unzip the zip file and upload the two folders xheditor_emot and xheditor_skin to the corresponding directory of the website.
3. Add before the end of the head tag of the corresponding html file
<script type="text/javascript" src="/js/"></script>
4. There are two types of calling methods:
Method 1: Add attributes on textarea: class="xheditor" (set to xheditor-mini and xheditor-simple, loading mini and simple toolbars by default, respectively) Method 2: Add: $('#elm1').xheditor(true); For example: $({$('#elm1').xheditor(true);}); The corresponding hidden editing code is: $('#elm1').xheditor(false);
Initialization parameter description
Initialization sample code:
$('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'/',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"",upImgExt:"jpg,jpeg,gif,png",keepValue:true,plugins:{}});
tools: Custom tool button
Parameter values: full (complete), simple (simple), mini (mini) or custom string, for example: 'GStart, Cut, Copy, Paste, Pastetext, GEnd, Separator, GStart, Source, Preview, Fullscreen, About, GEnd' Complete button table: GStart: Group start GEnd: Group end Separator: Delimiter Cut: Cut Copy: Copy Paste: Pastetext: Text paste Blockt ag: paragraph tag Fontface: FontSize: FontSize Bold: Bold Italic: Italic Underline: Underline Strikethrough: Medium StrikeFontColor: Font Color BackColor: Font Background Color Removeformat: Remove Text Format Align: Align List: List Outdent: Decrease Indent: Indent: Indent: Increase Indent: Hyperlink Unlink: Delete Link Img: Image Flash: Flash Animation Media: Windows media player video Emot: emoji Table: table Source: switch source code mode Preview: switch preview mode Fullscreen: switch fullscreen mode About: About xhEditor
Skin style choice
Parameter values: default (default style), o2007blue (Office 2007 blue), o2007silver (Office 2007 silver)
showBlocktag: Show paragraph tag
Parameter value: true (display paragraph label), false (not displayed)
internalScript: Internal JS code retains state
Parameter values: true (retain internal JS code), false (clean internal JS code)
inlineScript: Inline JS code retains state
Parameter value: true (preserve inline JS code), false (clean inline JS code)
internalStyle: internal style preserves state
Parameter values: true (reserve internal style), false (clean internal style)
inlineStyle: Inline style preserves state
Parameter values: true (preserve inline style), false (clean inline style)
width: editor width
Parameter value: No number with unit, example: 300
height: editor height
Parameter value: No number with unit, example: 100
loadCSS: Loading style
Parameter value: stylesheet URL, for example: 'https:///css/'
fullscreen: default fullscreen display
Parameter values: true (full screen size), false (standard size)
readonly: Default read-only mode
Parameter values: true (read-only mode), false (editable mode)
sourceMode:Default source code mode
Parameter values: true (source code mode), false (edit mode)
forcePtag: Force P tag
Parameter value: true (force P tag), false (not force)
keepValue: Automatically save src and href attribute values
Parameter values: true (save), false (not saved) Description: When using the editor under IE and other browsers, the inserted image and link address will be automatically converted to the absolute address by the browser. For example, if you enter:, it will automatically be converted to:/
modalWidth: default width of showModal popup window
Parameter value: numeric value, default is 350 Description: Default width of popup window
modalHeight: default height of showModal popup window
Parameter value: numeric value, default is 220 Description: Default height of pop-up window
modalTitle: Whether the showModal pop-up window displays the title bar above
Parameter value: true (display), false (not displayed) Description: Controls whether the pop-up window displays the title bar above, which is displayed by default. If you need to display a more customized and personalized iframe window, you can hide the title bar above through this parameter.
upLinkUrl: Hyperlink file upload and receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the hyperlink upload function. For details, please refer to the demo8 demo file.
upLinkExt: Restrict local file extensions before uploading hyperlinks
Parameter value: The file extension list restricted before hyperlink upload, default is: zip, rar, txt, it is recommended to be consistent with the server extension checklist
upImgUrl: Upload image file to receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upImgExt: Restrict local file extensions before uploading pictures
Parameter value: The file extension list restricted before image upload, default is: jpg, jpeg, gif, png, it is recommended to be consistent with the server extension checklist
upFlashUrl: upload and receive URL for animation file
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upFlashExt: Restrict local file extensions before animation upload
Parameter value: The file extension list restricted before animation upload, default is: swf, it is recommended to be consistent with the server extension check list
upMediaUrl: Video file upload and receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upMediaExt: Limit local file extension before uploading video
Parameter value: The file extension list restricted before video upload, default is: avi, it is recommended to be consistent with the server extension checklist
Notes on using the upload interface:
The demos directory is only the demo code. If you are using other server scripting languages, please modify the upLinkUrl, upImgUrl, upFlashUrl and upMediaUrl in the initialization parameters by yourself, and develop the corresponding server upload and receive program. If you want to actually use it in your project, please modify the code yourself or redevelop it. During the development process, please pay attention to the format and size limitations of the uploaded files and pay attention to server security issues. The development specifications for uploading and receiving programs: 1. The domain name of the upload file is: upload2. The return structure must be json, and the structure is as follows: {"err":"","msg":""} If an error occurs in the upload, please save the error content in the err variable; if the upload is successful, please save the absolute or relative address on the server in the msg variable. If the editor finds that the returned err variable is not empty, the pop-up window displays the returned error content. Upload management plan suggestions: 1. When the editor is initialized, the absolute unique tracking value is followed by the previous server. For example: ?infoid=1213121212. Save it in the server receiving program with this tracking value to the database. At the same time, it can also limit the total number of uploaded files or the total file size under a single tracking value. Otherwise, it is a vulnerability that can upload unlimited files. 3. When the current form is submitted, compare it according to the HTML content submitted by the editor and the uploaded content in the database to delete all uploaded files that are not used. 4. Regularly delete the file records that are not submitted in the upload database by the server script, so that others can prevent your website from being used as a free album space.
plugins: Custom button plugin extension
The attribute explanation of the plug-in object: c: style sheet name t: plug-in name (the mouse is displayed above the button) s: shortcut e: special instructions for the code that needs to be executed after the button is clicked: If you want the style sheet to be stored in the template directory that comes with the system, please 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, xhEdtBtnCopy, where Cut and Copy are the plug-in name, please refer to demo9 in the demo folder for the specific call method.
JS interface description
JS interface sample code:
var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'/',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction})[0].xheditor;();('str')sHtml=()('<p>aaa</p>')('<p>aaa</p>')('str')sHtml=('<b>aaa</b>')()()()()alert();='txt,doc';
focus: Make the editor focus
No parameters
setSource: Set the 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: Added in version 0.9.5
pasteHTML: Paste HTML content to the editor's current cursor
Parameter 1: HTML code to paste, example: '<p>uuu</p>'
pasteText: Paste text to the editor's current cursor
Parameter 1: The text to be pasted, example: 'The content here is displayed completely as it is'
formatXHTML: Format XHTML code
Parameter 1: HTML code that needs to be formatted, example: '<b>aaa</b>', return '<strong>aaa</strong>'
toggleSource: Switch between source code mode and edit mode
Parameter 1: empty (switch), true (show source code mode), false (show edit mode)
togglePreview: Switch between preview mode and edit mode
Parameters 1: empty (switch), true (show preview mode), false (show edit mode)
toggleFullscreen: Switch between full screen mode and standard size
Parameter 1: empty (switch), true (show full screen mode), false (show standard mode)
toggleReadonly: Switch between read-only mode and editable mode
Parameter 1: empty (switch), true (switch to read-only mode), false (switch to editable mode)
settings: Get or modify the internal parameters of the editor
internalScript: Whether to clear internal code inlineScript: whether to clear inline code internalStyle: whether to clear internal style inlineStyle: whether to clear inline style forcePtag: Force use P tag keepValue: Keep attribute value upLinkUrl: hyperlink upload interface address upLinkExt: hyperlink local upload extension restriction upImgUrl: picture upload interface address upImgExt: picture local upload extension restriction upFlashU rl: Animation upload interface address upFlashExt: Animation local upload extension limit upMediaUrl: Video upload interface address upMediaExt: Video local upload extension limit beforeSetSource: Call this function before setting the source code to the editor beforeGetSource: Call this function before returning source code from the editor focus: Call back when the editor gets focus blur: Call back when the editor loses focus Note: Modifying valid variables is only limited to the above, and other variables are only used when the editor is initialized
Editor initializes callback function list:
beforeSetSource and beforeGetSource are editor callback functions, which are called before setting the source code and retrieving the source code respectively. For details, please refer to the UBB code demonstration page focus and blur are callback functions when the editor focuses and loses focus.
1. Download the latest version of xhEditor. Download address:/download
2. Unzip the zip file and upload the two folders xheditor_emot and xheditor_skin to the corresponding directory of the website.
3. Add before the end of the head tag of the corresponding html file
<script type="text/javascript" src="/js/"></script>
4. There are two types of calling methods:
Method 1: Add attributes on textarea: class="xheditor" (set to xheditor-mini and xheditor-simple, loading mini and simple toolbars by default, respectively) Method 2: Add: $('#elm1').xheditor(true); For example: $({$('#elm1').xheditor(true);}); The corresponding hidden editing code is: $('#elm1').xheditor(false);
Initialization parameter description
Initialization sample code:
$('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'/',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"",upImgExt:"jpg,jpeg,gif,png",keepValue:true,plugins:{}});
tools: Custom tool button
Parameter values: full (complete), simple (simple), mini (mini) or custom string, for example: 'GStart, Cut, Copy, Paste, Pastetext, GEnd, Separator, GStart, Source, Preview, Fullscreen, About, GEnd' Complete button table: GStart: Group start GEnd: Group end Separator: Delimiter Cut: Cut Copy: Copy Paste: Pastetext: Text paste Blockt ag: paragraph tag Fontface: FontSize: FontSize Bold: Bold Italic: Italic Underline: Underline Strikethrough: Medium StrikeFontColor: Font Color BackColor: Font Background Color Removeformat: Remove Text Format Align: Align List: List Outdent: Decrease Indent: Indent: Indent: Increase Indent: Hyperlink Unlink: Delete Link Img: Image Flash: Flash Animation Media: Windows media player video Emot: emoji Table: table Source: switch source code mode Preview: switch preview mode Fullscreen: switch fullscreen mode About: About xhEditor
Skin style choice
Parameter values: default (default style), o2007blue (Office 2007 blue), o2007silver (Office 2007 silver)
showBlocktag: Show paragraph tag
Parameter value: true (display paragraph label), false (not displayed)
internalScript: Internal JS code retains state
Parameter values: true (retain internal JS code), false (clean internal JS code)
inlineScript: Inline JS code retains state
Parameter value: true (preserve inline JS code), false (clean inline JS code)
internalStyle: internal style preserves state
Parameter values: true (reserve internal style), false (clean internal style)
inlineStyle: Inline style preserves state
Parameter values: true (preserve inline style), false (clean inline style)
width: editor width
Parameter value: No number with unit, example: 300
height: editor height
Parameter value: No number with unit, example: 100
loadCSS: Loading style
Parameter value: stylesheet URL, for example: 'https:///css/'
fullscreen: default fullscreen display
Parameter values: true (full screen size), false (standard size)
readonly: Default read-only mode
Parameter values: true (read-only mode), false (editable mode)
sourceMode:Default source code mode
Parameter values: true (source code mode), false (edit mode)
forcePtag: Force P tag
Parameter value: true (force P tag), false (not force)
keepValue: Automatically save src and href attribute values
Parameter values: true (save), false (not saved) Description: When using the editor under IE and other browsers, the inserted image and link address will be automatically converted to the absolute address by the browser. For example, if you enter:, it will automatically be converted to:/
modalWidth: default width of showModal popup window
Parameter value: numeric value, default is 350 Description: Default width of popup window
modalHeight: default height of showModal popup window
Parameter value: numeric value, default is 220 Description: Default height of pop-up window
modalTitle: Whether the showModal pop-up window displays the title bar above
Parameter value: true (display), false (not displayed) Description: Controls whether the pop-up window displays the title bar above, which is displayed by default. If you need to display a more customized and personalized iframe window, you can hide the title bar above through this parameter.
upLinkUrl: Hyperlink file upload and receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the hyperlink upload function. For details, please refer to the demo8 demo file.
upLinkExt: Restrict local file extensions before uploading hyperlinks
Parameter value: The file extension list restricted before hyperlink upload, default is: zip, rar, txt, it is recommended to be consistent with the server extension checklist
upImgUrl: Upload image file to receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upImgExt: Restrict local file extensions before uploading pictures
Parameter value: The file extension list restricted before image upload, default is: jpg, jpeg, gif, png, it is recommended to be consistent with the server extension checklist
upFlashUrl: upload and receive URL for animation file
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upFlashExt: Restrict local file extensions before animation upload
Parameter value: The file extension list restricted before animation upload, default is: swf, it is recommended to be consistent with the server extension check list
upMediaUrl: Video file upload and receive URL
Parameter value: Receive the server-side program URL uploaded by the user. Leave it blank by default to disable the upload function. For details, please refer to the demo8 demo file.
upMediaExt: Limit local file extension before uploading video
Parameter value: The file extension list restricted before video upload, default is: avi, it is recommended to be consistent with the server extension checklist
Notes on using the upload interface:
The demos directory is only the demo code. If you are using other server scripting languages, please modify the upLinkUrl, upImgUrl, upFlashUrl and upMediaUrl in the initialization parameters by yourself, and develop the corresponding server upload and receive program. If you want to actually use it in your project, please modify the code yourself or redevelop it. During the development process, please pay attention to the format and size limitations of the uploaded files and pay attention to server security issues. The development specifications for uploading and receiving programs: 1. The domain name of the upload file is: upload2. The return structure must be json, and the structure is as follows: {"err":"","msg":""} If an error occurs in the upload, please save the error content in the err variable; if the upload is successful, please save the absolute or relative address on the server in the msg variable. If the editor finds that the returned err variable is not empty, the pop-up window displays the returned error content. Upload management plan suggestions: 1. When the editor is initialized, the absolute unique tracking value is followed by the previous server. For example: ?infoid=1213121212. Save it in the server receiving program with this tracking value to the database. At the same time, it can also limit the total number of uploaded files or the total file size under a single tracking value. Otherwise, it is a vulnerability that can upload unlimited files. 3. When the current form is submitted, compare it according to the HTML content submitted by the editor and the uploaded content in the database to delete all uploaded files that are not used. 4. Regularly delete the file records that are not submitted in the upload database by the server script, so that others can prevent your website from being used as a free album space.
plugins: Custom button plugin extension
The attribute explanation of the plug-in object: c: style sheet name t: plug-in name (the mouse is displayed above the button) s: shortcut e: special instructions for the code that needs to be executed after the button is clicked: If you want the style sheet to be stored in the template directory that comes with the system, please 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, xhEdtBtnCopy, where Cut and Copy are the plug-in name, please refer to demo9 in the demo folder for the specific call method.
JS interface description
JS interface sample code:
var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'/',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction})[0].xheditor;();('str')sHtml=()('<p>aaa</p>')('<p>aaa</p>')('str')sHtml=('<b>aaa</b>')()()()()alert();='txt,doc';
focus: Make the editor focus
No parameters
setSource: Set the 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: Added in version 0.9.5
pasteHTML: Paste HTML content to the editor's current cursor
Parameter 1: HTML code to paste, example: '<p>uuu</p>'
pasteText: Paste text to the editor's current cursor
Parameter 1: The text to be pasted, example: 'The content here is displayed completely as it is'
formatXHTML: Format XHTML code
Parameter 1: HTML code that needs to be formatted, example: '<b>aaa</b>', return '<strong>aaa</strong>'
toggleSource: Switch between source code mode and edit mode
Parameter 1: empty (switch), true (show source code mode), false (show edit mode)
togglePreview: Switch between preview mode and edit mode
Parameters 1: empty (switch), true (show preview mode), false (show edit mode)
toggleFullscreen: Switch between full screen mode and standard size
Parameter 1: empty (switch), true (show full screen mode), false (show standard mode)
toggleReadonly: Switch between read-only mode and editable mode
Parameter 1: empty (switch), true (switch to read-only mode), false (switch to editable mode)
settings: Get or modify the internal parameters of the editor
internalScript: Whether to clear internal code inlineScript: whether to clear inline code internalStyle: whether to clear internal style inlineStyle: whether to clear inline style forcePtag: Force use P tag keepValue: Keep attribute value upLinkUrl: hyperlink upload interface address upLinkExt: hyperlink local upload extension restriction upImgUrl: picture upload interface address upImgExt: picture local upload extension restriction upFlashU rl: Animation upload interface address upFlashExt: Animation local upload extension limit upMediaUrl: Video upload interface address upMediaExt: Video local upload extension limit beforeSetSource: Call this function before setting the source code to the editor beforeGetSource: Call this function before returning source code from the editor focus: Call back when the editor gets focus blur: Call back when the editor loses focus Note: Modifying valid variables is only limited to the above, and other variables are only used when the editor is initialized
Editor initializes callback function list:
beforeSetSource and beforeGetSource are editor callback functions, which are called before setting the source code and retrieving the source code respectively. For details, please refer to the UBB code demonstration page focus and blur are callback functions when the editor focuses and loses focus.