HTML 온라인 편집기의 기본 개념 및 관련 정보 페이지 1/2

HTML 온라인 편집기의 기본 개념 및 관련 정보 페이지 1/2_javascript 기술

PHP中文网

풀어 주다： 2016-05-16 19:17:11

원래의

1000명이 탐색했습니다.

1. HTML 온라인 편집기란 무엇인가요?
이름에서 알 수 있듯이 온라인 편집기는 온라인 편집을 위한 도구이며, 편집된 내용은 HTML 기반 문서입니다.
2. HTML 온라인 편집기의 용도는 무엇인가요?
HTML 온라인 편집기는 온라인에서 HTML 기반 문서를 편집하는 데 사용할 수 있기 때문에 게시판 메시지, 포럼 게시물, 블로그 작성 또는 사용자가 일반 HTML을 입력해야 하는 기타 장소에서 자주 사용됩니다.
3. DHTML이란
DHTML은 기존의 웹 기술과 표준을 통합한 것입니다. 이를 통해 웹 디자이너는 새로운 방식으로 웹 페이지를 만들 수 있습니다.
4. DHTML과 HTML의 관계
DHTML은 HTML 언어를 기반으로 하지만 순수 HTML을 이용해 웹페이지를 디자인하는 방식에 비해 HTML이 가져온 가장 큰 변화는 웹페이지에 "객관화된" 기능을 추가했다는 점이다. 동적 HTML 개체 모델은 웹 페이지와 해당 내부 요소를 설명하는 데 사용되는 개체를 정의합니다. 각 개체에는 자체 상태를 설명하는 속성과 해당 동작을 설명하는 메서드가 있으므로 웹 디자이너는 이러한 개체를 제어할 수 있습니다. 또는 스크립트 프로그램을 통해 호출됩니다.
5. DHTML과 HTML 온라인 편집기의 관계
온라인 편집기를 만들려면 DHTML을 사용해야 합니다. 왜냐하면 HTML 온라인 편집기가 온라인으로 편집할 수 있으려면 웹 페이지 개체의 속성을 "동적으로" 변경해야 하고 DHTML이 이러한 요구 사항을 충족하기 때문입니다. .
HTML 온라인 편집기란 무엇인가요?
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
HTML 온라인 편집기의 기본원리
재인쇄: http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
지금 인기 있는 온라인 편집자들을 보니 원리를 이해하고 싶어지지 않을 수가 없네요. 현재 가장 널리 사용되는 eWebEdit을 다운로드했습니다. 이것은 제가 본 것 중 가장 강력한 오픈 소스 온라인 편집기입니다... 하루 동안 공부한 후에 마침내 핵심 원리를 이해했습니다.
먼저 온라인 편집기의 원리를 설명합니다. 첫째, IE5.0 이상의 지원이 필요합니다. IE5.0 이상은 편집상태이므로 iframe에 텍스트를 입력할 수 있습니다. 그러면 "document.body.innerHTML"을 통해 iframe에서 html 코드를 얻을 수 있습니다. 이것이 핵심입니다. 그렇다면 어떻게 ifrmae를 편집 상태로 둘 수 있습니까?
함수 document.onreadystatechange()
{
HtmlEdit.document.designMode="On"
}
기능 구현. 남은 문제는 포커스와 선택된 값을 얻는 것입니다.
HtmlEdit.focus();
var sel = HtmlEdit.document.selection.createRange();
위의 2문장에서는 선택한 값의 HTML 코드를 얻을 수 있습니다.
이 시점에서 기본 원칙은 분명하며 insertHTML("str") 메소드를 사용하여 선택한 값을 html 문자로 바꿀 수 있습니다. 다음은 굵은 효과만 적용한 온라인 편집기를 보여주는 간단한 데모입니다. 여기서는 텍스트 영역을 사용하여 iframe에서 html 값을 가져옵니다. 실제 상황에서는 텍스트 영역 표시를 false로 설정한 다음 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>

로그인 후 복사

우선 편집 상자가 있어야 합니다. 이 편집 상자는 실제로 편집 가능한 웹 페이지입니다.

并且在加上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>

로그인 후 복사