Home > Others

Principles of online document Editor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
First, we need the support of ie. After ie 5.5, there will be an editing status. This editing status will be used and javascript will be used to control online editing. The following is a brief example:

First, you must have an editing box. This editing box is actually an editable webpage. Here we use iframe to create an editing box.

<IFRAME id = HtmlEdit style = "WIDTH: 100%; HEIGHT: 296px" marginWidth = 0 marginHeight = 0>
</IFRAME>

Add javascript code to specify that HtmlEdit has the Edit function:

Function document. onreadystatechange ()
{
HtmlEdit.doc ument. designMode = "On ";
}

 

HtmlEdit.doc ument. body. innerHTML can get the html code in HtmEdit. In general, we will use this javascript to pass the content in iframe to a textarea and then submit it to the server for processing.

Function getIframeData (){
Document.form1.test.value?htmledit.doc ument. body. innerHTML;
}
Function sentIframeData (){
HtmlEdit.doc ument. body. innerHTML = document. form1.test. value;
}

Var sel = HtmlEdit.doc ument. selection. createRange (); this sentence can obtain the selected focus:

The following example shows how to complete the process. An online editor with the bold feature. If you are interested, you can complete other functions on this basis !!

<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Script language = "javascript">
Function getIframeData (){
Document.form1.test.value?htmledit.doc ument. body. innerHTML;
}
Function sentIframeData (){
HtmlEdit.doc ument. body. innerHTML = document. form1.test. value;
}
Function doB (){
HtmlEdit. focus ();
Var sel = HtmlEdit.doc ument. selection. createRange ();
InsertHTML ("<B>" + sel. text + "</B> ");
}
Function insertHTML (html ){
If (HtmlEdit.doc ument. selection. type. toLowerCase ()! = "None "){
HtmlEdit.doc ument. selection. clear ();
}
HtmlEdit.doc ument. selection. createRange (). pasteHTML (html );
}
Function document. onreadystatechange ()
{
HtmlEdit.doc ument. designMode = "On ";
}
</Script>
</Head>

<Body>
<Form action = "test. asp? Act = add "method =" post "name =" form1 ">

<IFRAME id = HtmlEdit style = "WIDTH: 100%; HEIGHT: 296px" marginWidth = 0 marginHeight = 0>
</IFRAME>
<Textarea name = "test" rows = "10" id = "test" style = "width: 100%;"> </textarea>
<Br>
<Input type = "submit" name = "Submit" value = "submit">
<Input type = "button" value = "iframe-> textarea" onClick = "getIframeData ()">
<Input type = "button" value = "textarea-> iframe" onClick = "sentIframeData ()">
<Input type = "button" value = "B" onClick = "doB ()">
</Form>
</Body>
</Html>

How to call the html online editor-Principles and Examples
[01:17:19 | Author: Lspcieee]
Font size: large | medium | small
From 51js.com
Collections-2004
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 = d "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 = "java script">
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 = java script>
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 = "java script">
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 = java script>
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 = java script>
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.

Supplement:
<! DOCTYPE html PUBLIC '-// W3C // dtd xhtml 1.0 Transitional // en'' <a href = "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target = "_ blank"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd </a>'>
<Html xmlns = '<a href = "http://www.w3.org/1999/xhtml" target = "_ blank"> http://www.w3.org/1999/xhtml </a>'>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> </title>
<Script language = "javascript">
Var editor;

Function document. onreadystatechange (){
Editor = document. getElementById ("HtmlEdit"). contentWindow;
// Simply enter the following settings and the iframe is immediately changed to the editor.
// But IE is a little different from FireFox. To be compatible with FireFox, you must create a new document.
Editor.doc ument. open ();
Editor.doc ument. writeln ("

Editor.doc ument. writeln ("First, there must be an editing box, which is actually an editable webpage. We use iframe to create an editing box. </Body> Editor.doc ument. close ();

Editor.doc ument. designMode = "On ";
Editor.doc ument. contentEditable = true;

Editor. focus ();
Return;
}

// Font effects-bold method 1
Function addBold ()
{
Editor. focus ();
// All font effects can only be completed using execComman.
Editor.document.exe cCommand ("Bold", false, null );
}

// Font effects-bold method 2
Function addBoldII ()
{
Editor. focus ();
// Obtain the selected focus
Var sel = editor.doc ument. selection. createRange ();
InsertHTML ("<B>" + sel. text + "</B> ");
}

Function insertHTML (html)
{
If (editor.doc ument. selection. type. toLowerCase ()! = "None ")
{
Editor.doc ument. selection. clear ();
}
Editor.doc ument. selection. createRange (). pasteHTML (html );
}
</Script>
</Head>

<Body>
<H4> <a href = "#" onclick = "return addBoldII ()"> bold text </a> <IFRAME id = "HtmlEdit" style = "WIDTH: 100%; HEIGHT: 296px;"> </IFRAME>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
principles of microservices ideo principles of design gestalt principles of perceptual organization gestalt principles of visual perception soa principles of service design php document editor principles of ux design invision

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More