Rich Text Editor를 만드려는데..

eouia · Post by **eouia** » 2006 01 11 16:29 06

다음 같은 코드가 제대로 안먹는군요.

<script type="text/javascript">
<!--//
//window.onload=init;
var WEdit = new EREdit();
function EREdit() {
	this.original = null;
	this.originalId = null;
	this.newId = null;
	this.parent = null;
	this.value = null;
	this.init = function(objId) {
		var obj = document.getElementById(objId);
		this.originalId = objId;
		this.original = obj;
		this.value = obj.innerHTML;
		this.parent = obj.parentNode;
		obj.style.visibility = "hidden";
		this.draw(objId);
	}
	this.draw = function(objId) {
		this.newId = "i_" + objId;
		oEl = document.createElement("iframe");
		oEl.height = '200px';
		oEl.width = '400px';
		this.parent.insertBefore(oEl, this.original);
		oEl.id = this.newId;
	}
}
function initRTE(objId) {
	WEdit.init(objId);
	document.getElementById('_' + objId).contentWindow.document.designMode='on';
	document.getElementById('i_' + objId).contentWindow.document.designMode='on';
}
//-->
</script>
<title>에디터 테스트</title>
</head>
<body onload="initRTE('editor')">
에디터 테스트
<form id="test">
	<textarea name="editor" id="editor">sample</textarea>
	<iframe name="_editor" id="_editor" />
</form>

목적은, textarea인 "editor"를 "i_editor"라는 iframe으로 바꿔치기한 후, designMode를 on하려고 합니다만... 안되는군요.
아래쪽의 "_editor" iframe은 잘 됩니다. (IE와 FF에서.. Opeara는 designMode가 아예 불가인가요?)

처음에는 window.onload=init;을 통해 자동 초기화하려 했으나 안됨을 알고, body onload이벤트를 이용했습니다.(http://mozilla.org/editor/ie2midas.html)
이 경우에 이미 HTML 코드안에 들어있는 iframe("_editor")는 designMode 적용이 잘 됩니다만, DOM으로 생성된 iframe("i_editor")는 designMode 적용이 안되는데 뭐가 잘못된 것인지 봐주시면 감사하겠습니다.

eouia · Post by **eouia** » 2006 01 12 10:21 52

다음과 같은 코드로 성공했습니다.

Code: Select all

<script type="text/javascript">
<!--//

var RTE = new EREdit();
window.onload = init;

function EREdit() {
	this.mode = null;
	this.oTextarea = null;
	this.oIframe = null;
	this.oToolbar = null;
	this.btn = new Array();
	...
	
	this.init = function(objId) {
		obj = document.getElementById(objId);
		this.oTextarea = obj;
		this.oTextarea.style.display = "none";
	
		this.oIframe = document.createElement("iframe");
		this.oIframe.className = "wysiwyg_content";
                ...
	
		obj.parentNode.insertBefore(this.oIframe, obj);
		
		var contentWindow = this.oIframe.contentWindow;
		var contentDocument = contentWindow.document;
	
		try { 
			contentDocument.designMode = "on"; 
		}	catch(e) { 
			alert('error'); 
		}
	
		
		contentDocument.open("text/html", "replace");
		contentDocument.write(this.oTextarea.innerHTML);
		contentDocument.close();
		
		//툴바 생성
		this.oToolbar = document.createElement("div");
		this.oToolbar.className = "wysiwyg_toolbar";
		this.oIframe.parentNode.insertBefore(this.oToolbar, this.oIframe);
		
		this.btn[0] = document.createElement("div");
		this.btn[0].className = "wysiwyg_btn";
		img = document.createElement("img");
		img.src="";
		img.alt="hello";
		img.title="hello btn";
		img.value=0;
		img.onclick=function() {
			alert(img.value + 1); // 각 기능에 맞춥시다요.
		}
		
		this.btn[0].appendChild(img);
		this.oToolbar.appendChild(this.btn[0]);
	}
}


function init() {
	RTE.init('edit');
}
//-->
</script>
<title>에디터 테스트</title>
</head>
<body>
에디터 테스트
<form id="test">
	<textarea id="edit" name="edit">test</textarea>
</form>

음.. 솔직히, 왜 되었는지 모르겠습니다. ^^;;;; 어쨌든 "edit"이라는 textarea를 iframe designMode로 대체하는데 성공했네요.

신재선 · Post by **신재선** » 2006 09 26 19:16 14

스크립트로 새로 만드는 노드의 의 깊이가 깊어지면 ...

designMode 에 이유를 알 수 없는 에러가 발생하는 것 같더군요...

정말 오늘 하루 종일 이 것 때문에 머리 짜매고 했었는데..

결론은 그 노드의 깊이가 얼만큼 깊어지면 에러가 터지더군요.

TABLE 만들고 TR 만들고 그안에 TD 만들고 또 그안에 DIV 만들고
그안에 IFRAME 을 집어 넣었더니.. 오류가 발생하더군요.

물런 try catch 하면 해결은 되지만 그래도 찝찝해서..
깊이를 TABLE 만들고 TR 만들고 그안에 TD안에 넣었더니..
오류가 없더군요.

이건 버그인가...의심스러울 뿐입니다.

Mozilla 한국 커뮤니티

Rich Text Editor를 만드려는데..

Rich Text Editor를 만드려는데..

자답.

designMode 노드의 깊이가 깊어지면..

Who is online