CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법

Last Modified : 2017-08-11 / Created : 2017-04-24

10,458
View Count

주소 복사하기

CKEDITOR를 사용하여 AJAX로 불러온 데이터를 추가하는 방법입니다. 아래 방법이 유용한 이유는 CKEDITOR를 사용하여 다른 방법으로 텍스트를 추가할 경우 함께 추가된 img 및 태그 요소가 적용되지 않을 수 있습니다. 이 경우 아래 방법을 사용하면 모두 정상적으로 코드가 추가되게 됩니다. 그럼 아래 코드를 봐주세요.

# CKEDITOR 에디터 html 코드 적용하는 예제소스

// Insert Text into CKEDITOR
CKEDITOR.instances.blogEditor.setData();  //  에디터에 내용 초기화(비우기)
  setTimeout(function() {
    CKEDITOR.instances.blogEditor.document.getBody().setHtml(response.data.text);
    // html 코드를 정상적으로 에디터에 추가하기 위한 방법
  }, 200);
});

여기서 setTimeout()을 사용하여 200 ms를 주었는데 그 이유는 에디터를 초기화 하기 위한 setData()와 setHtml()의 코드 입력이 동시에 이루어져 정상적으로 반영되지 않기 때문입니다. 이 때문에 시간차를 주었습니다. 위 코드는 정상적으로 동작합니다.

만약 angularJS를 사용한 예제의 경우 아래와 같을 것 입니다.

$http({
    method: 'get',
    params: params,
    url: url
}).then(function(response) {
    self.detail = response.data;
    
    // Insert Text into CKEDITOR
    CKEDITOR.instances.blogEditor.setData();
    setTimeout(function() {
        CKEDITOR.instances.blogEditor.document.getBody().setHtml(response.data.text);
    }, 200);
});