The method of invoking HTML online editor and its application

Detailed | online

The HTML online editor does not need to know how to use Dreamweaver, and it uses Word to use this editor, which is very useful in the article system or in Web programs that require text editing in a news system.
But how do I embed an HTML editor into a Web page and how do I get the data inside?!
First we assume that the HTML online editor we are going to call is placed on a separate page with the filename gledit.htm.
The HTML online editor has two basic methods of calling:

One, using object invoke:
1. How to embed HTML editor in Web pages: We add the following HTML code where we need to embed:

<object id=doc_html data= "gledit.htm" width=530 height=320, Type=text/x-scriptlet VIEWASTEXT></object>
The object tag inside the data received is what we want to call the online editor page path, ID is we call the object ID, followed by the editor in the data to use this ID. Width and height are the height and width of the editor.
2, how to get the data in the HTML editor: all the content that needs to be submitted we are placed in a form, also using the object called Editor also placed in this form, and we can set a hidden text area (

<textarea name= "Content" style= "Display:none" ></textarea> or

<input type= "hidden" name= "Content" >) is used to temporarily save data for the HTML online editor at the time of submission, because the contents of object in the form cannot be directly retrieved in ASP or jsp,php. So we have to use hidden text areas to get the data. We copy the contents of the object into the hidden text area while the form is submitted. The detailed code is as follows:
<script language= "javascript" >
function Checkform ()
{
Document.form1.content.value= Document.form1.doc_html.value;
}
</script>
<form method= "POST" action= "add_news_save.asp" Name= "Form1" >
<object id= doc_html name= doc_html style= "left:0px; top:0px "Data=" gledit.htm "width=530 height=320 type=text/x-scriptlet viewastext></object>
<input Type= "hidden" name= "Content" >
</form>
In this way, we can get the data of the HTML online editor directly by retrieving the data of the hidden area content in the background processing page.
3, how to add an uploaded native picture to the HTML online Editor in a text editor: First we make the click of the button inserted in the picture to pop up a picture of the window, we use their own program to achieve upload the local picture to the server, and then we need to record the path of the picture, Then add the HTML tag that displays the picture to the value of the HTML online editor. The details and code are as follows:
In the editor, we add an event to the button that inserts the picture

>
In ' img_upload.asp ' we upload the submitted pictures to the server to create the directory and then record the image path.
<script language=javascript>
var src= ' <%= ' upload/' &newname%> ';
Opener.form1. Doc_html.value + = "Window.close ();
</script>
This enables you to simply insert the uploaded image into the editor.
4, how to modify the article in the editor to call the HTML online editor to modify the data: When we add the HTML online editor to modify the data submitted to the database, we also need to be able to use the content of the database with the HTML online editor to modify the data. First we add a hidden area to the form to place the contents of the database, such as

<textarea style= "Display:none" name= "Content" rows= "" cols= "" ><%= rs ("content")%></textarea> Note that here we use hidden textarea instead of hidden input, because the data may contain a carriage return line, so if we use

<input type= "hidden" name=content value= "<%= (RS (" content ")%>" >

Most likely because

<%= (RS ("Content")%> an HTML error with a line break (the data followed by the value= must be guaranteed to be on a single line, or an error will occur). Then follow the method described earlier using object to invoke the HTML online editor, the method and code ibid, now we have to do is the reverse process of submission, we simply copy the contents of the hidden text area to the HTML online editor on it, where we add the body inside the < Body ",

This allows the contents of the database to be edited in the HTML online editor when the page is loaded, and the submission process is the same as the one described above.

Second, the use of the IFRAME call (some and object calls repeat where the simple description)
1. How to embed in Web pages: We add the following HTML code where we need to embed:

<iframe src= "gledit.htm" id= ' content_html ' style= ' left:0px; POSITION:

absolute; top:0px;z-index:0 "width=" 100% "height=" 100% "></IFRAME>" src= "followed by the data that we are going to call the online editor page to get the path, ID is that we call the IFRAME Id,width and height is the editor's height and width.
2, how to get the data in the HTML editor: Also all the content to be submitted we are placed in a form, and we can set a hidden text area (<textarea name= "content" style= "Display:none" > The </textarea> or <input type= "hidden" name= "Content" >) is used to temporarily save data for the HTML online editor at the time of submission, and we use the hidden text area to get the data. We copy the contents of the object into the hidden text area while the form is submitted. The detailed code is as follows:
function Subchk (cmd)
{
Document.form1.content.value= Window.content_html.getHTML ();
}
</SCRIPT>
<form method=post action= "Article_add_save.gl" Name= "Form1" >
<input type= "hidden" name= "Content" >
<iframe src= "gledit.htm" id= ' content_html ' style= ' left:0px;

Position:absolute; top:0px;z-index:0 "width=" 100% "height=" 100% "></IFRAME>
</FORM>
In the background processing page we can get the data of the HTML online editor directly by taking the data of the hidden area content.
2, how to get the data in the HTML editor: all the content to be submitted we are placed in a form, also using the object called Editor also placed in this form, and we can set a hidden text area (<textarea name= "content" The style= "Display:none" ></textarea> or <input type= "hidden" name= "Content" >) is used to temporarily save data for the HTML online editor at the time of submission. Because the content of object in the form is not directly available in the ASP or jsp,php, we must use the hidden text area to get the data. We copy the contents of the object into the hidden text area while the form is submitted. The detailed code is as follows:
<script language= "JavaScript" >
function Checkform ()
{
Document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method= "POST" action= "add_news_save.asp"

Name= "Form1" >
<object id=doc_html name= doc_html style= "left:0px; top:0px "

Data= "gledit.htm" width=530 height=320 type=text/x-scriptlet viewastext></object>
<input type= "hidden" name= "Content" >
</form>
In this case, we can get the data of the HTML online editor directly by retrieving the data of the content of the hidden area in the background processing page.
3, how to add an uploaded native picture to the HTML online Editor in a text editor: First we make the click of the button inserted in the picture to pop up a picture of the window, we use their own program to achieve upload the local picture to the server, and then we need to record the path of the picture, Then insert the HTML tag that displays the picture at the cursor position by writing a function in the Web page that calls the HTML online editor. Detailed description and code as follows:
In the editor, we add an event to the button on the Insert Picture

>

In the page that invokes the editor, we define a function that inserts HTML code into the editor
<script language=javascript>
function inserthtml (Htmlcode)
{
var win=window.content_html.ideditbox.document;
Window.content_html.idEditbox.focus ()//Is the editor gets focus, placement code inserts in the editor field side
Win.selection.createRange (). pastehtml (Htmlcode)//Insert HTML code at cursor position
}
</script>
In the file that handles the uploaded image, we call the function of the parent window to insert the HTML code
<script language=javascript>
var src= ' <%= ' upload/' &newname%> ';
var htmlcodes;
Htmlcodes = " '

Align= ' <%=theform ("align")%> ' border= ' <%=theform ("border")%> '

Hspace= ' <%=theform ("hspace")%> ' vspace= ' <%=theform ("vspace")%> ' > ';
Opener.inserthtml (Htmlcodes)
Window.close ();
</script>
This enables you to simply insert the uploaded image into the editor.
4, how to modify the article in the editor to call the HTML online editor to modify the data: When we add the HTML online editor to modify the data submitted to the database, we also need to be able to use the content of the database with the HTML online editor to modify the data. First we add a hidden area to the form to place the contents of the database, such as

<textarea style= "Display:none" name= "Content" rows= "cols=" >

<%= rs ("Content")%></textarea>

Here we add in the IFRAME that invokes the editor

<iframe src= "gledit.htm" id= ' content_html ' style= ' left:

0px; Position:absolute; top:0px;z-index:0 "width=" 100% "

height= "100%" ></iframe>, so that when the page is loaded, you can put the contents of the database into the HTML online editor, the submission process and the same as described above, this will not repeat.

Here is simply to introduce how to call the HTML online editor, the specific code is not listed, the process, if you have any questions and suggestions on the content of the article, please contact me.