[javascript] TinyMCE에서 사용자 정의 버튼을 추가하는 방법은?
먼저, TinyMCE 에디터에 사용자 정의 버튼을 추가하려면 플러그인을 작성해야 합니다. 아래의 예제 코드를 참고하여 작성해 보세요.
tinymce.PluginManager.add('customButton', function(editor, url) {
// 사용자 정의 버튼 클릭시 실행될 함수
function performCustomAction() {
// 사용자 정의 동작을 수행하는 코드 작성
}
// 사용자 정의 버튼을 에디터 툴바에 추가
editor.addButton('customButton', {
text: '사용자 정의 버튼',
icon: false,
onclick: performCustomAction
});
});
위의 코드에서 performCustomAction 함수는 사용자 정의 버튼을 클릭했을 때 실행될 동작을 정의합니다. 이 함수 내에 원하는 동작을 구현하면 됩니다.
그 다음, 작성한 플러그인을 TinyMCE 에디터에 로드하도록 설정해야 합니다. 아래의 예제 코드를 참고하여 설정해 보세요.
tinymce.init({
selector: '#myTextarea',
// 다른 설정들...
plugins: 'customButton', // 작성한 플러그인 이름
toolbar: 'customButton' // 작성한 플러그인 버튼을 툴바에 추가
});
위의 코드에서 #myTextarea는 TinyMCE 에디터를 사용할 <textarea>의 ID를 나타냅니다. 이 부분은 실제 사용하는 페이지에 맞게 수정해야 합니다.
이제 작성한 플러그인이 로드되고 사용자 정의 버튼이 툴바에 추가됩니다. 클릭 이벤트에 정의한 동작이 실행되도록 코드를 구현하면 됩니다.
더 자세한 내용은 TinyMCE 공식 문서를 참고하시기 바랍니다.