[JQuery] webpage text format editor xheditor,

[JQuery] webpage text format editor xheditor,

The webpage text format editor xheditor is an excellent, open-source, and IE6-compatible JQuery plug-in. Nowadays, many websites involve user interaction. It is hard to imagine what a website without an input box is like. You cannot give a blank text box to others? It takes time and effort to write a text format editor using javascript or jquery. JQuery plug-in xheditor is the first choice. This box plug-in is very famous and classic, and is even being written into the csdn blog Editor, Which is improved based on it, the code editor is a very core function than the original text editor. For details, see:

I. Basic Objectives

Maybe your website does not necessarily need the code segment editing function, or you can prohibit users from uploading images, however, it is also essential for the military to provide an editor that allows users to bold, put hyperlinks, And put images of external links in a certain format. Make a text editor. For example, you can perform some basic operations in word, such as bold, italic, center, and color change. The following uses JSP as an example to describe how to use this editor. PHP and ASPX front-end code are the same, but the parameters are different.

How to pass parameters between forms is not the focus of this article. For details, refer:

Asp is the logon System for connecting to the Access database in [ASP] of vbscript (click to open the link)

Aspx is the habit of writing and editing records in aps.net. I forgot to write it down.

For details about jsp version, see [Filter] Use Filter to solve the encoding problem of post transmission and use EL expression to simplify parameter transfer (click to open the link)

For php, see [php] basic syntax and value transfer between pages "(click to open the link)

I have written them all, and they are basic things!

Ii. Basic preparations

1. Go to the xheditor official website (click to open the link) to obtain the latest version of xheditor, for example:

2. Create a project in eclipse, create a js folder in webContent, and create an edit. jsp folder in webContent to place the editor, and a request. jsp file to output the results. Php and aspx are also used to create a js folder on your website and set two pages. One is for user input and the other is for output of user results. The specific directory structure is as follows:

3. Download xheditor.zip and decompress it. All the xheditor headers, src and jquery folders, and xheditor. put the js file in the js folder of our website. It is worth noting that, even if jquery is already available on your website, jquery of xheditor is still needed, jquery1.9.11-1. js cannot provide support for this xheditor plug-in that only requires jquery1.4.

4. Refresh the jsp project in eclipse and configure it to tomcat.

Iii. Production Process

1. request. jsp: it is very simple to describe the page on which jsp is used to display the editing result parameters. The parameter is obtained using a jsp script that has been sprayed with brains. In essence, after xheditor is used, the parameters of a simple multi-line text edit box are obtained, it is exactly the same. You only need to set the name of the multi-line text box. on this page, you can get this name. Encoding must be set before jsp gets it!

<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. edit. jsp: This is the page for placing the xheditor text editor. This is the key. But it is not difficult. First, introduce three necessary JavaScript codes in the page header, which is also officially required by xheditor. You only need to set the class parameter for the text box. Other forms and submit buttons can be written as usual. Xheditor is just a multi-row form!


<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> You can use the wizard.html file behind the xheditordecompressed folder to generate the required text editor by using this code generator, saving time and effort. This text editor seems to support the file upload function. For the response to JSP file upload, see [Servlet] using the Servlet3.0 standard and JSTL expression to implement the file upload system. It supports displaying images after uploading (click to open the link). I have done this before, I will not go into details here. The file upload button of xheditor is hidden in the hyperlink. I don't think it is necessary to enable external links for users to upload images. My current editor is simple style, no style, clear word format, size is 640x300.



4. Of course, the above example only outputs the user's functions immediately. If you actually put it on the Internet, you still need to check before the form is published, before submitting a [JavaScript] form, I used the frontend processing check trilogy (click to open the link). Before saving it to the database, I should also escape the content entered by the user to eliminate the escape, for more information, see [JavaScript] how to display webpage crashes and escape characters without escaping (click to open the link ). At the same time, you also need to take into account the SQL Injection problem during background processing. After all, the group on the Internet is nothing special, and other websites feel like they are very cool and cool. We often have a small website and a program for cool.
5. If you still need a prompt before leaving the page, refer to my previous prompt before leaving the page in [JavaScript] (click to open the link)