[javascript] TinyMCE에서 텍스트 서식을 적용하는 방법은?

24 Nov 2023

javascript

먼저, TinyMCE를 웹 페이지에 통합해야 합니다. 다음은 HTML에서 TinyMCE를 초기화하기 위해 필요한 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea id="myTextarea"></textarea>

  <script>
    tinymce.init({
      selector: '#myTextarea'
    });
  </script>
</body>
</html>

위의 코드에서 YOUR-API-KEY를 여러분의 TinyMCE API 키로 변경해야 합니다.

이제 TinyMCE를 초기화한 후에는 텍스트에 서식을 적용할 수 있습니다. 다음은 몇 가지 통계적 서식 예시입니다.

글꼴

<em>이 텍스트는 이탤릭체로 표시됩니다.</em>
<strong>이 텍스트는 굵은 글꼴로 표시됩니다.</strong>
<u>이 텍스트는 밑줄이 그어집니다.</u>

리스트

<ul>
  <li>리스트 항목 1</li>
  <li>리스트 항목 2</li>
  <li>리스트 항목 3</li>
</ul>

제목

<h1>첫 번째 글 제목</h1>
<h2>두 번째 글 제목</h2>
<h3>세 번째 글 제목</h3>

인용

<blockquote>이 텍스트는 인용문으로 표시됩니다.</blockquote>

위의 예시는 TinyMCE에서 간단한 텍스트 서식을 적용하는 방법을 보여줍니다. TinyMCE는 텍스트를 더욱 다양한 방법으로 서식을 적용할 수 있도록 다양한 기능을 제공합니다. 자세한 내용은 TinyMCE 공식 문서를 참조하십시오.