Home >Web Front-end >JS Tutorial >Basic concepts and related information of HTML online editor Page 1/2_javascript skills

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

PHP中文网Original: 2016-05-16 19:17:111037browse

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>

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.

692e2ca9371b9be141418b007a1c2187093fd97c861cbe789149c399ad2b038c
并且在加上javascript代码来指定HtmlEdit有编辑功能：
5e18004130b03fd4aaa01fe61a84ebb1
var editor;
editor = document.getElementById("HtmlEdit").contentWindow;
//只需键入以下设定，iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//但是IE与FireFox有点不同，为了兼容FireFox，所以必须创建一个新的document。
editor.document.open();
editor.document.writeln('100db36a723c770d327fc0aef2ce13b16c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e');
editor.document.close();
//字体特效－加粗方法一
function addBold()
{
editor.focus();
//所有字体特效只是使用execComman()就能完成。
editor.document.execCommand("Bold", false, null);
}
//字体特效－加粗方法二
function addBold()
{
editor.focus();
//获得选取的焦点
var sel = editor.document.selection.createRange();
insertHTML("a4b561c25d9afb9ac8dc4d70affff419"+sel.text+"0d36329ec37a2cc24d42c7229b69747a");
}
function insertHTML(html)
{
if (editor.document.selection.type.toLowerCase() != "none")
{
editor.document.selection.clear() ;
}
editor.document.selection.createRange().pasteHTML(html) ;
}
2cacc6d41bbb37262a98f745aa00fbf0
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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Excellent js open source framework-jQuery User Manual (1)_jqueryNext article：Excellent js open source framework-jQuery User Manual (1)_jquery

See more

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

Related articles