Basic concepts and related information of HTML online editor Page 1/2

Basic concepts and related information of HTML online editor Page 1/2_javascript skills

PHP中文网

Release： 2016-05-16 19:17:11

Original

999 people have browsed it

1. What is an HTML online editor?
As the name suggests, an online editor is a tool for online editing, and the edited content is an HTML-based document.
2. What is the use of HTML online editor?
Because the HTML online editor can be used to edit HTML-based documents online, it is often used for message board messages, forum posts, blog writing, or other places where users are required to enter ordinary HTML.
3. What is DHTML
DHTML is the integration of some existing web technologies and standards. Through it, web designers can create web pages in a new way.
4. The relationship between DHTML and HTML
DHTML is based on the HTML language, but compared to the method of designing web pages using pure HTML, the biggest change brought about by HTML is that it adds "objectified" web page features. The dynamic HTML object model defines objects used to describe web pages and their internal elements. Each object has properties that describe its own state and methods that describe its behavior. They can also handle specific types of events, so web designers can These objects are controlled or called through Script programs.
5. The relationship between DHTML and HTML online editor
To make an online editor, you need to use DHTML, because in order for an HTML online editor to be able to edit online, it needs to "dynamically" change the properties of web page objects, and DHTML just meets this need.
What are the HTML online editors?
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
Basic principles of HTML online editor
Reprinted from: http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
After looking at the popular online editors now, I can’t help but want to understand the principles. I downloaded eWebEdit, which is currently the most widely used. This is the most powerful open source online editor I have ever seen... After studying it for a day, I finally understood the core principle.
First explain the principle of the online editor: First, it requires the support of IE5.0 or above. Because IE5.0 or above has an editing state, you can enter text in an iframe. Then you can get the html code in the iframe through "document.body.innerHTML". This is the key. So how can you put ifrmae in the editing state? You can use:
function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}
Function implementation. The remaining problem is to get the focus and selected value:
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
The above 2 sentences can get the html code of the selected value.
At this point, the basic principle is clear, and then we can use the insertHTML("str") method to replace the selected value with the html character. The following is a simple demo to demonstrate an online editor with only bold effect. I use a textarea here to get the html value in the iframe. In actual situations, you can set the display of the textarea to false, and then submit the content of the iframe.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script language="javascript"> 
function getIframeData(){ 
document.form1.test.value=HtmlEdit.document.body.innerHTML; 
} 
function sentIframeData(){ 
HtmlEdit.document.body.innerHTML=document.form1.test.value; 
} 
function doB(){ 
HtmlEdit.focus(); 
var sel = HtmlEdit.document.selection.createRange(); 
insertHTML("<b>"+sel.text+"</b>"); 
} 
function insertHTML(html) { 
if (HtmlEdit.document.selection.type.toLowerCase() != "none"){ 
 HtmlEdit.document.selection.clear() ; 
} 
HtmlEdit.document.selection.createRange().pasteHTML(html) ;  
} 
function document.onreadystatechange() 
{ 
HtmlEdit.document.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> 

 
<input type="submit" name="Submit" value="提交"> 
<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>

Copy after login

First of all, there must be an edit box. This edit box is actually an editable web page. We use iframe to create the edit box.

并且在加上javascript代码来指定HtmlEdit有编辑功能：

WEB在线编辑器原理
转载自：http://blog.fhuang.com/article.asp?id=239
从eWebEditor到 FCKeditor现在有很多很多的在线编辑器了，功能都很强，很多，但是其基本原理却都很简单
我发现的编辑器主要有3大类，我总结下，把各自的优缺点都写下
直接用textarea 标签
优点：速度快，提交方便，可以用UBB标签来弥补不能所见所得
缺点：不直观，功能非常少
用 DIV或者TABLE的CONTENTEDITABLE 标签，属性来让一个区域可以编辑
优点：可以很直观，可以做各种效果
缺点：此标签在mozilla下不可用，只适合IE浏览器，且对js要求高
用iframe或者frame的中的document的document.designMode ="On" 来实现可编辑
优点：具有上面第二条的全部优点，并且还多浏览器比如FF等支持
缺点：对js要求高
下面是第三点的一个简单例子代码

<iframe MARGINHEIGHT="1" MARGINWIDTH="1" width="400" height="100"></iframe> 
<script language="JavaScript"> 
<!-- 
//get frame object  
frameobj=frames[0]; 
bodyHtml="<head>\n<style type=\"text/css\">body {font: 10pt verdana;}</style>\n</head>\n<BODY bgcolor=\"#FFFFFF\" MONOSPACE>" 
bodyHtml += "<style>\np{margin:0px;padding:0px;}\n</style>\n</body>"; 
frameobj.document.open(); 
frameobj.document.write(bodyHtml); 

frameobj.document.close(); 
frameobj.document.designMode="On"; 
//--> 
</script>

Copy after login