To support both Firefox and IE, we often use the document.getElementById (ID) method to get the HTML object. However, the getElementById method can only get a single object, and there is nothing for a checkbox array.
1. Download the latest version of Xheditor. Download Address: Http://xheditor.com/download
2. Unzip the zip file and upload the Xheditor.js and Xheditor_emot and Xheditor_skin two folders to the appropriate directory on the site
3. Add before the end of the head tag of the corresponding HTML file
<script type= "Text/javascript" src= "Http://static.xxx.com/js/xheditor.js" ></script>
4. There are two ways to invoke a method:
Method 1: Add properties on textarea: class= "Xheditor" (set to Xheditor-mini and xheditor-simple, default load Mini and Simple toolbars respectively) Method 2: Add in the initial JS code of your page: $ (' # Elm1 '). Xheditor (True), for example: $ ({$ (' #elm1 '). Xheditor (True); The corresponding hidden edit code is: $ (' #elm1 '). Xheditor (false);
Description of initialization parameters
To initialize the sample code:
$ (' #elm1 '). Xheditor (true,{tools: ' Full ', skin: ' Default ', Showblocktag:true,readonly:false,internalscript:false, Internalstyle:false,width:300,height:200,loadcss: ' Http://jb51.net/test.css ', fullscreen:true,sourcemode:true, Forceptag:true,upimgurl: "upload.php", Upimgext: "Jpg,jpeg,gif,png", keepvalue:true,plugins:{}});
Tools: Customizing Tool buttons
Parameter values: Full (complete), simple (easy), mini (mini) or custom string, for example: ' Gstart,cut,copy,paste,pastetext,gend,separator,gstart,source, Preview,fullscreen,about, Gend ' full button table: Gstart: Group start Gend: Group End Separator: Separator cut: Clip copy: Copy paste: Paste pastetext: Text paste Blocktag: Paragraph label fontface: font fontsize: Font size bold: Bold Italic: Italic underline: Underline strikethrough: underline fontcolor: Font color backcolor: Font background color removeformat: Delete text formatting align: Align list: outdent: Reduce indent indent: Add indent Link: Hyperlink unlink: Delete link img: Picture flash:flash animation Media:windows Media Player Video emot: Expression table: Table Source: Toggle Source Code mode preview: Toggle preview Mode fullscreen: Toggle Full-screen mode about: About Xheditor
Skin: Skin Style selection
Parameter value: Default Style, O2007blue (Office 2007 Blue), O2007silver (Office 2007 Silver)
Showblocktag: Show paragraph labels
Parameter value: True (display paragraph label), False (not shown)
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 value: Style sheet URL, for example: ' Http://www.jb51.net/css/global.css '
Fullscreen: Default Full-screen display
Parameter value: True (full screen size), False (standard size)
ReadOnly: Default read-only mode
Parameter value: True (read-only mode), False (editable mode)
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)
Keepvalue: Automatically save src and href attribute values
Parameter value: True (Save), False (do not save) Description: In IE and other browsers using the editor, the inserted picture and link address will be automatically converted to absolute address browser, such as input: A.gif, automatic will be converted to: Yun_qi_img/a.gif
Default width of Modalwidth:showmodal pop-up window
Parameter value: Numeric value, default to 350 description: Default width of pop-up window
Default height of the Modalheight:showmodal pop-up window
Parameter value: Numeric value, default to 220 description: Default height of pop-up window
Whether the Modaltitle:showmodal pop-up window displays the top title bar
Parameter value: True (Display), False (not shown) Description: Control pop-up window to display the top of the title bar, default to display, if you need to display a more customized to personalize the iframe window, you can hide the above title bar through this parameter
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
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
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
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
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
Upload interface Use considerations:
The upload.php in the Demos directory is for demonstration code only, and if you are using a different server scripting language, modify the Uplinkurl, Upimgurl, Upflashurl, and Upmediaurl in the initialization parameters yourself. and develop the corresponding server upload receiving 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, pay attention to server security issues. Upload Receive Program Development specification: 1, the name of the upload file is: upload2, the return structure must be JSON, and the structure is as follows: {"Err": "", "MSG": "200906030521128703.gif"} if there is an error in uploading, Save the error contents in the Err variable, and if the upload succeeds, 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 error content returned. Upload Management proposal: 1, in the editor initialization, after the upload.php with a server generated absolute unique tracking value, such as: upload.php?infoid=1213121212, in the server receive program with this trace value saved to the database, You can also limit the total number of uploaded files or total file sizes under a single trace value, otherwise, it's a vulnerability that can upload unlimited files. 3, the final current form submission, and then based on the editor submitted HTML content and database upload content to compare, delete all unused upload file 4, Periodically delete files from the uploaded database that are not submitted by the server script to prevent others from putting your site in a free album Space
Plugins: Custom button Plug-in Extensions
Attribute interpretation for Plug-in objects: C: Style sheet name T: Plug-in name (displayed when mouse over button) s: Shortcut E: Button After clicking on the code to be executed special note: If you want the style sheet to be stored in the system's own template directory ui.css, leave the plug-in object's style name blank, the corresponding style will be called automatically according to the plug-in name, for example: Xhedtbtncut, Xhedtbtncopy, Where the cut and copy is the plug-in name specific call method please refer to the Demo9 in the demo folder
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: ' Http://jb51.net/test.css ', Fullscreen:true,beforesetsource:ubb2html,beforegetsource: Html2ubb,focus:focusaction,blur:bluraction}) [0].xheditor;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.togglepreview () Editor.togglefullscreen () editor.togglereadonly () alert (EDITOR.SETTINGS.UPIMGEXT); editor.settings.upimgext= ' Txt,doc ';
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
pastehtml: Paste HTML content to the editor at the current cursor
Parameter 1: HTML code to paste, example: ' <p>uuu</p> '
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> '
formatxhtml: Formatting XHTML code
Parameter 1: HTML code to be formatted, example: ' <b>aaa</b> ', return ' <strong>aaa</strong> '
Togglesource: Switching between source code and edit mode
Parameter 1: null (toggle), True (display source code mode), False (show edit mode)
Togglepreview: Toggle between preview mode and edit mode
Parameter 1: null (toggle), True (show preview 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)
Togglereadonly: Switching between read-only and editable mode
Parameter 1: null (toggle), true (switch to read-only mode), FALSE (switch to editable mode)
Settings: Get or modify editor internal parameters
Internalscript: Do you want to clear the internal code inlinescript: Do you want to clear the inline code Internalstyle: whether to clear the inner style Inlinestyle: whether to clear the inline style Forceptag: Force the use of the P tag keepvalue: Keep The property value Uplinkurl: Hyperlink upload interface address uplinkext: Hyperlink local upload extension limit upimgurl: Picture upload interface address upimgext: Picture local upload extension limit upflashurl: 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 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 has focused Blur: callback This function when the editor loses focus Note: Modify valid variable only above, Other variables are only used when the editor initializes
Editor initialization List of callback functions:
Beforesetsource and Beforegetsource are editor callback functions that are called before the source code is set and the source code is retrieved, and the detailed use method can refer to the UBB Code presentation page focus and Blur is the callback function when the editor focuses and loses attention
