[javascript] TinyMCE에서 텍스트 에디터에서 링크 기능을 추가하는 방법은?

24 Nov 2023

javascript

일반적으로 TinyMCE에서 텍스트 에디터에 링크 기능을 추가하는 것은 매우 간단합니다. 아래는 이를 구현하는 방법입니다.

먼저 TinyMCE를 초기화하는 코드를 작성해야 합니다. 이를 위해 HTML 파일에 TinyMCE 스크립트를 포함시키고, 텍스트 에디터 요소의 ID를 지정합니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tiny.cloud/1/my-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <textarea id="my-editor"></textarea>

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

위 코드에서 my-api-key 부분은 TinyMCE의 API 키로 대체되어야 합니다. 이를 위해 TinyMCE 웹 사이트에서 API 키를 발급 받아야 합니다.

링크 기능을 추가하기 위해서는 TinyMCE의 plugins 속성을 수정해야 합니다. "link" 플러그인을 추가하고, "insertlink" 버튼을 툴바에 추가합니다.

tinymce.init({
    selector: '#my-editor',
    plugins: ['link'],
    toolbar: 'undo redo | bold italic underline link',
    menubar: false
});

위 코드에서 "link" 플러그인을 추가하고, 툴바에 "link" 버튼을 추가하였습니다. 이제 텍스트 에디터에는 링크 기능이 추가되었습니다.

사용자는 텍스트를 선택한 후 툴바에 있는 링크 버튼을 클릭하고, 링크 대화 상자에서 링크 URL을 입력할 수 있습니다.

위와 같이 TinyMCE에서 텍스트 에디터에 링크 기능을 추가하는 방법은 매우 간단합니다. 위 코드를 참조하여 원하는 페이지에 링크 기능을 구현해 보세요.