CKEditor를 사용하는 방법 및 제거하는 방법은?

Last Modified : 2017-09-21 / Created : 2017-03-22

11,536
View Count

주소 복사하기

CKEditor를 설정하는 방법과 제거하는 ~ 삭제하는 방법은 어떻게 될까요???

CKEditor는 정말 편리하고 좋은 에디터툴입니다! 개인적으로 아주 잘 사용하고 있습니다. 아래에는 아주 간단한 명령어를 알아보려고 합니다.

만약 textarea 태그가 있고 name 속성이 editor라면 아래와 같이 CKEditor로 사용 설정이 가능합니다.

<textarea name="editor"></textarea>

<script>
  CKEDITOR.replace('editor');  //  기본옵션으로 사용하는 경우
</script>

위와 같이 에디터를 실행할 경우 CKEDITOR에 인스턴스가 생성됩니다. 이 인스턴스를 컨트롤하여 내용을 가져올 수 있습니다.
위의 경우는 아래처럼 사용합니다.

CKEDITOR.instances.editor.getData();
// 에디터 내용 불러오기

CKEDITOR.instances.editor.document.getBody().getHtml();
// 에디터 내용 HTML로 불러오기

위 방법 중에서 아래의 html로 불러오는 방법은 플러그인 등을 설치하여 내부 스타일이 있는 경우 getData()로 불러올 수 없을때 유용합니다.

반대로 내용을 설정하는 것 역시 가능합니다.

CKEDITOR.instances.editor.setData('Webisfree Awesome !!');
// 에디터에 내용 입력하기

CKEDITOR는 config를 사용하여 옵션을 설정하지만 스크립트에서 설정하는 것도 가능합니다.

CKEDITOR.editorConfig = function(config) {
  config.removePlugins = 'Image';
  config.extraPlugins = 'inserthtml';
  config.toolbar = 'Basic';
}

혹시 다른 방법이 있다면 알려주세요 ~

아래의 글도 찾고 계시지 않나요?