insertAdjacentHTML()

돔구조에 노드를 추가할 경우 document.createElement() 를 이용하여 노드를 만들고 appendChild()를 이용하여 노드를 추가한다.
간단한 구조라면 별로 문제가 없지만, 노드 안에 또 노드가 들어가고 그 안에 또 노드가 들어가는 중첩구조라고 하면 위와 같은 방법으로는 상당히 골치가 아파진다.
이때는 insertAdjacentHTML() 를 이용해보자.

insertAdjacentHTML() 는 하나의 태그를 만들어 그안에 새로운 노드를 끼워넣는것이 아니라 이미 만들어진 태그덩어리를 단번에 넣을 수 있다.
예를 들어보자.

var text = '< textarea id="context" rows="600" cols="8" style="border:1px solid pink;">굿잡!!< /textarea>';
insertAdjacentHTML('beforeBegin', text);

text 와 같은 변수를 노드에 추가한다면 createElement 와 appendChild로는 상당히 복잡할 것이다.
Gecko 엔진을 사용하는 파이어폭스 같은 경우에는 조금 다르다.
document.createRange();
setStartBerore();
createContextualFragment(); 함수를 이용한다.

function insertHTML(html, element) {
  if( element.insertAdjacentHTML ){
        element.insertAdjacentHTML( 'beforeBegin', html ) ;
    }
    else
    {
        var oRange = document.createRange() ;
        oRange.setStartBefore( element ) ;
        var oFragment = oRange.createContextualFragment( html );
        element.parentNode.insertBefore( oFragment, element ) ;
    }
}

이와 비슷한 함수로 innserHTML 있다. 하지만 다른점은 innetHTML 의 경우 노드가 추가되는 위치가 항상 자식노드라면,
위의함수들은 위치를 별도로 지정할 수도 있다.

 

 

---

역인글(0) 댓글(0)

리눅스에서 시간 동기화하기

[유용한 정보] 2009/10/05 09:34

 # rdate -s time.bora.net

 

---

역인글(0) 댓글(0)

다음에디터 적용

[홈페이지] 2009/10/02 03:59

 그 동안 사용했던 Fckeditor를 버리고 이번에 다음에서 공개한 daumeditor로 에디터를 변경하였습니다.

fckeditor는 불필요한 기능들이 많았는데, daumeditor는 좀 깔끔하네요.

fckeditor는 asp,php,jsp 등에 맞게 여러가지 버전이 있었는데, 요기는 javascript를 이용하여 언어에 독립적으로 구성되어 있습니다. 이부분이 좋은 것 같아요.

설치시 튜토리얼이 아직 많지 않아서 애를 좀 먹었습니다.

그래도 인상적인 부분이 있다면,

첫째, 에디터에 글을 작성 후 submit을 하면 그 값이 서버로 그대로 전송되는 것이 아니라, callback 함수로 자체 검수를 한 후 동적으로 textarea 폼을 만들어 그 폼안에 작성한 내용을 입력 후 서버에 전송을 합니다.

그래서 스프링 적용시 폼 태그 안에 있어야할 textarea가 없었기 때문에, 별도로 의미없는 textarea를 스타일 display:none 을 준 후 validate 부분에 적절한 값이 오면 조금전에 만들었던 textarea 에 값을 넣어 전송하는 다소 번거로운 작업을 해야 했습니다.

둘째, 폼 태그 안에 직접적으로 사용할 수 있는 textrea가 없기 때문에 글을 수정시에는 '콘텐츠로드' 라는 함수를 두어 임의의 공간에 본문내용을 입력하게 한 후 이 값을 다시 에디터의 보문에 넣게 하였습니다.

번거로운 듯 하면서도 왠지 무언가에 독립적이다라는 느낌을 받았습니다.

이번에 설치한 버전은 구글에 공개한 두번째 버전인 5.1.0 을 설치했는데, 설치하자만 몇가지 버그가 보이더군요.

우선 글을 입력후 submit을 했는데 글을 등록하라는 메세지가 나왔습니다.

확인해보니, 글을 작성하고 저장하면 위의 메세지가 나오고, 글을 입력하지 않고 저장을 하면 위의 메세지가 나오지 않았습니다. 반대로 되어 있더군요.

그리고 이모티콘을 입력하는 부분이 있었는데, 이미지 경로를 설정하는 부분이 있기는 했지만, 상대경로로 적어주면 이미지가 나오지 않고, 절대경로로 적어주어야 이미지가 잘 나왔습니다. 뭐 중요한 것은 아니죠.

처음에는 naver의 스마트에디터를 사용하려 했으나, 사진 및 첨부파일 입력에 대한 부분이 미진한 점과 버그패치가 빨리 이루어 지지 않는 것 같았습니다. 다음에디터도 얼마나 빨리 버그가 개선이 될지는 모르지만, 당분간은 이 에디터를 계속 쓰게 될 것 같습니다.