[javascript] TinyMCE에서 텍스트 에디터에서 텍스트를 설정하는 방법은?
TinyMCE에서 텍스트 에디터에 텍스트를 설정하는 방법은 다음과 같습니다.
-
먼저, TinyMCE 라이브러리를 프로젝트에 추가합니다. 라이브러리를 다운로드하거나 CDN을 사용하여 추가할 수 있습니다.
-
HTML 파일에서
<textarea>
요소를 생성하고 텍스트 에디터에 연결합니다.<textarea>
요소에는id
속성을 지정하여 식별할 수 있도록 해야합니다.
<textarea id="editor"></textarea>
- 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 파일의 경로를 지정합니다.
- 이제 텍스트를 설정하려면 JavaScript로 에디터에 접근하여 텍스트를 설정하면 됩니다.
// 에디터 내용 설정
tinymce.get('editor').setContent('안녕하세요, TinyMCE에 오신 것을 환영합니다!');
// 에디터 내용 가져오기
var content = tinymce.get('editor').getContent();
console.log(content);
위의 코드에서 tinymce.get()
함수를 사용하여 특정 <textarea>
요소의 TinyMCE 에디터 인스턴스를 가져올 수 있습니다. setContent()
함수를 사용하여 에디터 내용을 설정하고, getContent()
함수를 사용하여 에디터 내용을 가져올 수 있습니다.
이제 TinyMCE를 사용하여 텍스트 에디터에서 텍스트를 설정하는 방법을 알게 되었습니다. 이를 통해 더욱 다양한 웹 애플리케이션을 개발할 수 있을 것입니다.