The method of invoking HTML online editor and its application

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.

There are two basic calling methods for the
HTML online editor


one, using object invoke:


1, how to embed the HTML editor in a Web page: We add the following HTML code where we need to embed: <object id=doc_html data= gledit.htm width=530 height=320 Text/x-scriptlet viewastext></object>


the data in the object tag is what we want to call the online editor page path, ID is the ID we call the object ID, which is used to get the data in the editor. 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 is placed in a form, and the same editor that uses the object invocation is also placed inside the form, and we can set up a hidden text area (<textarea name= " Content "style=" Display:none "></textarea> or <input type=" hidden "name=" Content ">) To temporarily save data for the HTML online editor at the time of submission, because the content of object in the form cannot be obtained directly from 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. 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" onsubmit= "Checkform ()" 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 in the background processing of the page we can directly retrieve the data from the hidden area content to get the data of the HTML online editor.


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. Detailed description and code as follows:


in the editor we add the event onclick= "window.open" (' img_upload.asp ', ' img_upload ', ' width=481 ' height=190 ') on the button that inserts the picture, "> in ' Img_ Upload.asp ' We upload the submitted images to the server to create the directory and then record the picture path


<script language=javascript>


var src= ' <%= ' upload/' &newname%> ';


Opener.form1. Doc_html.value + = "<img border=0 src=" +src+ ">";


Window.close ();


</script>


This makes it easy to insert uploaded pictures into the editor.


4, how to edit the article when 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 in 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=" "" ><%= "" Content ")%></textarea&gt, 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 ")%>" > is likely to have an HTML error because of <%= (RS ("content")%> there is a newline (value= The data that follows must be guaranteed to be on one line, otherwise an error occurs. 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 onload= "Document.form1. Doc_html.value=document.form1.content.value "", 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.

Two, use the IFRAME call (some and object calls repeat where it simply describes)
1, how to embed in a Web page: 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 that needs 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" onsubmit= "Subchk ()" >
<input type= "hidden" name= "content" >&NBSP;