Quellcode durchsuchen

TinyMCE 표 열 너비 조절 UI 노출 및 ko_KR 표 메뉴 번역 수정

- 사용자 툴바에 table 버튼 추가, 표 컨텍스트 툴바에 셀 속성(tablecellprops) 추가
- object_resizing / table_resize_bars 명시 (기본값이지만 표 리사이즈와의 결합 관계를 드러냄)
- default 스킨의 content.min.css 에 누락된 리사이즈 바 CSS(col-resize/row-resize 커서)를
  content_style 로 주입 — 기존에는 경계선에 마우스를 올려도 커서가 바뀌지 않았음
- ko_KR: 행/열 라벨이 서로 뒤바뀐 오류, "셀 속" 잘림, "이전에 열 삽입" 오역 수정

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
KIM-JINO5 vor 1 Tag
Ursprung
Commit
039b99011e

+ 17 - 2
public/plugin/editor/tinymce/config.js

@@ -66,7 +66,7 @@ if(window.location.href.indexOf('admin') <= -1) // 사용자
     // autoresize라는 플러그인도 있음.
     menubar = false;
     plugins = 'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker searchreplace visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality emoticons template paste textcolor codesample';
-    toolbar = 'fontselect | fontStyle | fontsizeselect | bold underline strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify | link imageUpload media | code | codesample';
+    toolbar = 'fontselect | fontStyle | fontsizeselect | bold underline strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify | link imageUpload media table | code | codesample';
 
 } else { // 관리자
 
@@ -139,7 +139,14 @@ let setting = {
     // autoresize_bottom_margin: 0,
     // autoresize_on_init: true,
     content_style:
-        "body {font-family: Nanum-Square-Neo-Regular;}",
+        "body {font-family: Nanum-Square-Neo-Regular;}" +
+        // 표 열/행 경계 드래그 바. default 스킨의 content.min.css 에는 이 규칙이 빠져 있어(lightgray 에만 존재)
+        // 경계선에 마우스를 올려도 커서가 바뀌지 않아 드래그로 너비 조절이 가능한지 알 수 없다.
+        ".ephox-snooker-resizer-bar {background-color: #2276d2; opacity: 0; user-select: none;}" +
+        ".ephox-snooker-resizer-bar:hover {opacity: 0.35;}" +
+        ".ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {opacity: 0.2;}" +
+        ".ephox-snooker-resizer-cols {cursor: col-resize;}" +
+        ".ephox-snooker-resizer-rows {cursor: row-resize;}",
     font_formats: "Default='나눔스퀘어'" +
         ";나눔스퀘어=Nanum-Square-Neo-Regular, 나눔스퀘어" +
         ";돋움=dotum, 돋움" +
@@ -204,6 +211,14 @@ let setting = {
     relative_urls: true,
     remove_script_host: true,
 
+    // 표 설정
+    // 새 표는 table_default_styles 기본값(width:100%)으로 삽입되므로, 열 너비는 % 단위 인라인 style 로 기록된다.
+    object_resizing: true, // 표/이미지 크기 조절 핸들 (false 로 두면 표 열 너비 조절도 함께 꺼진다)
+    table_resize_bars: true, // 표 경계선 드래그로 열/행 크기 조절
+    table_toolbar: 'tableprops tablecellprops tabledelete' +
+        ' | tableinsertrowbefore tableinsertrowafter tabledeleterow' +
+        ' | tableinsertcolbefore tableinsertcolafter tabledeletecol', // 셀 속성(너비 직접 입력) 추가
+
     // 비디오 설정
     media_poster: false, // 포스터 파일
     media_alt_source: false, // 대체 소스

+ 4 - 4
public/plugin/editor/tinymce/langs/ko_KR.js

@@ -196,9 +196,9 @@ tinymce.addI18n('ko_KR',{
 "Table properties": "\ud14c\uc774\ube14 \uc18d\uc131",
 "Delete table": "\ud14c\uc774\ube14 \uc0ad\uc81c",
 "Cell": "\uc140",
-"Row": "\uc5f4",
-"Column": "\ud589",
-"Cell properties": "\uc140 \uc18d",
+"Row": "\ud589",
+"Column": "\uc5f4",
+"Cell properties": "\uc140 \uc18d\uc131",
 "Merge cells": "\uc140 \ud569\uce58\uae30",
 "Split cell": "\uc140 \ub098\ub204\uae30",
 "Insert row before": "\uc774\uc804\uc5d0 \ud589 \uc0bd\uc785",
@@ -209,7 +209,7 @@ tinymce.addI18n('ko_KR',{
 "Copy row": "\ud589 \ubcf5\uc0ac",
 "Paste row before": "\uc774\uc804\uc5d0 \ud589 \ubd99\uc5ec\ub123\uae30",
 "Paste row after": "\ub2e4\uc74c\uc5d0 \ud589 \ubd99\uc5ec\ub123\uae30",
-"Insert column before": "\uc774\uc804\uc5d0 \ud589 \uc0bd\uc785",
+"Insert column before": "\uc774\uc804\uc5d0 \uc5f4 \uc0bd\uc785",
 "Insert column after": "\ub2e4\uc74c\uc5d0 \uc5f4 \uc0bd\uc785",
 "Delete column": "\uc5f4 \uc9c0\uc6b0\uae30",
 "Cols": "\uc5f4",