Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

ckeditor, javascript의 appendChild(child) 처럼 html 추가하기

ckeditor, 자바스크립트로 내용 집어넣기(전체 내용 바꾸기)에서 전체 내용을 바꾸지 않고 html을 추가하는 방법이 궁금하다고 썼는데, API만 뒤지다가 삽질한 것 같다. ckeditor를 다운로드하면 기본으로 제공하는 samples에 기본적으로 사용할 수 있는 API가 있었다. 코드는 아래와 같다.

function InsertHTML()
{
	// 원하는 에디터의 인스턴스를 가져온다.
	var oEditor = CKEDITOR.instances.editor1;
	var value = '넣고 싶은 텍스트';

	// Check the active editing mode.
	if ( oEditor.mode == 'wysiwyg' )
	{
		// Insert the desired HTML.
		oEditor.insertHtml( value );
	}
	else
		alert( '위지윅 모드여야 가능합니다!' );
}

생각보다 쉬웠다.

위 코드대로 하면 커서가 있는 곳에 value가 들어가게 된다.

value는 그냥 텍스트여도 되고, html이어도 된다.

html이면 html로 들어가고, text면 알아서 html처리를 한 다음 들어간다.

선택영역이 있으면 선택영역을 대체하면서 들어간다. 즉, 에디터에 내용을 채울 때 이게 핵심이다.

따라서 여러 가지로 테스트해 보기 바란다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

  • 가령 이전에 텍스트로만 쓴 게시물이 있습니다.
    이후에 ckeditor를 설치하고 그 글을 수정할 때, 본래 글을 가지고 올 수 있는 건가요?

    그냥 어째저째 ckeditor 설치하고, 이전 글 수정을 눌렀더니, 수정에서는 빈 textarea만 달랑 보여서 말이죠. ^^:;

    • 그건 프로그래밍 단에서 처리를 해 줘야 합니다. TEXTAREA 사이에 프로그래밍 코드를 넣어야 하는 거죠. 예컨대, PHP라면 이런 식으로 말입니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다