Call method of the HTML online editor (an article earlier)

HTML online editor does not need to know how to use Dreamweaver. It will be used when word is used. It is very useful in the article system or the web program that the news system requires text editing.
But how can I embed the HTML editor into a web page and obtain the data in it ?!
First, let's assume that we want to use the HTML online editor on a single page. The file name is the front-end page for gledit.htm to upload images: http://www.jfinfo.com/room/admin/img_upload.asp.
The HTML online editor provides two basic calling methods:
1. Use object call (http://www.jfinfo.com/room/admin/editor.asp ):
1. How to embed the HTML editor into a web page: Add the following HTML code to the embedded location: <Object ID = doc_html DATA = "gledit.htm" width = 530 Height = 320 type = text/X-scriptlet viewastext> </Object>
The data in the object tag is followed by the data, which is the path of the online editor page we want to call, and the ID is the ID of the object we call. This ID is used for getting the data in the editor later. Width and height are the height and width of the editor.
2. How to obtain the data in the HTML editor: all the content to be submitted is put in a form, and the editor called by the object is also put in this form, you can also set a hidden text area (<textarea name = "content" style = "display: none "> </textarea> or <input type =" hidden "name =" content ">) is used to temporarily Save the data of the HTML online editor during submission, because the content of objects in the form cannot be directly obtained in ASP or JSP and PHP, we must obtain data by hiding the text area. When the form is submitted, the content in the object is copied to the hidden text area. The 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, on the page processed in the background, we can directly obtain the data of the HTML online editor by obtaining the data of the hidden area content.
3. How to add a local image to the HTML online editor in the Text Editor: first, a window for uploading images is displayed when you click the insert image button, we use our own program to upload the local image to the server. Then we need to record the image path and add the HTML tag of the image to the value of the HTML online editor. The detailed description and Code are as follows:
In the editor, we add the event onclick = "window. open ('img _ upload. ASP ', 'img _ upload', 'width = 481 Height = 190') "> In 'img _ upload. in ASP, we upload the submitted image to the server to create a directory and record the image path.
<Script language = JavaScript>
VaR src = '<% = "upload/" & newname %> ';
Opener. form1. doc_html.value + = " ";
Window. Close ();
</SCRIPT>
In this way, the uploaded image is simply inserted into the editor.
4. How to call the HTML online editor to modify data when editing and modifying an article: when we submit the HTML online editor to the database when adding the modified data, we also need to be able to use the HTML online editor to modify the data of the database. First, we add a hidden area to the form to place the content in the database, for example, <textarea style = "display: none "name =" content "rows =" 20 "Cols =" 70 "> <% = RS (" content ") %> </textarea>, note that we use a hidden textarea instead of a hidden input, because the data may contain carriage return and line feed, so if we use <input type = "hidden" name = content value = "<% = (RS (" content ") %> "> probably because <% = (RS (" content ") %> there is a line feed, HTML errors may occur (value = followed by the data must be in a row, otherwise, an error occurs ). Then, follow the method described above to use the object to call the HTML online editor. The method and code are the same as above. Now, what we need to do is the inverse process during submission, you only need to copy the content of the hidden text area to the HTML online editor. Here, we add <body onload = "document. form1. doc_html.value = document. form1.content. value ">, so that when the page is loaded, you can put the database content into the HTML online editor for editing. The submission process is the same as described above and will not be repeated here.

2. Use IFRAME call (http://qxd.5599.net/by/source/article/manage/gledit.htm)
1. How to embed data in a web page: Add the following HTML code to the embedded location: <IFRAME src = "gledit.htm" id = 'content _ HTML 'style = "Left: 0px; position: absolute; top: 0px; Z-index: 0 "width =" 100% "Height =" 100% "> </iframe> where" src = "is followed by the data that we want to call the path of the online editor page, ID is the ID we call IFRAME, and width and height are the height and width of the editor.
2. How to obtain the data in the HTML editor: Similarly, all the content to be submitted is stored in a form, you can also set a hidden text area (<textarea name = "content" style = "display: none "> </textarea> or <input type =" hidden "name =" content ">) is used to temporarily Save the data of the HTML online editor during submission, we use the hidden text area to obtain data. When the form is submitted, the content in the object is copied to the hidden text area. The 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">
<IFRAME src = "gledit.htm" id = 'content _ HTML 'style = "Left: 0px; position: absolute; top: 0px; Z-index: 0 "width =" 100% "Height =" 100% "> </iframe>
</Form>
On the page processed in the background, we can directly obtain the data of the HTML online editor by obtaining the data of the hidden area content.
2. How to obtain the data in the HTML editor: all the content to be submitted is put in a form, and the editor called by the object is also put in this form, you can also set a hidden text area (<textarea name = "content" style = "display: none "> </textarea> or <input type =" hidden "name =" content ">) is used to temporarily Save the data of the HTML online editor during submission, because the content of objects in the form cannot be directly obtained in ASP or JSP and PHP, we must obtain data by hiding the text area. When the form is submitted, the content in the object is copied to the hidden text area. The 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, on the page processed in the background, we can directly obtain the data of the HTML online editor by obtaining the data of the hidden area content.
3. How to add a local image to the HTML online editor in the Text Editor: first, a window for uploading images is displayed when you click the insert image button, we use our own program to upload images from the local machine to the server. Then we need to record the image path, then, write a function in the webpage of the HTML online editor to insert the HTML tag of the displayed image at the cursor position. The detailed description and Code are as follows:
In the editor, we add the event onclick = "window. open ('img _ upload. ASP ', 'img _ upload', 'width = 481 Height = 190') "> On the page that calls the editor, we define the function for inserting HTML code to the editor.
<Script language = JavaScript>
Function inserthtml (htmlcode)
{
VaR winstmwindocontent_html.ideditbox.doc ument; // The editor metadata is an IFRAME in gledit.htm and the ID is ideditbox.
Window. content_html.ideditbox.focus (); // The focus of the editor to prevent code from being inserted outside the editor.
Win. selection. createRange (). pastehtml (htmlcode) // insert HTML code at the cursor position
}
</SCRIPT>
In the file processing the uploaded image, we call the function of the parent window to insert 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>
In this way, the uploaded image is simply inserted into the editor.
4. How to call the HTML online editor to modify data when editing and modifying an article: when we submit the HTML online editor to the database when adding the modified data, we also need to be able to use the HTML online editor to modify the data of the database. First, we add a hidden area to the form to place the content in the database, for example, <textarea style = "display: none "name =" content "rows =" 20 "Cols =" 70 "> <% = RS (" content ") %> </textarea>, here we add <body onload = "inserthtml (document. form1.content. value) "> inserthtml () is a function that defines how to insert HTML code to the Editor (For details, refer to the Code for inserting images ). In this way, when the page is loaded, you can put the content in the database into the HTML online editor for editing. The submission process is the same as described above and will not be repeated here.

Here is a simple introduction to how to call the HTML online editor. The specific code is not listed one by one, if you have any questions or suggestions about the content in this article, contact me.

 

The first time I wrote a technical article, it was messy! I am not too lazy to sort it out later, but it may be useful for some people.
Describes how to call the HTML online editor.
The key point is to directly upload local images to the server and insert them into the HTML editor. When editing an article, you can call the HTML editor for editing.

At that time, the solution for uploading images to the server was not very scientific-each time a local image was inserted, It was uploaded to the server, and a lot of junk images were produced to the server.
Later, we inserted an image and dynamically generated <input type = File>. At the same time, we processed all the images uploaded as needed, and generate the specified file and image directory together with the article
For example, if artile321.htm is used, the corresponding image folder is in artile321.files. When deleting an article, you can delete the corresponding image folder at the same time.
At the same time, for the pasted image, you can also follow *. ALLl. tags ("IMG") is used to extract all addresses from other websites and can be downloaded to the server through XMLHTTP.

I have not had time to sort out the improvements mentioned in the preceding section on calling the HTML editor. I am very busy recently :(
If you have any questions, you can discuss them together.