[javascript] TinyMCE에서 텍스트 에디터에서 텍스트를 설정하는 방법은?

TinyMCE에서 텍스트 에디터에 텍스트를 설정하는 방법은 다음과 같습니다.

  1. 먼저, TinyMCE 라이브러리를 프로젝트에 추가합니다. 라이브러리를 다운로드하거나 CDN을 사용하여 추가할 수 있습니다.

  2. HTML 파일에서 <textarea> 요소를 생성하고 텍스트 에디터에 연결합니다. <textarea> 요소에는 id 속성을 지정하여 식별할 수 있도록 해야합니다.

<textarea id="editor"></textarea>
  1. JavaScript 코드에서 tinymce.init() 함수를 사용하여 TinyMCE 에디터를 초기화하고 설정합니다. 이 코드는 <script> 태그 내에 작성해야합니다.
tinymce.init({
  selector: '#editor',
  height: 500,
  plugins: 'textcolor',
  toolbar: 'forecolor backcolor',
  content_css: 'path/to/custom.css'
});

위의 코드에서는 selector 속성에는 <textarea> 요소의 id를 지정하여 연결합니다. height 속성은 에디터의 높이를 지정하고, plugins 속성은 사용할 플러그인을 지정합니다. toolbar 속성은 에디터의 툴바에 표시할 기능을 지정합니다. content_css 속성은 에디터의 스타일을 커스터마이징하기 위한 CSS 파일의 경로를 지정합니다.

  1. 이제 텍스트를 설정하려면 JavaScript로 에디터에 접근하여 텍스트를 설정하면 됩니다.
// 에디터 내용 설정
tinymce.get('editor').setContent('안녕하세요, TinyMCE에 오신 것을 환영합니다!');

// 에디터 내용 가져오기
var content = tinymce.get('editor').getContent();
console.log(content);

위의 코드에서 tinymce.get() 함수를 사용하여 특정 <textarea> 요소의 TinyMCE 에디터 인스턴스를 가져올 수 있습니다. setContent() 함수를 사용하여 에디터 내용을 설정하고, getContent() 함수를 사용하여 에디터 내용을 가져올 수 있습니다.

이제 TinyMCE를 사용하여 텍스트 에디터에서 텍스트를 설정하는 방법을 알게 되었습니다. 이를 통해 더욱 다양한 웹 애플리케이션을 개발할 수 있을 것입니다.