TinyMCE의 fullscreen 플러그인은 전체 화면 모드를 제공하지만, 기본적으로 브라우저의 전체 화면 API를 활용해서 동작하기 때문에 width나 left 값을 직접 변경하는 것은 쉽지 않습니다.
🔹 FullscreenStateChanged 이벤트
해결 방법
1. Fullscreen 모드 활성화 시 클래스 변경 감지
• TinyMCE가 전체 화면 모드로 변경될 때 tox-fullscreen 클래스가 <body>에 추가됨.
• 이 이벤트를 감지해서 width, left 값을 조절하면 됨.
2. fullscreen 이벤트 핸들러 추가
• FullscreenStateChanged 이벤트를 활용하여 스타일을 변경 가능.
📌 구현 코드
tinymce.init({
selector: "#editor",
plugins: "fullscreen",
toolbar: "fullscreen",
setup: function (editor) {
editor.on("FullscreenStateChanged", function (e) {
if (e.state) {
// fullscreen이 활성화될 때
setTimeout(() => {
let fullscreenElement = document.querySelector(".tox-fullscreen");
if (fullscreenElement) {
fullscreenElement.style.width = "80%"; // 너비 조정
fullscreenElement.style.left = "10%"; // 왼쪽 위치 조정
}
}, 100); // 스타일 적용 지연 (UI 변경 후 반영되도록)
}
});
}
});
🔹 MutationObserver를 사용한 해결 방법
MutationObserver는 DOM의 변화를 감지할 수 있는 API로, fullscreen 버튼을 눌러 tox-fullscreen 클래스가 추가될 때 실행됩니다.
✅ 구현 코드
tinymce.init({
selector: "#editor",
plugins: "fullscreen",
toolbar: "fullscreen",
setup: function (editor) {
const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
if (mutation.type === "attributes" && mutation.attributeName === "class") {
const body = document.body;
if (body.classList.contains("tox-fullscreen")) {
// Fullscreen 활성화 시 실행
setTimeout(() => {
let fullscreenElement = document.querySelector(".tox-fullscreen");
if (fullscreenElement) {
fullscreenElement.style.width = "80%"; // 원하는 너비
fullscreenElement.style.left = "10%"; // 원하는 위치
}
}, 100);
}
}
});
});
// <body> 태그의 class 변화를 감지
observer.observe(document.body, { attributes: true });
// 에디터 종료 시 Observer 해제
editor.on("remove", function () {
observer.disconnect();
});
}
});
🔹 설명
• MutationObserver를 사용하여 <body> 태그의 class 변화를 감지
• tox-fullscreen 클래스가 추가되면 width와 left 값을 변경
• setTimeout(100ms)을 준 이유는 스타일 변경이 적용될 시간을 확보하기 위함
• editor.on("remove")에서 observer.disconnect()를 호출하여 메모리 누수를 방지
✅ 강제 스타일 변경 방식
방법: fullscreen 버튼 클릭 이벤트를 감지한 후 일정 시간 후에 .tox.tox-tinymce-aux 요소의 스타일을 변경합니다.
tinymce.init({
selector: "#editor",
plugins: "fullscreen",
toolbar: "fullscreen",
setup: function (editor) {
editor.on("init", function () {
console.log("TinyMCE 초기화 완료");
});
editor.ui.registry.addButton("customFullscreen", {
text: "Fullscreen",
onAction: function () {
editor.execCommand("mceFullScreen"); // 기본 fullscreen 토글
setTimeout(() => {
let fullscreenContainer = document.querySelector(".tox.tox-tinymce-aux");
if (fullscreenContainer) {
fullscreenContainer.style.width = "80vw"; // 너비 조정
fullscreenContainer.style.left = "10vw"; // 위치 조정
}
}, 300); // Fullscreen 적용 후 스타일 반영
}
});
}
});
🔹 설명
• editor.ui.registry.addButton("customFullscreen", { ... })
👉 커스텀 fullscreen 버튼을 만들어, 버튼 클릭 시 직접 fullscreen 모드를 실행
• editor.execCommand("mceFullScreen")
👉 TinyMCE의 fullscreen 명령어를 직접 실행
• setTimeout(() => {...}, 300)
👉 fullscreen 창이 렌더링될 시간이 필요하므로 300ms 딜레이
• .tox.tox-tinymce-aux
👉 fullscreen 창의 컨테이너 요소이며, 이 요소의 width와 left 값을 변경
✅ 기본 fullscreen 버튼을 그대로 사용하고 싶다면?
만약 기본 fullscreen 버튼을 그대로 사용하고 싶다면, setInterval()을 사용하여 특정 시간이 지나면 스타일을 변경하는 방식도 가능합니다.
tinymce.init({
selector: "#editor",
plugins: "fullscreen",
toolbar: "fullscreen",
setup: function (editor) {
let interval;
editor.on("FullscreenStateChanged", function (e) {
if (e.state) {
// Fullscreen 활성화 시 반복 감지 시작
interval = setInterval(() => {
let fullscreenContainer = document.querySelector(".tox.tox-tinymce-aux");
if (fullscreenContainer) {
fullscreenContainer.style.width = "80vw";
fullscreenContainer.style.left = "10vw";
clearInterval(interval); // 한 번 적용되면 감지 중지
}
}, 100);
}
});
// 에디터가 종료될 때 interval 해제
editor.on("remove", function () {
clearInterval(interval);
});
}
});
📌 핵심 포인트
1. editor.execCommand("mceFullScreen")를 활용하여 fullscreen 모드를 직접 실행
2. .tox.tox-tinymce-aux 클래스를 가진 요소의 width와 left를 변경
3. setTimeout() 또는 setInterval()을 사용하여 fullscreen UI가 완전히 로드된 후 스타일 적용
4. 기본 fullscreen 버튼을 쓰려면 FullscreenStateChanged 이벤트 대신 setInterval()로 감지
'Develop' 카테고리의 다른 글
| 리눅스 서버 시간 확인하는 다양한 방법 (1) | 2025.02.14 |
|---|---|
| Open Graph(OG) 프로토콜이란? 사용방법까지 총정리 (0) | 2025.02.13 |
| [PostgreSQL] 다중 컬럼 IN 쿼리 사용 방법 (0) | 2025.02.12 |
| [JavaScript] 변수 선언문 완벽 정리: var, let, const 차이점과 주의점 (0) | 2025.02.12 |
| [HTML] iframe 사용법 및 내부/외부 접근 예제 (1) | 2025.02.10 |