')[_0x5b1422(0x143)]({'width':_0x26925f,'height':_0x25f362,'border':_0x5b1422(0x1ce),'opacity':0.5,'position':_0x5b1422(0x1f5),'zIndex':0x270f,'pointerEvents':'none'})[_0x5b1422(0x1b8)](_0x5b1422(0x2ac)),_0x3dd5a5=$(_0x5b1422(0x1d9))[_0x5b1422(0x143)]({'display':'inline-block','width':_0x5b1422(0x22f),'height':_0x5b1422(0x1ff),'backgroundColor':_0x5b1422(0x25b)});function _0xd62c(_0x266933,_0xcd4e76){const _0x4cfd9d=_0x5b1422;if(document[_0x4cfd9d(0x1bf)])return document[_0x4cfd9d(0x1bf)](_0x266933,_0xcd4e76);else{if(document[_0x4cfd9d(0x288)]){const _0x41ccd4=document[_0x4cfd9d(0x288)](_0x266933,_0xcd4e76);if(_0x41ccd4){const _0x4a9951=document[_0x4cfd9d(0x185)]();return _0x4a9951['setStart'](_0x41ccd4[_0x4cfd9d(0x275)],_0x41ccd4[_0x4cfd9d(0x1b0)]),_0x4a9951['collapse'](!![]),_0x4a9951;}}}return null;}function _0x1ff6d9(_0x2c46e9){const _0x45353f=_0x5b1422,_0x5a1eed=_0x2c46e9[_0x45353f(0xbb)],_0x4bec7c=_0x2c46e9[_0x45353f(0x151)],_0x56d6cc=_0x2c46e9[_0x45353f(0x28c)],_0xb4ef4b=_0x2c46e9[_0x45353f(0x246)];let _0x53d7ac=_0x56d6cc-_0x35a557[_0x45353f(0x293)],_0x59df44=_0xb4ef4b-_0x35a557[_0x45353f(0x17a)];const _0x352904=_0xb4ef4b>=_0x23756b['top']&&_0xb4ef4b<=_0x23756b[_0x45353f(0x17a)]+_0x2fbf99,_0x2aa9ce=$(document[_0x45353f(0x25c)](_0x5a1eed,_0x4bec7c))[_0x45353f(0x223)]('pre')['length']>0x0;if(_0x56d6cc<_0x35a557['left']||_0x56d6cc>_0x35a557[_0x45353f(0x293)]+_0x299d7d||_0xb4ef4b<_0x35a557[_0x45353f(0x17a)]||_0xb4ef4b>_0x35a557['top']+_0x1c0bdc||_0x352904||_0x2aa9ce){$(_0x45353f(0x18c))[_0x45353f(0x146)](),_0x1eb899[_0x45353f(0xeb)]();return;}else _0x1eb899[_0x45353f(0xba)]();_0x1eb899[_0x45353f(0x143)]({'top':_0x59df44+_0x35a557['top']-0xf,'left':_0x53d7ac+_0x35a557[_0x45353f(0x293)]-0xf}),$('.cursor-placeholder')[_0x45353f(0x146)]();const _0x20bb73=_0xd62c(_0x5a1eed,_0x4bec7c);_0x20bb73&&_0x20bb73[_0x45353f(0x287)](_0x3dd5a5[0x0]);}function _0xf74151(_0x281a41){const _0x251169=_0x5b1422,_0x5c3175=_0x281a41['pageY']>=_0x23756b[_0x251169(0x17a)]&&_0x281a41[_0x251169(0x246)]<=_0x23756b[_0x251169(0x17a)]+_0x2fbf99,_0x137639=$(document[_0x251169(0x25c)](_0x281a41['clientX'],_0x281a41[_0x251169(0x151)]))['closest'](_0x251169(0x265))[_0x251169(0xcd)]>0x0;if(_0x281a41['pageX']<_0x35a557['left']||_0x281a41['pageX']>_0x35a557[_0x251169(0x293)]+_0x299d7d||_0x281a41['pageY']<_0x35a557[_0x251169(0x17a)]||_0x281a41[_0x251169(0x246)]>_0x35a557[_0x251169(0x17a)]+_0x1c0bdc||_0x5c3175||_0x137639){_0x3e2f17['after'](_0x53aea7),$('.resizable-placeholder,\x20.cursor-placeholder')[_0x251169(0x146)](),$(document)[_0x251169(0x2a7)](_0x251169(0x217),_0x1ff6d9),$(document)[_0x251169(0x2a7)](_0x251169(0x18b),_0xf74151);return;}const _0xbe7394=$(document[_0x251169(0x25c)](_0x281a41[_0x251169(0xbb)],_0x281a41[_0x251169(0x151)]));_0xbe7394['length']?_0x3dd5a5[_0x251169(0x21f)](_0x53aea7):_0x3e2f17[_0x251169(0x163)](_0x53aea7),(_0x53aea7[_0x251169(0xe6)]('resizable-table')||_0x53aea7['find'](_0x251169(0x1fd))[_0x251169(0xcd)]>0x0)&&enableResizableTable(_0x53aea7),(_0x53aea7['hasClass'](_0x251169(0x104))||_0x53aea7[_0x251169(0x1a6)](_0x251169(0xd7))[_0x251169(0xcd)]>0x0)&&_0x53aea7[_0x251169(0x1a6)]('td,\x20th')[_0x251169(0x2a7)](_0x251169(0x19f))['on'](_0x251169(0x19f),function(_0x5d8615){const _0x1e7a09=_0x251169;_0x5d8615[_0x1e7a09(0xb1)]();const _0x17eff8=this;setTimeout(()=>{const _0x5eb2ef=_0x1e7a09,_0x5b50d8=document['createRange']();_0x5b50d8[_0x5eb2ef(0x230)](_0x17eff8),_0x5b50d8[_0x5eb2ef(0x257)](![]);const _0x19d4c1=window[_0x5eb2ef(0xd1)]();_0x19d4c1['removeAllRanges'](),_0x19d4c1[_0x5eb2ef(0x1be)](_0x5b50d8),_0x17eff8['focus']();},0x0);}),(_0x53aea7[_0x251169(0xe6)](_0x251169(0x220))||_0x53aea7['find'](_0x251169(0x1fd))[_0x251169(0xcd)]>0x0)&&_0x53aea7[_0x251169(0x1a6)](_0x251169(0x113))['attr']('contenteditable',_0x251169(0x170))[_0x251169(0x143)](_0x251169(0x16c),_0x251169(0x102))[_0x251169(0x2a7)](_0x251169(0x2a9))['on'](_0x251169(0x2a9),function(_0x3b1c5a){_0x3b1c5a['stopPropagation']();}),$('.resizable-placeholder,\x20.cursor-placeholder')['remove'](),_0x3e2f17['remove'](),$(document)[_0x251169(0x2a7)]('pointermove',_0x1ff6d9),$(document)[_0x251169(0x2a7)](_0x251169(0x18b),_0xf74151);}$(document)['on']('pointermove',_0x1ff6d9),$(document)['on'](_0x5b1422(0x18b),_0xf74151);}$(document)['on'](_0x3bc690(0x2b3),function(_0x59c35f){const _0x392627=_0x3bc690;!$(_0x59c35f[_0x392627(0xaf)])[_0x392627(0x223)]('.resizable,\x20.resizable-table')[_0x392627(0xcd)]&&$(_0x392627(0xbc))[_0x392627(0x146)]();}),document['addEventListener'](_0x3bc690(0x136),()=>{handleSelectionChange();}),document[_0x3bc690(0x266)](_0x3bc690(0x24b),()=>{setTimeout(handleSelectionChange,0x64);});function handleSelectionChange(){const _0x17889b=_0x3bc690,_0x24352c=window[_0x17889b(0xd1)]();_0x24352c[_0x17889b(0x16d)]>0x0&&!_0x24352c[_0x17889b(0x2a5)]&&updateMiniToolbar();}
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/js/image.js b/plugin/editor/rb.editor/js/image.js
new file mode 100644
index 000000000..ae79a2e41
--- /dev/null
+++ b/plugin/editor/rb.editor/js/image.js
@@ -0,0 +1,894 @@
+/* ========== 전역 변수 및 기본 설정 ========== */
+// 이미지별 효과 상태를 관리하는 Map
+const imageEffectsMap = new Map();
+
+let selectedImage = null;
+let savedToolbarPosition = null;
+
+// 초기 효과 상태
+const defaultEffects = {
+ brightness: 100,
+ contrast: 100,
+ saturation: 100,
+ blur: 0,
+ grayscale: 0,
+ invert: 0,
+ opacity: 100,
+ sepia: 0,
+ shadowX: 0,
+ shadowY: 0,
+ shadowBlur: 0,
+ shadowColor: 'rgba(0,0,0,0)',
+ radius: 0,
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,1)'
+};
+
+/* ========== 유틸리티 함수 ========== */
+/**
+ * 슬라이더 ID에서 효과 키를 추출하는 함수
+ * ex) brightness-slider → brightness
+ */
+function getEffectKeyFromSliderId(sliderId) {
+ return sliderId.replace('-slider', '').replace(/-(.)/g, (_, char) => char.toUpperCase());
+}
+
+/* ========== 이미지 효과 적용 함수 ========== */
+/**
+ * 선택된 이미지에 현재 설정된 효과들을 적용하는 함수
+ */
+function applyImageEffects() {
+ if (!selectedImage) return;
+
+ const effects = imageEffectsMap.get(selectedImage[0]);
+ const filter = `
+ brightness(${effects.brightness}%)
+ contrast(${effects.contrast}%)
+ saturate(${effects.saturation}%)
+ grayscale(${effects.grayscale}%)
+ invert(${effects.invert}%)
+ opacity(${effects.opacity}%)
+ sepia(${effects.sepia}%)
+ blur(${effects.blur}px)
+ drop-shadow(${effects.shadowX}px ${effects.shadowY}px ${effects.shadowBlur}px ${effects.shadowColor})
+ `;
+
+ selectedImage.css({
+ filter: filter.trim(),
+ 'border-radius': `${effects.radius}px`,
+ 'border-width': effects.borderWidth + 'px',
+ 'border-style': 'solid',
+ 'border-color': effects.borderColor
+ });
+}
+
+function extractEffectsFromInlineStyle($img) {
+ const effects = { ...defaultEffects };
+ const styleAttr = $img.attr('style'); // ✅ 인라인 스타일 직접 가져오기
+
+ if (styleAttr && styleAttr.includes('filter')) {
+ const filterMatch = styleAttr.match(/filter:\s*([^;]+)/);
+ if (filterMatch) {
+ const filter = filterMatch[1];
+
+ effects.brightness = getFilterValue(filter, 'brightness', '%', 100);
+ effects.contrast = getFilterValue(filter, 'contrast', '%', 100);
+ effects.saturation = getFilterValue(filter, 'saturate', '%', 100);
+ effects.grayscale = getFilterValue(filter, 'grayscale', '%', 0);
+ effects.invert = getFilterValue(filter, 'invert', '%', 0);
+ effects.opacity = getFilterValue(filter, 'opacity', '%', 100);
+ effects.sepia = getFilterValue(filter, 'sepia', '%', 0);
+ effects.blur = getFilterValue(filter, 'blur', 'px', 0);
+
+ // ✅ drop-shadow() 값 추출
+ const dropShadowMatch = filter.match(/drop-shadow\(rgba?\((.*?)\)\s+([\d.]+)px\s+([\d.]+)px\s+([\d.]+)px\)/);
+ if (dropShadowMatch) {
+ effects.shadowColor = `rgba(${dropShadowMatch[1]})`;
+ effects.shadowX = parseFloat(dropShadowMatch[2]);
+ effects.shadowY = parseFloat(dropShadowMatch[3]);
+ effects.shadowBlur = parseFloat(dropShadowMatch[4]);
+ }
+ }
+ }
+
+ // ✅ border 관련 속성도 인라인 스타일에서 가져오기
+ effects.radius = getInlineStyleValue($img, 'border-radius', 'px', 0);
+ effects.borderWidth = getInlineStyleValue($img, 'border-width', 'px', 0);
+ effects.borderColor = getInlineBorderColor($img) || 'rgba(0,0,0,1)';
+
+ return effects;
+}
+
+function getFilterValue(filterStr, property, unit, defaultValue) {
+ const match = filterStr.match(new RegExp(`${property}\\(([-\\d.]+)${unit}\\)`));
+ return match ? parseFloat(match[1]) : defaultValue;
+}
+
+function getInlineStyleValue($img, property, unit, defaultValue) {
+ const style = $img.attr('style');
+ if (!style) return defaultValue;
+ const match = style.match(new RegExp(`${property}:\\s*([-\\d.]+)${unit}`));
+ return match ? parseFloat(match[1]) : defaultValue;
+}
+
+function getInlineBorderColor($img) {
+ const style = $img.attr('style');
+ if (!style) return null;
+ const match = style.match(/border-color:\s*(rgb[a]?\([^)]*\))/);
+ return match ? match[1] : null;
+}
+
+
+/* ========== 이벤트 핸들러 등록 ========== */
+
+// 이미지 슬라이더 변화에 따른 효과 업데이트
+$('.image-slider-ui').on('input', function () {
+ if (!selectedImage) return;
+
+ // 현재 선택된 이미지의 효과 상태 가져오기
+ const effects = imageEffectsMap.get(selectedImage[0]);
+ const effectKey = getEffectKeyFromSliderId($(this).attr('id'));
+
+ // 효과 상태 업데이트
+ effects[effectKey] = $(this).val();
+ applyImageEffects(); // 이미지에 효과 적용
+});
+
+// 드롭섀도우 색상 변경 이벤트 핸들러
+$('#shadow-color-slider').on('input', function () {
+ if (!selectedImage) return;
+
+ const transparency = $(this).val(); // 0~100 사이의 값
+ const effects = imageEffectsMap.get(selectedImage[0]);
+ if (!effects) return;
+
+ // alpha 값을 슬라이더 값에 비례하게 계산하여 그림자 컬러 업데이트
+ effects.shadowColor = `rgba(0, 0, 0, ${transparency / 100})`;
+
+ applyImageEffects(); // 변경된 효과를 이미지에 적용
+});
+
+// 테두리 색상 변경 이벤트 핸들러
+$('#border-color-slider').on('input', function () {
+ if (!selectedImage) return;
+
+ const transparency = $(this).val(); // 0~100 사이의 값
+ const effects = imageEffectsMap.get(selectedImage[0]);
+ if (!effects) return;
+
+ // alpha 값을 투명도로 계산하여 borderColor 업데이트
+ effects.borderColor = `rgba(0, 0, 0, ${transparency / 100})`;
+
+ applyImageEffects(); // 변경된 효과를 이미지에 적용
+});
+
+// 효과 초기화 버튼 클릭 이벤트 핸들러
+$('#reset-effects-btn').click(function () {
+ if (!selectedImage) return;
+
+ // 선택된 이미지의 효과 상태를 기본값으로 초기화
+ const effects = imageEffectsMap.get(selectedImage[0]);
+ Object.assign(effects, defaultEffects);
+
+ // 슬라이더와 효과 상태 동기화
+ syncSlidersWithEffects(effects);
+ applyImageEffects();
+});
+
+/* ========== 이미지 선택 및 툴바 관련 함수 ========== */
+/**
+ * 이미지를 선택했을 때 호출되는 함수
+ * 선택된 이미지에 대한 효과 상태를 불러오고, 슬라이더 UI와 동기화합니다.
+ */
+function selectImage(image) {
+ selectedImage = image;
+
+ let effects = imageEffectsMap.get(image[0]);
+ if (!effects) {
+ effects = extractEffectsFromInlineStyle(image);
+ imageEffectsMap.set(image[0], effects);
+ }
+
+ syncSlidersWithEffects(effects);
+}
+
+function syncSlidersWithEffects(effects) {
+ $('#brightness-slider').val(effects.brightness);
+ $('#contrast-slider').val(effects.contrast);
+ $('#saturation-slider').val(effects.saturation);
+ $('#blur-slider').val(effects.blur);
+ $('#grayscale-slider').val(effects.grayscale);
+ $('#invert-slider').val(effects.invert);
+ $('#opacity-slider').val(effects.opacity);
+ $('#sepia-slider').val(effects.sepia);
+ $('#shadow-x-slider').val(effects.shadowX);
+ $('#shadow-y-slider').val(effects.shadowY);
+ $('#shadow-blur-slider').val(effects.shadowBlur);
+ $('#radius-slider').val(effects.radius);
+ $('#border-width-slider').val(effects.borderWidth);
+
+ // ✅ shadowColor (rgba -> alpha 값만 슬라이더에 적용)
+ if (effects.shadowColor) {
+ const shadowMatch = effects.shadowColor.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
+ if (shadowMatch) {
+ $('#shadow-color-slider').val(parseFloat(shadowMatch[1]) * 100); // 0~1 -> 0~100 변환
+ }
+ }
+
+ // ✅ borderColor (rgba -> alpha 값만 슬라이더에 적용)
+ if (effects.borderColor) {
+ const borderMatch = effects.borderColor.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
+ if (borderMatch) {
+ $('#border-color-slider').val(parseFloat(borderMatch[1]) * 100); // 0~1 -> 0~100 변환
+ }
+ }
+}
+
+
+/**
+ * 슬라이더 조정 시 이미지 툴바를 계속 표시하는 함수
+ */
+function keepImageToolbarVisible() {
+ if (selectedImage) {
+ $('#image-toolbar').fadeIn(0); // 슬라이더 조정 시 툴바 표시 유지
+ }
+}
+
+
+$('#editor').on('mousedown', '.resizable', function (e) {
+ // 크기 조절 핸들이 아닌 영역에서 커서 방지
+ const isHandle = $(e.target).hasClass('resize-handle');
+ if (!isHandle) {
+ e.preventDefault(); // 기본 동작 방지
+ }
+
+ // `.resize-handle`이 없는 경우 추가
+ if ($(this).children('.resize-handle').length === 0) {
+ $(this).append('');
+ // 새로 추가된 핸들에 대해 커스텀 리사이징 이벤트를 다시 바인딩
+ makeImageResizableWithObserver($(this));
+ }
+});
+
+$(document).on('mousedown touchstart', '.resizable img', function(e) {
+ // 터치 이벤트의 경우, 두 손가락 이상이면 panning 동작 실행하지 않음
+ if (e.type === 'touchstart' && e.touches.length > 1) {
+ return;
+ }
+
+ // 리사이즈 핸들 내부에서 발생한 이벤트는 무시하여 충돌 방지
+ if ($(e.target).closest('.resize-handle').length > 0) {
+ return;
+ }
+
+ e.preventDefault();
+
+ var $img = $(this);
+ // 부모 영역에 꽉 차도록 설정 (빈 공간 방지)
+ $img.css({
+ 'width': '100%'
+ });
+
+ // 시작 좌표 (마우스/터치 구분)
+ var startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
+ var startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
+
+ // .resizable (부모) 크기
+ var $parent = $img.closest('.resizable');
+ var containerWidth = $parent.width();
+ var containerHeight = $parent.height();
+
+ // 이전 드래그에서 저장된 object-position이 있다면 사용, 없으면 기본값 50% 50%
+ var storedPos = $img.data('initialObjPos');
+ var initialObjPos = storedPos ? storedPos : window.getComputedStyle($img[0]).objectPosition;
+ var initialX = 50, initialY = 50;
+ if (initialObjPos && initialObjPos.split(' ').length === 2) {
+ var parts = initialObjPos.split(' ');
+ var parsedX = parseFloat(parts[0]);
+ var parsedY = parseFloat(parts[1]);
+ initialX = isNaN(parsedX) ? 50 : parsedX;
+ initialY = isNaN(parsedY) ? 50 : parsedY;
+ }
+
+ // 이미지 자연 크기
+ var naturalWidth = $img[0].naturalWidth;
+ var naturalHeight = $img[0].naturalHeight;
+
+ // object-fit: cover 적용 시, 실제 렌더링되는 이미지 크기 계산
+ var scale = Math.max(containerWidth / naturalWidth, containerHeight / naturalHeight);
+ var displayedWidth = naturalWidth * scale;
+ var displayedHeight = naturalHeight * scale;
+
+ // 컨테이너 대비 이미지의 여분 (panning 가능한 범위)
+ var extraWidth = displayedWidth - containerWidth;
+ var extraHeight = displayedHeight - containerHeight;
+
+ var dragData = { startX, startY, initialX, initialY, extraWidth, extraHeight };
+
+ function onMove(e) {
+ var moveX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
+ var moveY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
+ var dx = moveX - dragData.startX;
+ var dy = moveY - dragData.startY;
+
+ var newX = dragData.initialX;
+ var newY = dragData.initialY;
+ if (dragData.extraWidth > 0) {
+ newX = dragData.initialX - (dx * 100 / dragData.extraWidth);
+ }
+ if (dragData.extraHeight > 0) {
+ newY = dragData.initialY - (dy * 100 / dragData.extraHeight);
+ }
+
+ newX = Math.max(0, Math.min(100, newX));
+ newY = Math.max(0, Math.min(100, newY));
+
+ $img.css('object-position', newX + '% ' + newY + '%');
+ }
+
+ function onEnd(e) {
+ $(document).off('mousemove touchmove', onMove);
+ $(document).off('mouseup touchend', onEnd);
+ // 드래그 종료 시 최종 object-position 값을 저장하여 다음 드래그의 초기값으로 사용
+ var finalObjPos = $img.css('object-position');
+ $img.data('initialObjPos', finalObjPos);
+ }
+
+ $(document).on('mousemove touchmove', onMove);
+ $(document).on('mouseup touchend', onEnd);
+});
+
+
+
+
+$('#editor').on('click', '.resizable', function (e) {
+ e.stopPropagation();
+
+ // 이전 선택된 이미지 해제
+ $('.resizable').removeClass('selected');
+ $(this).addClass('selected');
+
+ // 선택된 이미지로 효과 동기화
+ selectImage($(this).find('img'));
+ showImageToolbar($(this)); // 툴바 표시
+
+ // ▼ 추가: 이미지 링크 정보 확인 후 입력창에 반영
+ const $img = $(this).find('img');
+ const $anchor = $img.parent('a'); // 부모가 인지 검사
+ if ($anchor.length) {
+ // 링크가 있으면 href, target 정보를 UI에 반영
+ const hrefVal = $anchor.attr('href') || '';
+ const targetVal = $anchor.attr('target') || '_parent';
+
+ $('#rb-image-link-inp').text(hrefVal);
+ $('#rb-image-link-blanks').prop('checked', targetVal === '_blank');
+ } else {
+ // 링크가 없으면 입력창 초기화
+ $('#rb-image-link-inp').text('');
+ $('#rb-image-link-blanks').prop('checked', false);
+ }
+
+ document.activeElement.blur();
+
+});
+
+$('#mini-image-link-del-btn').on('click', function () {
+ // 선택된 .resizable 내부의 img
+ const $selectedImg = $('.resizable.selected img');
+ if (!$selectedImg.length) {
+ alert('이미지를 선택하세요.');
+ return;
+ }
+
+ $selectedImg.each(function () {
+ let $img = $(this);
+ let $parent = $img.parent();
+ if ($parent.is('a')) {
+ // 태그 제거, ![]()
만 남김
+ $parent.replaceWith($img);
+ }
+ });
+
+ // 입력창 초기화
+ $('#rb-image-link-inp').text('');
+ $('#rb-image-link-blanks').prop('checked', false);
+});
+
+$('#image-toolbar').on('click', function (e) {
+ e.stopPropagation(); // 이벤트 전파 방지
+});
+
+// #image-toolbar 드래그(마우스 & 터치)로 이동 가능하게 하기
+$('#image-toolbar #move_handle').on('mousedown touchstart', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ var $handle = $(this);
+ var $toolbar = $handle.closest('#image-toolbar');
+ var $container = $('#editor-container');
+ var containerOffset = $container.offset();
+
+ // 드래그 시작 시의 좌표 (마우스/터치 구분)
+ var startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
+ var startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;
+
+ // 현재 툴바의 상대적 위치 (컨테이너 기준)
+ var toolbarOffset = $toolbar.offset();
+ var initialLeft = toolbarOffset.left - containerOffset.left;
+ var initialTop = toolbarOffset.top - containerOffset.top;
+
+ function onMove(e) {
+ var moveX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
+ var moveY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;
+ var dx = moveX - startX;
+ var dy = moveY - startY;
+
+ // 새 위치 (컨테이너 기준)
+ var newLeft = initialLeft + dx;
+ var newTop = initialTop + dy;
+
+ // 경계 체크 (컨테이너 내에 머물도록)
+ var containerWidth = $container.width();
+ var containerHeight = $container.height();
+ var toolbarWidth = $toolbar.outerWidth();
+ var toolbarHeight = $toolbar.outerHeight();
+
+ newLeft = Math.max(0, Math.min(newLeft, containerWidth - toolbarWidth));
+ newTop = Math.max(0, Math.min(newTop, containerHeight - toolbarHeight));
+
+ $toolbar.css({
+ left: newLeft + 'px',
+ top: newTop + 'px'
+ });
+
+ // 이동한 위치 저장 (컨테이너 기준)
+ savedToolbarPosition = { left: newLeft, top: newTop };
+ }
+
+ function onEnd(e) {
+ $(document).off('mousemove touchmove', onMove);
+ $(document).off('mouseup touchend', onEnd);
+ }
+
+ $(document).on('mousemove touchmove', onMove);
+ $(document).on('mouseup touchend', onEnd);
+});
+
+
+/* 3. 이미지 리사이징 기능 (커스텀) */
+function makeImageResizableWithObserver($resizable) {
+ makeImageResizable($resizable);
+ observeResizable($resizable);
+}
+
+
+function makeImageResizable($resizable) {
+ $resizable.removeData('resizable');
+ $resizable.data('resizable', true);
+ $resizable.css('position', 'relative');
+
+ let $handle = $resizable.find('.resize-handle');
+ if ($handle.length === 0) {
+ $handle = $('');
+ $resizable.append($handle);
+ } else {
+ $handle.off('mousedown touchstart');
+ }
+
+ function startResize(e, isTouch) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const $content = $resizable.find('img, iframe'); // ✅ 이미지 또는 iframe
+ if ($content.length === 0) return; // ✅ 콘텐츠 없으면 종료
+
+ let startWidth = $resizable.width();
+ let startHeight = $resizable.height();
+
+ // ✅ 콘텐츠 크기 가져오기 (이미지: naturalWidth, iframe: getBoundingClientRect)
+ let originalWidth = $content.is('img') ? $content[0].naturalWidth : $content[0].getBoundingClientRect().width;
+ let originalHeight = $content.is('img') ? $content[0].naturalHeight : $content[0].getBoundingClientRect().height;
+ let originalRatio = originalHeight / originalWidth;
+
+ let startX = 0, startY = 0;
+ let initialPinchDistance = null;
+ let shiftKeyPressed = e.shiftKey;
+
+ if (isTouch && e.touches.length >= 2) {
+ initialPinchDistance = getPinchDistance(e);
+ } else {
+ startX = isTouch ? e.touches[0].clientX : e.clientX;
+ startY = isTouch ? e.touches[0].clientY : e.clientY;
+ }
+
+ // ✅ `.url-preview-video` 내부일 경우 iframe 포인터 비활성화
+ if ($resizable.closest('.url-preview-video').length > 0) {
+ $resizable.closest('.url-preview-video').find('iframe').css('pointer-events', 'none');
+ }
+
+ function doResize(e) {
+ e.preventDefault();
+
+ let newWidth = startWidth;
+ let newHeight = startHeight;
+ shiftKeyPressed = e.shiftKey;
+
+ if (isTouch && e.touches.length >= 2) {
+ let currentPinchDistance = getPinchDistance(e);
+ if (initialPinchDistance && currentPinchDistance) {
+ let scaleFactor = currentPinchDistance / initialPinchDistance;
+ newWidth = startWidth * scaleFactor;
+ newHeight = shiftKeyPressed ? newWidth * originalRatio : startHeight * scaleFactor;
+ }
+ if ($content.is('img')) {
+ $content.css('object-fit', ''); // ✅ 이미지 비율 유지
+ }
+ } else {
+ const moveX = isTouch ? e.touches[0].clientX : e.clientX;
+ const moveY = isTouch ? e.touches[0].clientY : e.clientY;
+ const dx = moveX - startX;
+ const dy = moveY - startY;
+
+ if (shiftKeyPressed || $resizable.closest('.url-preview-video').length > 0) {
+ // ✅ Shift 키가 눌렸거나 `.url-preview-video` 내부일 경우 원본 비율 유지
+ newWidth = startWidth + dx;
+ newHeight = newWidth * originalRatio;
+ if ($content.is('img')) {
+ $content.css('object-fit', ''); // ✅ 이미지 비율 유지
+ }
+ } else {
+ // ✅ 자유 크기 조절 모드 (iframe 포함)
+ newWidth = startWidth + dx;
+ newHeight = startHeight + dy;
+ if ($content.is('img')) {
+ $content.css('object-fit', 'cover'); // ✅ 비율 유지 없음
+ }
+ }
+ }
+
+ if (newWidth > 20 && newHeight > 20) {
+ $resizable.css({
+ width: newWidth + 'px',
+ height: newHeight + 'px'
+ });
+
+ // ✅ Shift 키, 투핑거 터치, `.url-preview-video` 내부에서는 원본 비율 유지
+ if (shiftKeyPressed || (isTouch && e.touches.length >= 2) || $resizable.closest('.url-preview-video').length > 0) {
+ newHeight = newWidth * originalRatio;
+ $resizable.css({ height: newHeight + 'px' });
+ }
+ }
+ }
+
+ function stopResize() {
+ document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', doResize);
+ document.removeEventListener(isTouch ? 'touchend' : 'mouseup', stopResize);
+
+ let finalWidth = $resizable.width();
+ let finalHeight = $resizable.height();
+
+ // ✅ 최종 크기 저장
+ $resizable.attr('data-original-width', finalWidth);
+ $resizable.attr('data-original-height', finalHeight);
+ $resizable.attr('data-ratio', finalHeight / finalWidth);
+
+ // ✅ `.url-preview-video` 내부일 경우 iframe 포인터 이벤트 복구
+ if ($resizable.closest('.url-preview-video').length > 0) {
+ $resizable.closest('.url-preview-video').find('iframe').css('pointer-events', '');
+ }
+ }
+
+ document.addEventListener(isTouch ? 'touchmove' : 'mousemove', doResize, { passive: false });
+ document.addEventListener(isTouch ? 'touchend' : 'mouseup', stopResize, { passive: false });
+ }
+
+ const handleEl = $handle[0];
+ handleEl.addEventListener('mousedown', function(e) {
+ startResize(e, false);
+ }, { passive: false });
+ handleEl.addEventListener('touchstart', function(e) {
+ startResize(e, true);
+ }, { passive: false });
+
+ $resizable.on('touchstart', function(e) {
+ if (e.touches.length >= 2 && $(e.target).closest('.resize-handle').length === 0) {
+ startResize(e, true);
+ }
+ });
+}
+
+
+
+// 헬퍼: 두 손가락 사이 거리를 계산하는 함수
+function getPinchDistance(e) {
+ if (e.touches.length >= 2) {
+ var dx = e.touches[0].clientX - e.touches[1].clientX;
+ var dy = e.touches[0].clientY - e.touches[1].clientY;
+ return Math.sqrt(dx * dx + dy * dy);
+ }
+ return null;
+}
+
+
+
+
+/* 4. MutationObserver를 사용하여 'resizable' div의 클래스 변경 감지 */
+const observer = new MutationObserver(function (mutationsList) {
+ mutationsList.forEach(mutation => {
+ if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+ const $target = $(mutation.target);
+ if ($target.hasClass('selected')) {
+ showImageToolbar($target);
+ } else {
+ $('#image-toolbar').fadeOut(0);
+ selectedImage = null;
+ }
+ }
+ });
+});
+
+// 모든 'resizable' div에 대해 MutationObserver 설정
+function observeResizable($resizable) {
+ observer.observe($resizable[0], { attributes: true });
+}
+
+function showImageToolbar($resizable) {
+ selectedImage = $resizable.find('img');
+
+ // 저장된 위치가 있으면 그대로 사용
+ if (savedToolbarPosition) {
+ $('#image-toolbar').css({
+ top: savedToolbarPosition.top + 'px',
+ left: savedToolbarPosition.left + 'px',
+ }).fadeIn(0);
+ } else {
+ // 기존 로직에 따른 위치 계산
+ const imgOffset = $resizable.offset();
+ const containerOffset = $('body').offset();
+ const toolbarHeight = $('#image-toolbar').outerHeight();
+ const toolbarWidth = $('#image-toolbar').outerWidth();
+ const containerWidth = $('#editor-container').width();
+ const containerHeight = $('#editor-container').height();
+
+ let toolbarTop = imgOffset.top - containerOffset.top + 15;
+ let toolbarLeft = selectedImage.width() + 50;
+ if (toolbarTop + toolbarHeight > containerHeight) {
+ toolbarTop = imgOffset.top - containerOffset.top - toolbarHeight;
+ }
+ if (toolbarLeft + toolbarWidth > containerWidth) {
+ toolbarLeft = containerWidth - toolbarWidth;
+ }
+ if (toolbarLeft < 0) {
+ toolbarLeft = 10;
+ }
+ if (toolbarTop < 0) {
+ toolbarTop = 10;
+ }
+
+ $('#image-toolbar').css({
+ top: toolbarTop + 'px',
+ left: toolbarLeft + 'px',
+ }).fadeIn(0);
+ }
+}
+
+$('#radius-slider').on('input', function () {
+ if ($('.resizable.selected').length) {
+ const radiusValue = $(this).val();
+ $('.resizable.selected img').css('border-radius', radiusValue + 'px');
+ }
+});
+
+$('#remove-image-btn').click(function () {
+ if (!selectedImage) return;
+
+ if (currentMode === 'regular') {
+ const $img = $(selectedImage);
+
+ // 1) 가장 먼저 .resizable_wrap, .resizable를 찾고
+ let $target = $img.closest('.resizable_wrap, .resizable');
+
+ // 2) 없다면 태그가 있는지 확인
+ if (!$target.length) {
+ $target = $img.closest('a');
+ }
+
+ // 3) 그래도 없으면 자기 자신(img)만 제거
+ if ($target.length) {
+ $target.remove();
+ } else {
+ $img.remove();
+ }
+ }
+ else if (currentMode === 'canvas') {
+ fabricCanvas.remove(selectedImage);
+ }
+
+ $('#image-toolbar').fadeOut(0);
+ selectedImage = null;
+});
+
+
+/*
+$('#remove-server-image-btn').click(function () {
+ if (!selectedImage) return;
+
+ let imageUrl = selectedImage.attr('src');
+
+ // 삭제 확인 메시지
+ if (!confirm("서버에서 이미지를 완전히 삭제합니다. 삭제된 이미지는 복구되지 않으며, 이미지를 감싸는 영역도 함께 제거됩니다.\n\n이미지를 서버에서 완전히 삭제 하시겠습니까?")) {
+ return;
+ }
+
+ var g5_editor_url = "/plugin/editor/rb.editor"; // 올바른 경로 설정
+
+ // 서버에서 파일 삭제 요청
+ $.ajax({
+ url: g5_editor_url + "/php/rb.delete.php", // 삭제 처리 파일
+ type: "POST",
+ data: { file: imageUrl }, // 파일 URL 전송
+ dataType: "json",
+ success: function (response) {
+ console.log("서버 응답 (파일 삭제):", response);
+
+ if (response.success) {
+ // ✅ 서버에서 파일 삭제 성공 시 `.resizable` 삭제
+ selectedImage.parent('.resizable').remove();
+
+ // 툴바 숨김 및 선택 이미지 초기화
+ $('#image-toolbar').fadeOut(0);
+ selectedImage = null;
+ } else {
+ alert("이미지 삭제 실패: " + (response.error || "알 수 없는 오류"));
+ }
+ },
+ error: function (xhr, status, error) {
+ console.error("파일 삭제 오류:", error);
+ alert("파일 삭제 중 오류가 발생했습니다.");
+ }
+ });
+});
+*/
+
+$(document).click(function (e) {
+ if (!$(e.target).closest('#image-toolbar').length && !$(e.target).closest('.resizable').length) {
+ $('#image-toolbar').fadeOut(0);
+ selectedImage = null;
+ }
+});
+
+
+// 커서를 박스 외부로 강제 이동하는 함수
+function moveCursorOutsideResizable(range) {
+ const resizable = $(range.startContainer).closest('.resizable');
+
+ if (resizable.length) {
+ // 박스 바로 뒤로 커서를 이동
+ const parentNode = resizable[0].parentNode;
+ const resizableIndex = Array.from(parentNode.childNodes).indexOf(resizable[0]);
+
+ // 새로운 Range 설정
+ const newRange = document.createRange();
+ const selection = window.getSelection();
+
+ if (parentNode.childNodes[resizableIndex + 1]) {
+ // 박스 뒤로 이동
+ newRange.setStart(parentNode.childNodes[resizableIndex + 1], 0);
+ } else {
+ // 박스가 마지막 노드라면 부모의 끝으로 이동
+ newRange.setStartAfter(resizable[0]);
+ }
+ newRange.collapse(true);
+
+ // 선택된 Range 업데이트
+ selection.removeAllRanges();
+ selection.addRange(newRange);
+ }
+}
+
+function wrapImagesWithResizable() {
+ $('#editor img').not('.url-preview img').each(function () {
+ var $img = $(this);
+ var $resizable, $resizableWrap;
+
+ // 이미 `.resizable_wrap`으로 감싸져 있는지 확인
+ if ($img.closest('.resizable_wrap').length) {
+ $resizableWrap = $img.closest('.resizable_wrap');
+ $resizable = $resizableWrap.find('.resizable');
+ } else {
+ // ✅ `.resizable_wrap` 생성
+ $resizableWrap = $('');
+
+ // ✅ `.resizable` 생성
+ $resizable = $('');
+
+ // ✅ `.resizable` 기본 스타일 적용
+ $resizable.css({
+ position: 'relative',
+ userSelect: 'none',
+ caretColor: 'transparent',
+ pointerEvents: 'auto'
+ });
+
+ // ✅ 크기 조절 핸들 추가
+ var $resizeHandle = $('');
+ $resizable.append($img.clone()).append($resizeHandle);
+
+ // ✅ 구조 변경: `.resizable_wrap` → `.resizable` → `![]()
`
+ $resizableWrap.append($resizable);
+ $img.replaceWith($resizableWrap);
+
+ // ✅ 크기 조절 기능 활성화
+ makeImageResizableWithObserver($resizable);
+ }
+
+ // ✅ 현재 `.resizable`의 크기 저장
+ var currentWidth = $resizable.width();
+ var currentHeight = $resizable.height();
+ $resizable.attr('data-original-width', currentWidth);
+ $resizable.attr('data-original-height', currentHeight);
+ });
+}
+
+
+
+$(document).ready(function () {
+
+ /* 완전삭제를 사용하는 경우 함수교체
+ function initResizableElements() {
+ $('.resizable').each(function () {
+ var $this = $(this);
+ var $img = $this.find('img');
+
+ // 이미지가 없거나, 이미지가 로드되지 않으면 .resizable 제거
+ if ($img.length === 0) {
+ console.warn("이미지 없음 - .resizable 삭제", $this);
+ $this.remove();
+ return;
+ }
+
+ // 이미지가 존재하는지 확인 (비동기 방식)
+ checkImageExists($img.attr('src'), function(exists) {
+ if (!exists) {
+ console.warn("이미지 로드 실패 - .resizable 삭제", $this);
+ $this.remove();
+ }
+ });
+
+ observeResizable($this);
+ makeImageResizableWithObserver($this);
+ });
+ }
+
+ // ✅ 이미지 존재 여부 확인 함수 (fetch 사용)
+ function checkImageExists(imageUrl, callback) {
+ fetch(imageUrl, { method: 'HEAD' })
+ .then(response => callback(response.ok))
+ .catch(() => callback(false));
+ }
+ */
+
+ function initResizableElements() {
+ $('.resizable').each(function () {
+ var $this = $(this);
+ observeResizable($this);
+ makeImageResizableWithObserver($this);
+ });
+ }
+
+
+
+ // 최초 실행 (초기 로드된 .resizable 요소 감지)
+ initResizableElements();
+ wrapImagesWithResizable();
+
+ // MutationObserver 설정 (동적 감지)
+ const observer = new MutationObserver(() => {
+ initResizableElements();
+ wrapImagesWithResizable();
+ });
+
+ // #editor 내부에서 변경 사항 감지
+ observer.observe(document.getElementById('editor'), { childList: true, subtree: true });
+});
+
diff --git a/plugin/editor/rb.editor/js/metadata.js b/plugin/editor/rb.editor/js/metadata.js
new file mode 100644
index 000000000..7c55f4a18
--- /dev/null
+++ b/plugin/editor/rb.editor/js/metadata.js
@@ -0,0 +1,219 @@
+
+ var urlRegex = /(https?:\/\/[^\s]+)/g;
+ var imageRegex = /\.(jpeg|jpg|gif|png|webp|svg)$/i;
+ var pendingRequests = {};
+
+ function extractVideoId(url) {
+ let videoId = null;
+ let timeParam = '';
+
+ if (url.includes('youtube.com') || url.includes('youtu.be')) {
+ let match = url.match(/(?:v=|youtu\.be\/|embed\/|shorts\/)([\w-]+)/);
+ videoId = match ? match[1] : null;
+ let timeMatch = url.match(/[?&]t=(\d+)/);
+ timeParam = timeMatch ? `?start=${timeMatch[1]}` : '';
+ return videoId ? `https://www.youtube.com/embed/${videoId}${timeParam}` : null;
+ }
+
+ if (url.includes('vimeo.com')) {
+ let match = url.match(/vimeo\.com\/(\d+)/);
+ videoId = match ? match[1] : null;
+ return videoId ? `https://player.vimeo.com/video/${videoId}` : null;
+ }
+
+ return null;
+ }
+
+ function fetchMetadataAndDisplay(url, range) {
+ // 내부에서 실행되지 않도록 차단
+ if ($(range.commonAncestorContainer).closest('pre').length > 0) {
+ console.warn("🚫 내부에서는 미디어 또는 메타데이터를 삽입할 수 없습니다.");
+ return;
+ }
+
+ let embedUrl = extractVideoId(url);
+
+ if ($(range.commonAncestorContainer).closest('table, td, th').length) {
+ return;
+ }
+
+ if (embedUrl) {
+ displayVideoPreview(url, embedUrl, range);
+ return;
+ }
+
+ $.ajax({
+ url: g5Config.g5_editor_url + '/php/rb.metadata.php',
+ method: 'GET',
+ data: { url: url },
+ dataType: 'json',
+ success: function (response) {
+ if (response.error) {
+ return;
+ }
+
+ var meta = response.meta;
+ var title = response.title || '제목 없음';
+ var description = meta['description'] || meta['og:description'] || '';
+ var image = meta['og:image'] || '';
+
+ var wrapper = $(''); // 메타데이터 감싸는 div
+ var html = $('');
+
+ var imageWrapper = $(''); // 이미지 감싸는 요소
+ var metaData = $('');
+
+ function validateImageUrl(imageUrl, callback) {
+ var img = new Image();
+ img.src = imageUrl;
+ img.onload = function () {
+ callback(true); // 이미지 로드 성공
+ };
+ img.onerror = function () {
+ callback(false); // 이미지 로드 실패
+ };
+ }
+
+ if (image) {
+ var imageProxyUrl = g5Config.g5_editor_url + '/php/rb.image_proxy.php?url=' + encodeURIComponent(image);
+ var imageElement = $('
');
+
+ validateImageUrl(imageProxyUrl, function (isValid) {
+ if (isValid) {
+ imageWrapper.append(imageElement);
+ html.append(imageWrapper);
+ } else {
+ imageWrapper.remove(); // 엑박 방지: 이미지가 없으면 제거
+ metaData.css("padding-left", "0"); // 자동으로 padding-left 제거
+ }
+ });
+
+ imageElement.on('error', function () {
+ imageWrapper.remove(); // 이미지가 깨지면 자동 제거
+ metaData.css("padding-left", "0"); // padding-left: 0 적용
+ });
+ } else {
+ metaData.css("padding-left", "0"); // 이미지가 없으면 자동 적용
+ }
+
+ metaData.append('' + title + '
');
+ metaData.append('' + description + '
');
+ metaData.append('' + url + '');
+
+ html.append(metaData);
+ wrapper.append(html);
+
+ insertMediaAfterUrl(wrapper, range);
+ }
+ });
+ }
+
+ function displayVideoPreview(url, embedUrl, range) {
+ // 내부에서는 동영상 미리보기를 삽입하지 않도록 제한
+ if ($(range.commonAncestorContainer).closest('pre').length > 0) {
+ //console.warn(" 내부에서는 동영상 미리보기를 삽입할 수 없습니다.");
+ return;
+ }
+
+ if ($(range.commonAncestorContainer).closest('table, td, th').length) {
+ return;
+ }
+
+ var wrapper = $(''); // ✅ 동영상 감싸는 div
+ var html = $('');
+ html.append('');
+
+ wrapper.append(html); // 감싸는 div 추가
+ insertMediaAfterUrl(wrapper, range);
+ }
+
+
+ function insertMediaAfterUrl(node, range) {
+ range.collapse(false);
+ range.insertNode(node[0]);
+ range.collapse(false);
+
+ var selection = window.getSelection();
+ selection.removeAllRanges();
+ var newRange = document.createRange();
+ newRange.setStartAfter(node[0]);
+ newRange.collapse(true);
+ selection.addRange(newRange);
+
+ // 미디어 노드 내의 .resizable 요소에 대해 현재 크기를 data 속성으로 업데이트
+ node.find('.resizable').each(function(){
+ var $this = $(this);
+ var currentWidth = $this.width();
+ var currentHeight = $this.height();
+ $this.attr('data-original-width', currentWidth);
+ $this.attr('data-original-height', currentHeight);
+ // 필요시 data-ratio도 갱신 (세로/가로)
+ $this.attr('data-ratio', currentHeight / currentWidth);
+ });
+ }
+
+
+
+ function insertImageDirectly(url, range) {
+ if ($(range.commonAncestorContainer).closest('table, td, th').length) {
+ return;
+ }
+
+ var wrapper = $(''); // ✅ 이미지 감싸는 div
+ var html = $('');
+ var img = $('
');
+
+ img.on('load', function () {
+ // ✅ 이미지 원본 크기 저장
+ var imgWidth = this.naturalWidth;
+ var imgHeight = this.naturalHeight;
+ var ratio = imgHeight / imgWidth;
+
+ const editorWidth = $('#editor').width(); // 에디터의 가로 크기
+
+ // ✅ 에디터보다 크면 width: 100%, 작으면 원본 크기 유지
+ if (imgWidth > editorWidth) {
+ html.css('width', '100%');
+ } else {
+ html.css('width', imgWidth + 'px');
+ }
+
+ // ✅ 원본 크기 저장 (비율 유지용)
+ html.attr('data-original-width', imgWidth);
+ html.attr('data-original-height', imgHeight);
+ html.attr('data-ratio', ratio);
+
+ // ✅ 높이 설정 (현재 width에 따라 비율 유지)
+ html.css('height', (html.width() * ratio) + 'px');
+
+ // ✅ 창 크기 변경 시 높이 자동 조정
+ function updateHeight() {
+ var currentWidth = html.width();
+ var originalWidth = parseFloat(html.attr('data-original-width')) || currentWidth;
+ var originalHeight = parseFloat(html.attr('data-original-height')) || (currentWidth * ratio);
+ var originalRatio = parseFloat(html.attr('data-ratio')) || (originalHeight / originalWidth);
+
+ html.css('height', (currentWidth * originalRatio) + 'px');
+ }
+ $(window).on('resize', updateHeight);
+
+ // ✅ 크기 조절 기능 적용 (비율 유지)
+ makeImageResizableWithObserver(html);
+ });
+
+ html.append(img);
+ html.append('');
+
+ wrapper.append(html);
+ insertMediaAfterUrl(wrapper, range);
+ }
+
+
+ $('#editor').on('click', '.delete-preview', function (e) {
+ e.preventDefault();
+ e.stopPropagation(); // 부모로의 이벤트 버블링 방지
+ $(this).closest('.url-preview-img, .url-preview-meta, .url-preview-video').remove();
+ $('#image-toolbar').fadeOut(0);
+ selectedImage = null;
+ });
+
diff --git a/plugin/editor/rb.editor/js/preview.js b/plugin/editor/rb.editor/js/preview.js
new file mode 100644
index 000000000..a1e7301fe
--- /dev/null
+++ b/plugin/editor/rb.editor/js/preview.js
@@ -0,0 +1,82 @@
+$(document).ready(function () {
+ // 프리뷰 버튼 클릭 이벤트
+ $('#preview-btn').click(function () {
+ const editorContent = $('#editor').html();
+
+ // #editor의 인라인 스타일 가져오기
+ const editorInlineStyle = document.getElementById('editor').getAttribute('style') || '';
+
+ // #editor의 현재 너비 가져오기
+ let editorWidth = $('#editor-container').width() ||
+ document.getElementById('editor-container').getBoundingClientRect().width;
+
+ // 최소 너비 제한
+ const minWidth = 400;
+ const popupWidth = Math.max(editorWidth, minWidth);
+
+ // 현재 적용된 폰트 CSS 파일 가져오기
+ let fontHref = $('#font-stylesheet').attr('href') || '';
+
+ // 팝업창 열기
+ const popupWindow = window.open('', 'previewWindow', `width=${popupWidth},height=600,resizable=yes`);
+
+ // 팝업에 HTML 작성 (jQuery 포함 및 adjustOutputResizable 스크립트 추가)
+ popupWindow.document.write(`
+
+
+
+
+ 미리보기
+
+ ${fontHref ? `` : ''}
+
+
+
+
+
+ ${editorContent}
+
+
+
+
+ `);
+
+ popupWindow.document.close();
+
+ // 팝업 크기 조정
+ popupWindow.resizeTo(popupWidth + 20, 620);
+ });
+});
diff --git a/plugin/editor/rb.editor/js/save.js b/plugin/editor/rb.editor/js/save.js
new file mode 100644
index 000000000..8f3f78a39
--- /dev/null
+++ b/plugin/editor/rb.editor/js/save.js
@@ -0,0 +1,348 @@
+function removeElementsTemporarily(selectors, callback) {
+ const elements = document.querySelectorAll(selectors);
+ const originalStyles = [];
+
+ elements.forEach(el => {
+ originalStyles.push(el.style.display);
+ el.style.display = "none";
+ });
+
+ return callback().finally(() => {
+ elements.forEach((el, index) => {
+ el.style.display = originalStyles[index];
+ });
+ });
+}
+
+function addMarginToCanvas(canvas, marginSize = 50) {
+ const newCanvas = document.createElement("canvas");
+ const ctx = newCanvas.getContext("2d");
+
+ newCanvas.width = canvas.width + marginSize * 2;
+ newCanvas.height = canvas.height + marginSize * 2;
+
+ ctx.fillStyle = "white";
+ ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
+ ctx.drawImage(canvas, marginSize, marginSize);
+
+ return newCanvas;
+}
+
+function captureEditor() {
+ return new Promise((resolve, reject) => {
+ const editor = document.getElementById("editor");
+
+ if (!editor) {
+ console.error("Error: `#editor` 요소를 찾을 수 없음");
+ return reject("Missing `#editor` element");
+ }
+
+ const resizableElements = document.querySelectorAll(".resizable");
+
+ // `.selected` 클래스 제거
+ resizableElements.forEach(resizable => resizable.classList.remove("selected"));
+
+ return html2canvas(editor, {
+ useCORS: true,
+ scale: window.devicePixelRatio * 3,
+ allowTaint: true,
+ backgroundColor: null
+ }).then(editorCanvas => {
+ // `.resizable`이 하나도 없으면 `#editor`만 저장
+ if (resizableElements.length === 0) {
+ resolve(editorCanvas);
+ return;
+ }
+
+ // `.resizable`이 있을 경우 개별적으로 필터 적용
+ const newCanvas = document.createElement("canvas");
+ const ctx = newCanvas.getContext("2d");
+
+ newCanvas.width = editorCanvas.width;
+ newCanvas.height = editorCanvas.height;
+
+ ctx.fillStyle = "white";
+ ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
+ ctx.drawImage(editorCanvas, 0, 0);
+
+ const imagePromises = [];
+
+ resizableElements.forEach(resizable => {
+ const img = resizable.querySelector("img");
+ if (!img) return;
+
+ const imgObj = new Image();
+ imgObj.crossOrigin = "anonymous";
+ imgObj.src = img.src;
+
+ const imgStyle = getComputedStyle(img);
+ const resizableRect = resizable.getBoundingClientRect();
+ const editorRect = editor.getBoundingClientRect();
+
+ const imgLeft = resizableRect.left - editorRect.left;
+ const imgTop = resizableRect.top - editorRect.top;
+ const resizableWidth = resizable.offsetWidth;
+ const resizableHeight = resizable.offsetHeight;
+
+ const borderRadius = parseFloat(imgStyle.borderRadius) * 3;
+ const borderWidth = parseFloat(imgStyle.borderWidth) * 3;
+ const borderColor = imgStyle.borderColor;
+
+ const boxShadow = imgStyle.boxShadow.match(/(-?\d+px)/g);
+ const shadowOffsetX = boxShadow ? parseFloat(boxShadow[0]) * 3 : 0;
+ const shadowOffsetY = boxShadow ? parseFloat(boxShadow[1]) * 3 : 0;
+ const shadowBlur = boxShadow ? parseFloat(boxShadow[2]) * 3 : 0;
+ const shadowColor = imgStyle.boxShadow.match(/rgba?\([\d,.\s]+\)/);
+
+ const promise = new Promise((imgResolve) => {
+ imgObj.onload = function () {
+ ctx.save();
+
+ if (shadowColor) {
+ ctx.shadowColor = shadowColor[0];
+ ctx.shadowBlur = shadowBlur;
+ ctx.shadowOffsetX = shadowOffsetX;
+ ctx.shadowOffsetY = shadowOffsetY;
+ }
+
+ ctx.filter = imgStyle.filter;
+ ctx.globalAlpha = imgStyle.opacity;
+
+ const imgRatio = imgObj.width / imgObj.height;
+ const canvasRatio = resizableWidth / resizableHeight;
+ let sx, sy, sWidth, sHeight;
+
+ if (imgRatio > canvasRatio) {
+ sHeight = imgObj.height;
+ sWidth = sHeight * canvasRatio;
+ sx = (imgObj.width - sWidth) / 2;
+ sy = 0;
+ } else {
+ sWidth = imgObj.width;
+ sHeight = sWidth / canvasRatio;
+ sx = 0;
+ sy = (imgObj.height - sHeight) / 2;
+ }
+
+ ctx.beginPath();
+ ctx.roundRect(imgLeft * 3, imgTop * 3, resizableWidth * 3, resizableHeight * 3, borderRadius);
+ ctx.closePath();
+ ctx.clip();
+ ctx.drawImage(imgObj, sx, sy, sWidth, sHeight, imgLeft * 3, imgTop * 3, resizableWidth * 3, resizableHeight * 3);
+
+ if (borderWidth > 0) {
+ ctx.strokeStyle = borderColor;
+ ctx.lineWidth = borderWidth;
+ ctx.stroke();
+ }
+
+ ctx.restore();
+ imgResolve();
+ };
+
+ imgObj.onerror = function () {
+ console.error("Error: 이미지 로드 실패");
+ imgResolve();
+ };
+ });
+
+ imagePromises.push(promise);
+ });
+
+ Promise.all(imagePromises).then(() => {
+ resolve(newCanvas);
+ });
+ }).catch(error => {
+ console.error("html2canvas 캡처 오류:", error);
+ reject(error);
+ });
+ });
+}
+
+/* 고도화 후 오픈예정
+document.getElementById("save-pdf-btn").addEventListener("click", function () {
+ removeElementsTemporarily(".resize-handle, .delete-preview, .rb-video-container", () => {
+ return captureEditor().then(canvas => {
+ const finalCanvas = addMarginToCanvas(canvas, 50);
+ const imgData = finalCanvas.toDataURL("image/png");
+ const {
+ jsPDF
+ } = window.jspdf;
+ const pdf = new jsPDF("p", "mm", "a4");
+
+ const pdfWidth = pdf.internal.pageSize.getWidth(); // A4 너비 (mm)
+ const pdfHeight = pdf.internal.pageSize.getHeight(); // A4 높이 (mm)
+
+ const canvasWidth = finalCanvas.width;
+ const canvasHeight = finalCanvas.height;
+
+ // PDF에 맞는 비율 계산
+ const scaleFactor = pdfWidth / canvasWidth;
+ const imgHeight = canvasHeight * scaleFactor;
+
+ let positionY = 0;
+
+ while (positionY < imgHeight) {
+ pdf.addImage(imgData, "PNG", 0, -positionY, pdfWidth, imgHeight, "FAST");
+ positionY += pdfHeight; // 한 페이지 크기만큼 이동
+
+ if (positionY < imgHeight) {
+ pdf.addPage();
+ }
+ }
+
+ pdf.save("editor.pdf");
+ });
+ });
+});
+
+
+document.getElementById("save-image-btn").addEventListener("click", function () {
+ removeElementsTemporarily(".resize-handle, .delete-preview, .rb-video-container", () => {
+ return captureEditor().then(canvas => {
+ const finalCanvas = addMarginToCanvas(canvas, 50);
+ const link = document.createElement("a");
+ link.download = "editor.png";
+ link.href = finalCanvas.toDataURL("image/png");
+ link.click();
+ });
+ });
+});
+
+document.getElementById("save-print-btn").addEventListener("click", function () {
+ removeElementsTemporarily(".resize-handle, .delete-preview, .rb-video-container", () => {
+ return captureEditor().then(canvas => {
+ const finalCanvas = addMarginToCanvas(canvas, 50);
+ const imageData = finalCanvas.toDataURL("image/png");
+
+ const printWindow = window.open("", "_blank");
+ printWindow.document.write(`
+
+
+ 인쇄
+
+
+
+ 
+
+
+ `);
+ printWindow.document.close();
+ });
+ });
+});
+
+*/
+window.addEventListener("message", function (event) {
+ if (event.data.type === "rbeditor-submit") {
+ const editorContent = document.getElementById("editor").innerHTML;
+ const iframe = window.frameElement;
+ const editorId = iframe.getAttribute("data-editor-id");
+
+ window.parent.postMessage({
+ type: "rbeditor-content",
+ content: editorContent,
+ editorId: editorId
+ }, "*");
+ }
+
+ if (event.data.type === "rbeditor-set-content") {
+ const editorId = event.data.editorId; // 부모 창에서 전달받은 editorId
+ let content = event.data.content;
+
+ if (content) {
+ // 1. 엔티티를 디코딩하여 원래 HTML로 변환
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = content; // 자동 디코딩 수행
+
+ // 2. 에디터에 변환된 HTML 삽입
+ const editor = document.getElementById("editor");
+ if (editor) {
+ editor.innerHTML = tempDiv.textContent || tempDiv.innerText;
+ } else {
+ //console.error(`Editor with ID ${editorId} not found`);
+ }
+ }
+ }
+
+
+
+ /* 자동저장 전송 */
+ if (event.data.type === "rbeditor-insert-content") {
+ const content = event.data.content;
+
+ // HTML 엔티티 디코딩 (태그 및 스타일 유지)
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = content;
+ const decodedContent = tempDiv.innerHTML;
+
+ // 강제로 `#regular-mode-btn` 클릭 효과 실행
+ function triggerRegularMode() {
+ var regularModeBtn = document.getElementById("regular-mode-btn");
+
+ if (regularModeBtn) {
+ //console.log("#regular-mode-btn 클릭 트리거 실행");
+ regularModeBtn.click(); // 클릭 효과 발생
+ } else {
+ //console.error("#regular-mode-btn을 찾을 수 없습니다.");
+ }
+ }
+
+ // RB 에디터에 내용 삽입
+ function insertContent() {
+ var editor = document.getElementById("editor");
+
+ if (!editor) {
+ console.error("에디터를 찾을 수 없습니다.");
+ return;
+ }
+
+ editor.innerHTML = decodedContent; // 기존 내용 교체
+ editor.focus(); // 포커스 유지
+ //console.log("에디터 내용이 정상적으로 업데이트됨");
+ }
+
+ // `#regular-mode-btn` 클릭 효과 실행 후 내용 삽입
+ triggerRegularMode();
+ setTimeout(insertContent, 100); // 클릭 효과 후 약간의 지연 적용
+ }
+
+
+
+ if (event.data.type === "rbeditor-get-content") {
+ //console.log("autosave 요청 수신"); // 로그 추가
+ const editorContent = document.getElementById("editor").innerHTML;
+
+ // 부모 창으로 에디터 내용 전송
+ event.source.postMessage({
+ type: "rbeditor-content",
+ content: editorContent
+ }, "*");
+ }
+
+});
+
+/* 고도화 후 오픈예정
+document.getElementById("btn_rb_autosave").addEventListener("click", function () {
+ //console.log("아이프레임에서 부모 창으로 autosave-trigger 요청 전송");
+
+ // 부모 창으로 자동 저장 실행 요청
+ window.parent.postMessage({
+ type: "autosave-trigger"
+ }, "*");
+});
+
+document.getElementById("btn_tb_autosave_popup").addEventListener("click", function () {
+ //console.log("아이프레임에서 부모 창으로 autosave 요청 전송");
+
+ // 부모 창으로 메시지 전송
+ window.parent.postMessage({
+ type: "trigger-autosave-popup"
+ }, "*");
+});
+*/
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/js/skin.js b/plugin/editor/rb.editor/js/skin.js
new file mode 100644
index 000000000..ae420796c
--- /dev/null
+++ b/plugin/editor/rb.editor/js/skin.js
@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", function() {
+ const resizableDivs = document.querySelectorAll("div.resizable");
+
+ // 각 요소의 원래 비율을 data 속성에서 계산합니다.
+ resizableDivs.forEach(div => {
+ const originalWidth = div.getAttribute('data-original-width');
+ const originalHeight = div.getAttribute('data-original-height');
+ if (originalWidth && originalHeight) {
+ div.dataset.ratio = originalHeight / originalWidth;
+ } else {
+ // 만약 data 속성이 없다면 현재 크기로 비율 계산 (이 경우는 새로고침 시 문제가 발생할 수 있음)
+ const currentWidth = div.offsetWidth;
+ const currentHeight = div.offsetHeight;
+ if (currentWidth) {
+ div.dataset.ratio = currentHeight / currentWidth;
+ }
+ }
+ });
+
+ function updateHeights() {
+ resizableDivs.forEach(div => {
+ const ratio = parseFloat(div.dataset.ratio);
+ if (!isNaN(ratio)) {
+ div.style.height = (div.offsetWidth * ratio) + "px";
+ }
+ });
+ }
+
+ // 페이지 로드 시와 창 크기 변경 시에 높이 업데이트
+ updateHeights();
+ window.addEventListener("resize", updateHeights);
+});
diff --git a/plugin/editor/rb.editor/js/table.js b/plugin/editor/rb.editor/js/table.js
new file mode 100644
index 000000000..76e6087ab
--- /dev/null
+++ b/plugin/editor/rb.editor/js/table.js
@@ -0,0 +1,901 @@
+//#region 셀 선택 및 툴바 표시
+
+let selectedCells = [];
+
+// 셀 클릭 이벤트: Ctrl 키와 함께 클릭 시 셀 선택 토글
+$('#editor').on('click', 'td, th', function (e) {
+ if (e.ctrlKey) {
+ // Ctrl + 클릭: 선택/해제 토글 기능 유지
+ const cell = this;
+ const isSelected = $(cell).hasClass('selected-cell');
+
+ if (isSelected) {
+ // 이미 선택된 셀인 경우 선택 해제
+ $(cell).removeClass('selected-cell');
+ selectedCells = selectedCells.filter(c => c !== cell);
+ } else {
+ // 선택되지 않은 셀인 경우 선택
+ $(cell).addClass('selected-cell');
+ selectedCells.push(cell);
+ }
+
+ if (selectedCells.length > 0) {
+ // 마지막 클릭 위치(e.pageX, e.pageY)를 기준으로 툴바 표시
+ showCellToolbar(e.pageX, e.pageY);
+ } else {
+ $('#cell-toolbar').fadeOut(0); // 선택된 셀이 없으면 툴바 숨김
+ }
+ } else {
+ // Ctrl 없이 클릭 시 모든 선택된 셀 해제
+ $('td, th').removeClass('selected-cell');
+ selectedCells = [];
+ $('#cell-toolbar').fadeOut(0);
+ }
+});
+
+// 선택된 셀 강조 및 툴바 위치 계산
+function showCellToolbar(x, y) {
+ const $cellToolbar = $('#cell-toolbar');
+ const $editorContainer = $('#editor-container');
+
+ $cellToolbar.css({
+ top: y + 'px',
+ left: x + 'px',
+ position: 'absolute'
+ }).fadeIn(0);
+
+ // 화면을 넘어가지 않도록 조정
+ ensureToolbarWithinBounds($cellToolbar, $editorContainer);
+}
+
+// 툴바가 컨테이너 내에 있도록 위치 조정하는 함수
+function ensureToolbarWithinBounds($toolbar, $container) {
+ const toolbarRect = $toolbar[0].getBoundingClientRect();
+ const containerRect = $container[0].getBoundingClientRect();
+
+ let newTop = parseInt($toolbar.css('top'));
+ let newLeft = parseInt($toolbar.css('left'));
+
+ if (toolbarRect.bottom > containerRect.bottom) {
+ newTop -= (toolbarRect.bottom - containerRect.bottom);
+ }
+ if (toolbarRect.right > containerRect.right) {
+ newLeft -= (toolbarRect.right - containerRect.right);
+ }
+ if (toolbarRect.top < containerRect.top) {
+ newTop = containerRect.top;
+ }
+ if (toolbarRect.left < containerRect.left) {
+ newLeft = containerRect.left;
+ }
+
+ $toolbar.css({
+ top: newTop + 'px',
+ left: newLeft + 'px'
+ });
+}
+
+//#endregion 셀 선택 및 툴바 표시
+
+
+//#region 테이블 그리드 매핑 함수
+
+/**
+ * 테이블을 그리드로 매핑하여 각 셀의 위치를 반환합니다.
+ * @param {jQuery} $table - jQuery 객체로 된 테이블 요소
+ * @returns {Array} grid - 2차원 배열로 매핑된 셀 위치
+ */
+function mapTableGrid($table) {
+ const grid = [];
+ const rows = $table.find('tr');
+
+ rows.each(function (rowIndex, row) {
+ if (!grid[rowIndex]) {
+ grid[rowIndex] = [];
+ }
+ let colIndex = 0;
+ $(row).children('td, th').each(function (cellIndex, cell) {
+ // colspan과 rowspan 속성 가져오기
+ const colspan = parseInt($(cell).attr('colspan')) || 1;
+ const rowspan = parseInt($(cell).attr('rowspan')) || 1;
+
+ // 그리드에서 빈 위치 찾기
+ while (grid[rowIndex][colIndex]) {
+ colIndex++;
+ }
+
+ // 현재 셀을 그리드에 매핑
+ for (let i = 0; i < rowspan; i++) {
+ for (let j = 0; j < colspan; j++) {
+ if (!grid[rowIndex + i]) {
+ grid[rowIndex + i] = [];
+ }
+ grid[rowIndex + i][colIndex + j] = cell;
+ }
+ }
+ colIndex += colspan;
+ });
+ });
+
+ return grid;
+}
+
+//#endregion 테이블 그리드 매핑 함수
+
+
+//#region 셀 병합 기능
+
+// 셀 병합 버튼 클릭 이벤트
+$('#merge-cells-btn').click(function () {
+ if (selectedCells.length <= 1) {
+ alert('병합할 셀을 2개 이상 선택해주세요.');
+ return;
+ }
+
+ const $table = $(selectedCells[0]).closest('table');
+ const grid = mapTableGrid($table);
+
+ // 선택된 셀들의 행과 열 인덱스 추출
+ const cellPositions = selectedCells.map(cell => {
+ for (let r = 0; r < grid.length; r++) {
+ for (let c = 0; c < grid[r].length; c++) {
+ if (grid[r][c] === cell) {
+ return {
+ row: r,
+ col: c
+ };
+ }
+ }
+ }
+ });
+
+ // 최소 및 최대 행, 열 인덱스 계산
+ const rowsIndices = cellPositions.map(pos => pos.row);
+ const colsIndices = cellPositions.map(pos => pos.col);
+
+ const minRow = Math.min(...rowsIndices);
+ const maxRow = Math.max(...rowsIndices);
+ const minCol = Math.min(...colsIndices);
+ const maxCol = Math.max(...colsIndices);
+
+ const rowSpan = maxRow - minRow + 1;
+ const colSpan = maxCol - minCol + 1;
+
+ // 선택된 영역이 완전한 사각형을 형성하는지 검증
+ for (let r = minRow; r <= maxRow; r++) {
+ for (let c = minCol; c <= maxCol; c++) {
+ const cell = grid[r][c];
+ if (!selectedCells.includes(cell)) {
+ alert('선택된 셀들은 병합할 수 없습니다.');
+ return;
+ }
+
+ const $cell = $(cell);
+ const existingRowSpan = parseInt($cell.attr('rowspan')) || 1;
+ const existingColSpan = parseInt($cell.attr('colspan')) || 1;
+
+ if (existingRowSpan > 1 || existingColSpan > 1) {
+ alert('이미 병합된 셀은 병합할 수 없습니다.');
+ return;
+ }
+ }
+ }
+
+ // 좌상단 셀 선택 및 rowspan, colspan 설정
+ const topLeftCell = grid[minRow][minCol];
+ const $topLeftCell = $(topLeftCell);
+
+ if (rowSpan > 1) {
+ $topLeftCell.attr('rowspan', rowSpan);
+ }
+ if (colSpan > 1) {
+ $topLeftCell.attr('colspan', colSpan);
+ }
+
+ // 나머지 셀들 제거
+ for (let r = minRow; r <= maxRow; r++) {
+ for (let c = minCol; c <= maxCol; c++) {
+ if (r === minRow && c === minCol) continue;
+ const cell = grid[r][c];
+ $(cell).remove();
+ }
+ }
+
+ // 선택 초기화 및 툴바 숨김
+ selectedCells = [];
+ $('td, th').removeClass('selected-cell');
+ $('#cell-toolbar').fadeOut(0);
+});
+
+//#endregion 셀 병합 기능
+
+
+//#region 셀 병합 해제 기능
+
+$('#unmerge-cells-btn').click(function () {
+ if (selectedCells.length !== 1) {
+ alert('병합 해제는 병합된 셀 하나만 선택해야 합니다.');
+ return;
+ }
+
+ const $table = $(selectedCells[0]).closest('table');
+ const grid = mapTableGrid($table);
+
+ // 병합된 셀 정보 가져오기
+ const $mergedCell = $(selectedCells[0]);
+ const rowspan = parseInt($mergedCell.attr('rowspan')) || 1;
+ const colspan = parseInt($mergedCell.attr('colspan')) || 1;
+
+ if (rowspan === 1 && colspan === 1) {
+ alert('이 셀은 병합되지 않았습니다.');
+ return;
+ }
+
+ const mergedCellPosition = (() => {
+ for (let r = 0; r < grid.length; r++) {
+ for (let c = 0; c < grid[r].length; c++) {
+ if (grid[r][c] === $mergedCell[0]) {
+ return {
+ row: r,
+ col: c
+ };
+ }
+ }
+ }
+ return null;
+ })();
+
+ if (!mergedCellPosition) {
+ alert('병합된 셀의 위치를 확인할 수 없습니다.');
+ return;
+ }
+
+ const {
+ row: startRow,
+ col: startCol
+ } = mergedCellPosition;
+
+ // 병합된 셀의 rowspan 및 colspan에 따라 셀 추가
+ for (let r = startRow; r < startRow + rowspan; r++) {
+ for (let c = startCol; c < startCol + colspan; c++) {
+ if (r === startRow && c === startCol) {
+ // 기존 병합된 셀은 rowspan, colspan 제거
+ $mergedCell.removeAttr('rowspan').removeAttr('colspan');
+ } else {
+ // 나머지 셀 복원
+ const $newCell = $('
| ').css({
+ border: '1px solid #ddd',
+ padding: '5px',
+ });
+
+ // 그리드 위치에 따라 셀 삽입
+ const $row = $table.find('tr').eq(r);
+ // 그리드 내 현재 셀의 위치를 찾기 (colSpan을 고려)
+ let insertBefore = null;
+ let currentCol = 0;
+ $row.children('td, th').each(function () {
+ const colspanAttr = parseInt($(this).attr('colspan')) || 1;
+ if (currentCol === c) {
+ insertBefore = this;
+ return false; // 루프 종료
+ }
+ currentCol += colspanAttr;
+ });
+ if (insertBefore) {
+ $(insertBefore).before($newCell);
+ } else {
+ $row.append($newCell);
+ }
+
+ // 그리드 업데이트
+ grid[r][c] = $newCell[0];
+ }
+ }
+ }
+
+ // 선택 초기화 및 툴바 숨김
+ selectedCells = [];
+ $('td, th').removeClass('selected-cell');
+ $('#cell-toolbar').fadeOut(0);
+});
+
+//#endregion 셀 병합 해제 기능
+
+
+//#region 셀 배경색 변경
+
+$('#cell-bg-color-btn').on('click', function () {
+ $('#cell-bg-color-picker').click();
+});
+
+$('#cell-bg-color-picker').on('input', function () {
+ const selectedColor = $(this).val();
+
+ // 선택된 셀의 배경 색상 변경
+ $('.selected-cell').each(function () {
+ $(this).css('background-color', selectedColor);
+ $('#cell-bg-color-btn').css('background-color', selectedColor);
+
+ // 선택 후 초기화 (필요 시 주석 해제)
+ // selectedCells = [];
+ // $('td, th').removeClass('selected-cell');
+ });
+});
+
+//#endregion 셀 배경색 변경
+
+
+//#region 문서 외부 클릭 이벤트 처리
+
+// 외부 클릭 시 초기화
+$(document).on('click', function (e) {
+ if (!$(e.target).closest('#editor').length && !$(e.target).closest('#toolbar').length) {
+ savedSelection = null;
+ }
+
+ const $grid = $('#table-grid');
+ if (!$(e.target).closest('#table-grid').length && !$(e.target).is('#insert-table-btn')) {
+ $grid.fadeOut(0);
+ }
+
+ // 표 셀 선택 해제
+ if (!$(e.target).closest('td, th, #cell-toolbar').length) {
+ selectedCells = [];
+ $('td, th').removeClass('selected-cell');
+ $('#cell-toolbar').fadeOut(0);
+ }
+
+ const isInsideEditor = $(e.target).closest('#editor').length > 0; // 클릭한 요소가 #editor 내부인지 확인
+ const isResizable = $(e.target).closest('.resizable').length > 0; // 클릭한 요소가 .resizable인지 확인
+ const isToolbar = $(e.target).closest('#image-toolbar').length > 0; // 클릭한 요소가 툴바인지 확인
+
+ if (!isResizable && !isToolbar) {
+ $('.resizable').removeClass('selected'); // 모든 이미지에서 selected 제거
+ $('#image-toolbar').fadeOut(0); // 툴바 숨기기
+ }
+});
+
+// #cell-toolbar 내부 클릭 시 이벤트 전파 차단
+$('#cell-toolbar').on('click', function (e) {
+ e.stopPropagation();
+});
+
+//#endregion 문서 외부 클릭 이벤트 처리
+
+
+//#region 정렬 관련 함수
+
+function applyAlignmentToSelectedCells(alignment) {
+ const selection = window.getSelection();
+ const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+ if (range) {
+ const ancestorTable = $(range.commonAncestorContainer).closest('table');
+
+ // 표 내부일 경우
+ if (ancestorTable.length) {
+ // 드래그로 선택된 셀들 가져오기
+ const selectedCells = ancestorTable.find('td, th').filter(function () {
+ const cellRange = document.createRange();
+ cellRange.selectNodeContents(this);
+
+ // 드래그로 선택된 범위와 셀이 겹치는지 확인
+ return (
+ range.compareBoundaryPoints(Range.START_TO_END, cellRange) !== -1 &&
+ range.compareBoundaryPoints(Range.END_TO_START, cellRange) !== 1
+ );
+ });
+
+ // Ctrl + 클릭으로 선택된 셀은 제외
+ const filteredCells = selectedCells.filter(function () {
+ return !$(this).hasClass('selected-cell'); // 'selected-cell' 클래스 제외
+ });
+
+ // 선택된 셀만 정렬 적용
+ filteredCells.each(function () {
+ $(this).css('text-align', alignment);
+ });
+
+ return true; // 표 정렬 적용 완료
+ }
+ }
+
+ return false; // 표 정렬 미적용
+}
+
+function applyAlignmentToSelectedCellsOrEditor(alignment) {
+ const selection = window.getSelection();
+ const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+ if (range) {
+ const commonAncestor = range.commonAncestorContainer;
+
+ // 선택된 범위 내의 모든 셀(td, th)을 가져옴
+ const selectedCells = $(commonAncestor)
+ .closest('table')
+ .find('td, th')
+ .filter(function () {
+ const cellRange = document.createRange();
+ cellRange.selectNodeContents(this);
+
+ // 셀이 선택된 범위와 겹치는지 확인
+ return (
+ range.compareBoundaryPoints(Range.START_TO_END, cellRange) !== -1 &&
+ range.compareBoundaryPoints(Range.END_TO_START, cellRange) !== 1
+ );
+ });
+
+ if (selectedCells.length > 0) {
+ // 선택된 모든 셀에 정렬 적용
+ selectedCells.each(function () {
+ $(this).css('text-align', alignment);
+ });
+ } else {
+ // 선택된 범위가 없거나 표 외부인 경우 전체 에디터에 정렬 적용
+ $('#editor').children(':not(table)').css('text-align', alignment);
+ }
+ }
+}
+
+function applyAlignmentToTableCells(range, alignment) {
+ const selectedCells = getSelectedCellsInRange(range);
+
+ if (selectedCells.length > 0) {
+ selectedCells.each(function () {
+ $(this).css('text-align', alignment);
+ });
+ return true; // 표 내부 정렬 적용 완료
+ }
+ return false; // 표 내부 정렬 없음
+}
+
+// 범위 내에서 선택된 셀(td, th) 가져오기
+function getSelectedCellsInRange(range) {
+ const selectedCells = [];
+ const ancestor = range.commonAncestorContainer;
+
+ // 범위가 표 내부인지 확인
+ const table = $(ancestor).closest('table');
+ if (table.length) {
+ const startContainer = range.startContainer;
+ const endContainer = range.endContainer;
+
+ const startCell = $(startContainer).closest('td, th')[0];
+ const endCell = $(endContainer).closest('td, th')[0];
+
+ if (startCell && endCell) {
+ let selecting = false;
+
+ table.find('tr').each(function () {
+ $(this).children('td, th').each(function () {
+ if (this === startCell) {
+ selecting = true; // 선택 시작
+ selectedCells.push(this);
+ } else if (this === endCell) {
+ selectedCells.push(this); // 선택 끝
+ selecting = false; // 선택 종료
+ } else if (selecting) {
+ selectedCells.push(this); // 선택 중간 셀
+ }
+ });
+
+ if (!selecting && selectedCells.length > 0) {
+ return false; // 선택 종료 시 루프 탈출
+ }
+ });
+ }
+ }
+
+ return $(selectedCells); // jQuery 객체로 반환
+}
+
+//#endregion 정렬 관련 함수
+
+
+//#region 테이블 삽입 기능
+
+/**
+ * 주어진 행과 열 수로 테이블 생성 및 에디터에 삽입
+ * @param {number} rows - 테이블 행 수
+ * @param {number} cols - 테이블 열 수
+ */
+function insertTable(rows, cols) {
+ if (savedSelection) {
+ const sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(savedSelection); // 이전 커서 위치 복원
+ }
+
+ const selection = window.getSelection();
+ const range = selection.rangeCount ? selection.getRangeAt(0) : null;
+
+ if (range) {
+ let container = range.commonAncestorContainer;
+ if (container.nodeType === Node.TEXT_NODE) container = container.parentElement;
+
+ // ✅ 테이블 내부(td, th)인지 확인 후 생성 제한
+ if ($(container).closest('td, th').length) {
+ alert("테이블 내부에서는 테이블을 생성할 수 없습니다.");
+ return;
+ }
+ }
+
+ // ✅ 테이블을 정확한 행*열로 생성
+ let tableHTML = `
+
+
+
+
+
+
+ ${Array(rows).fill(`${Array(cols).fill('
| ').join('')}
`).join('')}
+
+
+
+
+
+
+ `;
+
+ const $table = $(tableHTML);
+ const $editor = $('#editor');
+
+ if (range) {
+ let container = range.commonAncestorContainer;
+ if (container.nodeType === Node.TEXT_NODE) container = container.parentElement;
+
+ if ($(container).closest('#editor').length) {
+ range.deleteContents();
+ range.insertNode($table[0]);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ } else {
+ $editor.append($table);
+ }
+ } else {
+ $editor.append($table);
+ }
+
+ enableResizableTable($table);
+}
+
+
+
+/**
+ * 테이블 크기 조정 기능 활성화
+ * @param {HTMLElement} table - 크기 조정할 테이블 요소
+ */
+function enableResizableTable(table) {
+ // 테이블이 jQuery 객체라면 DOM 요소로 변환
+ if (table instanceof jQuery) {
+ table = table.get(0);
+ }
+
+ // 테이블이 NodeList(배열)라면 첫 번째 요소 선택
+ if (NodeList.prototype.isPrototypeOf(table) || Array.isArray(table)) {
+ table = table[0];
+ }
+
+ // 유효한 DOM 요소인지 확인
+ if (!(table instanceof HTMLElement)) {
+ //console.error("⚠️ enableResizableTable: 유효한 테이블 요소가 아닙니다.", table);
+ return;
+ }
+
+ let handle = table.querySelector('.resizable-table-handle');
+
+ // ✅ 핸들이 없으면 자동 추가
+ if (!handle) {
+ //console.warn('resizable-table-handle 요소가 없습니다. 자동 추가합니다.');
+ handle = document.createElement("div");
+ handle.classList.add("resizable-table-handle");
+ table.appendChild(handle);
+ }
+
+ let isResizing = false;
+ let startX = 0;
+ let startWidth = 0;
+
+ function startResize(event) {
+ isResizing = true;
+ startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
+ startWidth = table.offsetWidth;
+
+ document.addEventListener('mousemove', doResize);
+ document.addEventListener('mouseup', stopResize);
+ document.addEventListener('touchmove', doResize, { passive: false });
+ document.addEventListener('touchend', stopResize, { passive: false });
+
+ event.preventDefault();
+ }
+
+ function doResize(event) {
+ if (!isResizing) return;
+
+ const moveX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
+ const newWidth = startWidth + (moveX - startX);
+
+ if (newWidth > 100) { // 최소 너비 제한
+ table.style.width = `${newWidth}px`;
+ }
+ }
+
+ function stopResize() {
+ isResizing = false;
+ document.removeEventListener('mousemove', doResize);
+ document.removeEventListener('mouseup', stopResize);
+ document.removeEventListener('touchmove', doResize);
+ document.removeEventListener('touchend', stopResize);
+ }
+
+ // 기존 이벤트 제거 후 다시 바인딩
+ handle.removeEventListener('mousedown', startResize);
+ handle.removeEventListener('touchstart', startResize);
+ handle.addEventListener('mousedown', startResize);
+ handle.addEventListener('touchstart', startResize, { passive: false });
+}
+
+
+
+/**
+ * 에디터 내 모든 테이블을 감싸고 핸들 추가
+ */
+function wrapTablesWithEditorWrap() {
+ $('#editor table').each(function () {
+ const $table = $(this);
+
+ if ($table.closest('.resizable-table').length) return; // 이미 감싸져 있으면 패스
+
+ // 테이블 스타일 초기화 및 새로운 스타일 적용
+ $table.removeAttr('style').css({
+ 'width': '100%',
+ 'border-collapse': 'collapse',
+ 'border': '1px solid rgb(221, 221, 221)',
+ 'table-layout': 'fixed'
+ });
+
+ // 테이블 내부의 td 및 th 스타일 초기화 및 새로운 스타일 적용
+ $table.find('td, th').each(function () {
+ $(this).removeAttr('style').css({
+ 'border': '1px solid rgb(221, 221, 221)',
+ 'padding': '10px',
+ 'height': '40px',
+ 'position': 'relative'
+ });
+ });
+
+ const $wrapper = $('');
+ //const $handle = $('');
+
+ // 기존 래퍼 유지
+ const $wrapInner = $('');
+
+ // 테이블을 감싸기만 함 (이동 X, 제거 X)
+ $table.wrap($wrapInner);
+
+ // 최종 래퍼 구성
+ $table.parent().parent().wrap($wrapper);
+ //$table.parent().parent().parent().append($handle);
+
+ enableResizableTable($table.closest('.resizable-table'));
+ });
+}
+
+
+
+
+
+/**
+ * 주어진 테이블의 셀 크기 조정 기능 활성화
+ * @param {jQuery} $table - 크기 조정할 테이블 요소
+ */
+function enableResizableTableCells($table) {
+ const resizeMargin = 10; // 커서 반경 확대
+ let isResizing = false;
+ let resizingCell = null;
+ const passiveOptions = { passive: true };
+
+ $table.css({
+ "table-layout": "fixed", // 테이블 레이아웃 고정
+ "width": "100%", // 테이블 전체 폭 100%
+ });
+
+ $table.find('td, th').each(function () {
+ const $cell = $(this);
+ $cell.css({ position: 'relative' });
+
+ // ✅ 마지막 열인지 확인하여 크기 조정 방지
+ const isLastColumn = $cell.is(':last-child');
+ if (isLastColumn) return; // 마지막 열은 크기 조정 X
+
+ function handleMove(event) {
+ const isTouch = event.type.includes('touch');
+ const offsetX = isTouch ? event.touches[0].clientX - $cell.offset().left : event.offsetX;
+ const offsetY = isTouch ? event.touches[0].clientY - $cell.offset().top : event.offsetY;
+ const cellWidth = $cell.outerWidth();
+ const cellHeight = $cell.outerHeight();
+ const $row = $cell.closest('tr');
+
+ $table.find('tr').removeClass('resize-row-highlight');
+ $cell.removeClass('resize-right-highlight resize-bottom-highlight');
+
+ // ✅ 마지막 열은 커서 변경 X
+ if (isLastColumn) {
+ $cell.css('cursor', 'text');
+ return;
+ }
+
+ if (offsetX > cellWidth - resizeMargin && offsetY > cellHeight - resizeMargin) {
+ $cell.addClass('resize-right-highlight resize-bottom-highlight');
+ $row.addClass('resize-row-highlight');
+ $cell.css('cursor', 'se-resize');
+ } else if (offsetX > cellWidth - resizeMargin) {
+ $cell.addClass('resize-right-highlight');
+ $cell.css('cursor', 'ew-resize');
+ } else if (offsetY > cellHeight - resizeMargin) {
+ $row.addClass('resize-row-highlight');
+ $cell.css('cursor', 'ns-resize');
+ } else {
+ $cell.css('cursor', 'text');
+ }
+ }
+
+ $cell.on('mousemove', handleMove);
+ $cell.get(0).addEventListener('touchmove', handleMove, passiveOptions);
+
+ function handleStart(event) {
+ const isTouch = event.type.includes('touch');
+ const touch = isTouch ? event.touches[0] : null;
+ const startX = isTouch ? touch.clientX : event.pageX;
+ const startY = isTouch ? touch.clientY : event.pageY;
+ const cellWidth = $cell.outerWidth();
+ const cellHeight = $cell.outerHeight();
+ const $table = $cell.closest('table');
+
+ if (isLastColumn) return; // ✅ 마지막 열이면 크기 조정 시작 X
+
+ const isResizeArea = (
+ startX > $cell.offset().left + cellWidth - resizeMargin ||
+ startY > $cell.offset().top + cellHeight - resizeMargin
+ );
+
+ if (!isResizeArea) return;
+
+ event.preventDefault();
+ isResizing = true;
+ resizingCell = $cell;
+
+ const startWidth = $cell.outerWidth();
+ const startHeight = $cell.outerHeight();
+ const cellIndex = $cell.index();
+ const $row = $cell.closest('tr');
+ const rowIndex = $row.index();
+
+ function doResize(e) {
+ const isTouchMove = e.type.includes('touch');
+ const moveX = isTouchMove ? e.touches[0].clientX : e.pageX;
+ const moveY = isTouchMove ? e.touches[0].clientY : e.pageY;
+
+ if (isResizing && resizingCell) {
+ if (startX > $cell.offset().left + cellWidth - resizeMargin) {
+ const newWidth = startWidth + (moveX - startX);
+ if (newWidth > 30) {
+ $table.find('tr').each(function () {
+ $(this).children().eq(cellIndex).css('width', `${newWidth}px`);
+ });
+ }
+ }
+ if (startY > $cell.offset().top + cellHeight - resizeMargin) {
+ const newHeight = startHeight + (moveY - startY);
+ if (newHeight > 20) {
+ $table.find('tr').eq(rowIndex).children().css('height', `${newHeight}px`);
+ }
+ }
+ }
+ }
+
+ function stopResize() {
+ isResizing = false;
+ resizingCell = null;
+ $(document).off('mousemove', doResize);
+ $(document).off('mouseup', stopResize);
+ document.removeEventListener('touchmove', doResize, passiveOptions);
+ document.removeEventListener('touchend', stopResize, passiveOptions);
+ }
+
+ $(document).on('mousemove', doResize);
+ $(document).on('mouseup', stopResize);
+ document.addEventListener('touchmove', doResize, passiveOptions);
+ document.addEventListener('touchend', stopResize, passiveOptions);
+ }
+
+ $cell.on('mousedown', handleStart);
+ $cell.get(0).addEventListener('touchstart', handleStart, { passive: false });
+
+ $cell.on('mouseleave touchend', function () {
+ if (!isResizing) {
+ $table.find('tr').removeClass('resize-row-highlight');
+ $cell.removeClass('resize-right-highlight resize-bottom-highlight');
+ }
+ });
+ });
+}
+
+
+
+//#endregion 셀 크기 조정 기능
+
+
+//#region 테이블 리사이징 초기화 (기존 테이블에 적용)
+
+function initializeResizableTables() {
+ $('#editor table').each(function () {
+ enableResizableTableCells($(this));
+ });
+}
+
+//#endregion 테이블 리사이징 초기화 (기존 테이블에 적용)
+
+
+//#region MutationObserver 설정
+
+/**
+ * MutationObserver를 사용하여 새로운 테이블이 추가될 때 자동으로 크기 조정 기능을 적용합니다.
+ */
+const tableObserver = new MutationObserver(function (mutationsList) {
+ for (let mutation of mutationsList) {
+ if (mutation.type === 'childList') {
+ mutation.addedNodes.forEach(node => {
+ if ($(node).is('table')) {
+ enableResizableTableCells($(node));
+ } else {
+ // 만약 노드가 테이블을 포함하고 있다면
+ $(node).find('table').each(function () {
+ enableResizableTableCells($(this));
+ });
+ }
+ });
+ }
+ }
+});
+
+// #editor 내부의 변경 사항 관찰
+tableObserver.observe(document.getElementById('editor'), {
+ childList: true,
+ subtree: true
+});
+
+//#endregion MutationObserver 설정
+
+
+//#region 이벤트 핸들러 등록
+
+// 정렬 버튼 이벤트 예시 (Assuming you have buttons for alignment)
+$('#align-left-btn').click(function () {
+ applyAlignmentToSelectedCells('left');
+});
+
+$('#align-center-btn').click(function () {
+ applyAlignmentToSelectedCells('center');
+});
+
+$('#align-right-btn').click(function () {
+ applyAlignmentToSelectedCells('right');
+});
+
+
+
+// 페이지 로드 시 실행
+$(document).ready(function () {
+ wrapTablesWithEditorWrap();
+ initializeResizableTables();
+
+ // MutationObserver로 동적 감지
+ const observer = new MutationObserver(() => {
+ wrapTablesWithEditorWrap();
+ });
+
+ observer.observe(document.getElementById('editor'), { childList: true, subtree: true });
+});
diff --git a/plugin/editor/rb.editor/js/tag.js b/plugin/editor/rb.editor/js/tag.js
new file mode 100644
index 000000000..dad043026
--- /dev/null
+++ b/plugin/editor/rb.editor/js/tag.js
@@ -0,0 +1,237 @@
+$(document).ready(function () {
+ let tagPopup = null;
+ let searchTimeout = null;
+ let lastSelection = null;
+
+ $('#editor').on('input', function () {
+ const sel = window.getSelection();
+ if (sel.rangeCount === 0) return;
+
+ const range = sel.getRangeAt(0);
+ const container = range.startContainer;
+ const offset = range.startOffset;
+
+ let charBeforeCursor = '';
+
+ if (container.nodeType === Node.TEXT_NODE) {
+ charBeforeCursor = container.nodeValue[offset - 1];
+ } else if (container.nodeType === Node.ELEMENT_NODE && offset > 0) {
+ const nodeBeforeCursor = container.childNodes[offset - 1];
+ if (nodeBeforeCursor.nodeType === Node.TEXT_NODE) {
+ charBeforeCursor = nodeBeforeCursor.nodeValue.slice(-1);
+ }
+ }
+
+ if (charBeforeCursor === '#') {
+ saveSelection();
+ showTagPopup();
+
+ $('#rb-tag-list').empty().append('');
+ updateTagList('');
+ }
+ });
+
+
+ // 팝업 생성 및 위치 지정
+ function showTagPopup() {
+ if ($('#rb-tag-popup').length === 0) {
+ tagPopup = $('').hide();
+
+ let d_title = $('게시물 태그
');
+ let d_chk = $('');
+ let searchInput = $('');
+
+ tagPopup.append(d_title, d_chk, searchInput).append('');
+ $('body').append(tagPopup);
+ }
+
+ let selection = window.getSelection();
+ let range = selection.getRangeAt(0);
+ let rect = getCaretPosition(range);
+
+ const popupHeight = $('#rb-tag-popup').outerHeight();
+ const popupWidth = $('#rb-tag-popup').outerWidth();
+ const windowWidth = $(window).width();
+ const windowHeight = $(window).height();
+
+ let popupTop = rect.bottom + window.scrollY + 10;
+ let popupLeft = rect.left + window.scrollX;
+
+ if (popupTop + popupHeight > windowHeight) {
+ popupTop = windowHeight - popupHeight - 10;
+ }
+ if (popupLeft + popupWidth > windowWidth) {
+ popupLeft = windowWidth - popupWidth - 10;
+ }
+ if (popupLeft < 0) {
+ popupLeft = 10;
+ }
+ if (popupTop < 0) {
+ popupTop = 10;
+ }
+
+ tagPopup.css({ top: popupTop + 'px', left: popupLeft + 'px' }).fadeIn(100);
+ updateTagList('');
+ }
+
+ // 커서 위치 가져오기
+ function getCaretPosition(range) {
+ let rect = range.getBoundingClientRect();
+ if (rect.width === 0 && rect.height === 0) {
+ let span = document.createElement('span');
+ range.insertNode(span);
+ rect = span.getBoundingClientRect();
+ span.remove();
+ }
+ return rect;
+ }
+
+ // 게시물 목록 업데이트
+ function updateTagList(query) {
+ clearTimeout(searchTimeout);
+
+ let list = $('#rb-tag-list');
+
+ // ✅ 로딩 인디케이터가 없으면 추가
+ if ($('#rb-tag-list .loadingOverlay3').length === 0) {
+ list.append('');
+ }
+
+ // ✅ `#` 입력 즉시 로딩 UI 보이기
+ $('.loadingOverlay3').show();
+
+ searchTimeout = setTimeout(() => {
+ let isMyPostChecked = $('#rb-tag-my').prop('checked');
+
+ $.ajax({
+ url: g5Config.g5_editor_url + '/plugin/tag/ajax.result.php',
+ type: 'POST',
+ data: { search: query, mypost: isMyPostChecked ? '1' : '0' },
+ dataType: 'json',
+ success: function (data) {
+ list.empty(); // ✅ 기존 리스트 초기화
+
+ if (!query && data.length > 0) {
+ list.append('엔터 입력시 검색어를 링크로 추가 합니다.');
+ }
+
+ if (data.length === 0) {
+ list.append('검색 결과 없음');
+ } else {
+ data.forEach(item => {
+ let listItem = $(`
+
+ ${item.title}
+ ${item.wr_name} ${item.wr_datetime}
+ ${item.bo_subject}
+ 
+
+ `);
+ list.append(listItem);
+ });
+ }
+ },
+ error: function () {
+ list.empty().append('검색 중 오류 발생');
+ },
+ complete: function () {
+ // ✅ AJAX 완료 후 로딩 UI 숨김
+ $('.loadingOverlay3').hide();
+ }
+ });
+ }, 300);
+ }
+
+
+ // 체크박스 변경 시 업데이트
+ $(document).on('change', '#rb-tag-my', function () {
+ let searchQuery = $('#rb-tag-search').val().trim();
+ updateTagList(searchQuery);
+ });
+
+ // 검색 입력 시 업데이트
+ $(document).on('input', '#rb-tag-search', function () {
+ let searchQuery = $(this).val().trim();
+ updateTagList(searchQuery);
+ });
+
+ // `rb-tag-item` 클릭 시 에디터에 삽입
+ $(document).on('click', '#rb-tag-list .rb-tag-item', function () {
+ let title = $(this).find('.rb_tag_tit').text();
+ let url = $(this).attr('data-url');
+
+ if (!title || !url) {
+ console.warn('제목 또는 URL이 없습니다.');
+ return;
+ }
+
+ insertTag(title, url);
+ });
+
+ // `Enter` 입력 시 태그 삽입
+ $(document).on('keydown', function (e) {
+ if (e.key === 'Enter' && $('#rb-tag-popup').is(':visible')) {
+ e.preventDefault();
+
+ let query = $('#rb-tag-search').val().trim();
+
+ if (query) {
+ let searchUrl = g5Config.g5_bbs_url + `/board.php?bo_table=` + g5Config.g5_bo_table + `&sop=and&sfl=wr_subject%7C%7Cwr_content&stx=${encodeURIComponent(query)}`;
+ insertTag(query, searchUrl);
+ } else {
+ alert('검색어를 입력하세요.');
+ }
+ }
+ });
+
+ // 태그 삽입 (태그 삽입 시 `#` 제거)
+ function insertTag(title, url) {
+ restoreSelection();
+ deleteHashBeforeCursor(); // 🌟 `#`을 커서 위치에서 삭제
+
+ let tagHtml = ` `;
+ insertHTMLAtCursor(tagHtml);
+
+ $('#rb-tag-popup').fadeOut(100);
+ }
+
+ // 🌟 커서 앞의 `#`을 삭제하는 함수 추가
+ function deleteHashBeforeCursor() {
+ let sel = window.getSelection();
+ if (sel.rangeCount) {
+ let range = sel.getRangeAt(0);
+ let container = range.startContainer;
+ let offset = range.startOffset;
+
+ if (container.nodeType === Node.TEXT_NODE && offset > 0) {
+ let text = container.nodeValue;
+ if (text[offset - 1] === "#") {
+ container.nodeValue = text.slice(0, offset - 1) + text.slice(offset);
+ range.setStart(container, offset - 1);
+ range.setEnd(container, offset - 1);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
+ }
+ }
+ }
+
+ // `.rb_tag` 안으로 커서가 들어가지 않게 설정
+ $(document).on('mousedown keydown', '.rb_tag', function (e) {
+ e.preventDefault();
+ });
+
+ // ESC 키 입력 시 닫기
+ $(document).on('keydown', function (e) {
+ if (e.key === 'Escape' && $('#rb-tag-popup').is(':visible')) {
+ $('#rb-tag-popup').fadeOut(100);
+ }
+ });
+
+ // 에디터 외부 클릭 시 닫기
+ $(document).on('click', function (e) {
+ if (!$(e.target).closest('#rb-tag-popup').length) {
+ $('#rb-tag-popup').fadeOut(100);
+ }
+ });
+});
diff --git a/plugin/editor/rb.editor/js/text.js b/plugin/editor/rb.editor/js/text.js
new file mode 100644
index 000000000..9646d0245
--- /dev/null
+++ b/plugin/editor/rb.editor/js/text.js
@@ -0,0 +1,995 @@
+// 선택된 텍스트에 스타일 적용
+function applyStyleToSelection(styleName, styleValue) {
+ const selection = window.getSelection();
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const fragment = range.cloneContents();
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(fragment.childNodes).forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ node.style[styleName] = styleValue;
+ wrapper.appendChild(node);
+ } else if (node.nodeType === Node.TEXT_NODE) {
+ const span = document.createElement('span');
+ span.style[styleName] = styleValue;
+ span.textContent = node.nodeValue;
+ wrapper.appendChild(span);
+ }
+ });
+
+ range.deleteContents();
+ range.insertNode(wrapper);
+
+ // 한글 초성 분리 방지를 위해 normalize() 실행
+ document.getElementById('editor').normalize();
+ }
+}
+
+
+function toggleStyleToSelection(styleName, styleValue) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const fragment = range.extractContents();
+
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(fragment.childNodes).forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ // 기존 요소에 스타일이 이미 있으면 제거, 없으면 추가
+ if (node.style[styleName] === styleValue) {
+ node.style[styleName] = ''; // 스타일 제거
+ } else {
+ node.style[styleName] = styleValue; // 스타일 추가
+ }
+ wrapper.appendChild(node);
+ } else if (node.nodeType === Node.TEXT_NODE) {
+ // 텍스트 노드라면 새 태그로 감싸고 스타일 적용
+ const span = document.createElement("span");
+ span.style[styleName] = styleValue;
+ span.textContent = node.textContent;
+ wrapper.appendChild(span);
+ }
+ });
+
+ range.deleteContents();
+ range.insertNode(wrapper);
+ }
+}
+
+function normalizeEditorContent() {
+ const editor = document.getElementById('editor');
+
+ // ✅ 중첩된 병합 방지
+ editor.querySelectorAll('span').forEach((span) => {
+ const parent = span.parentElement;
+
+ // 부모가 이고 스타일이 동일하면 병합
+ if (parent.tagName === 'SPAN') {
+ const sameStyle = [...span.style].every(prop => parent.style[prop] === span.style[prop]);
+ if (sameStyle) {
+ while (span.firstChild) {
+ parent.insertBefore(span.firstChild, span);
+ }
+ parent.removeChild(span);
+ }
+ }
+
+ // 빈 제거
+ if (!span.textContent.trim()) {
+ span.remove();
+ }
+ });
+
+ // ⚠️ 요소 정리할 때도 기존 스타일 유지
+ editor.querySelectorAll('div').forEach((div) => {
+ if (div.childNodes.length === 1 && div.firstChild.tagName === 'SPAN') {
+ div.replaceWith(...div.childNodes);
+ }
+ });
+
+ // ⚠️ 한글 조합이 분리되지 않도록 normalize() 적용하되 스타일 병합 방지
+ setTimeout(() => {
+ editor.normalize();
+ }, 100);
+}
+
+
+
+function toggleFontSizeToSelection(fontSize) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const fragment = range.extractContents(); // 선택된 내용을 추출
+
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(fragment.childNodes).forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ // 기존 요소라면 폰트 크기 스타일 추가
+ node.style.fontSize = fontSize;
+ wrapper.appendChild(node);
+ } else if (node.nodeType === Node.TEXT_NODE) {
+ // 텍스트 노드라면 새
태그로 감싸고 폰트 크기 적용
+ const span = document.createElement("span");
+ span.style.fontSize = fontSize;
+ span.textContent = node.textContent;
+ wrapper.appendChild(span);
+ }
+ });
+
+ // 선택된 영역에 새 내용 삽입
+ range.deleteContents();
+ range.insertNode(wrapper);
+ }
+}
+
+function applyColorWithoutAffectingStyles(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const ancestor = range.commonAncestorContainer;
+
+ // 선택된 범위 내의 텍스트 노드를 탐색
+ const walker = document.createTreeWalker(
+ ancestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ let currentNode;
+ while ((currentNode = walker.nextNode())) {
+ wrapTextNodeInFont(currentNode, color);
+ }
+ }
+}
+
+// 태그 대신 태그를 사용하도록 변경
+function wrapTextNodeInFont(textNode, color) {
+ const parent = textNode.parentNode;
+ // 이미 동일한 컬러가 적용된 span이 있으면 중복 방지
+ if (parent.tagName === 'SPAN' && parent.style.color === color) {
+ return;
+ }
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = textNode.nodeValue;
+ parent.replaceChild(span, textNode);
+}
+
+// 텍스트 노드를 태그로 감싸고 컬러 적용
+function wrapTextNodeInFontTag(textNode, color) {
+ wrapTextNodeInFont(textNode, color);
+}
+
+
+// 컬러를 적용하는 함수 (기존 스타일 처리와 동일한 방식)
+function applyStyleWithColor(styleProperty, value) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const commonAncestor = range.commonAncestorContainer;
+
+ // 선택된 텍스트에만 스타일 적용
+ const walker = document.createTreeWalker(
+ commonAncestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ let currentNode;
+ while ((currentNode = walker.nextNode())) {
+ wrapTextInStyle(currentNode, styleProperty, value);
+ }
+ }
+}
+
+function wrapTextInStyle(textNode, styleProperty, value) {
+ const parent = textNode.parentNode;
+
+ // 이미 동일한 스타일이 적용된 경우 처리하지 않음
+ if (parent.tagName === 'SPAN' && parent.style[styleProperty] === value) {
+ return;
+ }
+
+ const span = document.createElement('span');
+ span.style[styleProperty] = value;
+ span.textContent = textNode.nodeValue;
+
+ parent.replaceChild(span, textNode);
+}
+
+function applyColorWithoutDiv(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const commonAncestor = range.commonAncestorContainer;
+
+ // 모든 텍스트 노드를 포함한 범위 처리
+ const walker = document.createTreeWalker(
+ commonAncestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ // 선택된 범위에 포함된 텍스트 노드만 처리
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ const nodesToWrap = [];
+ let currentNode;
+
+ while ((currentNode = walker.nextNode())) {
+ nodesToWrap.push(currentNode);
+ }
+
+ nodesToWrap.forEach((node) => {
+ wrapTextNodeInSpanWithoutDiv(node, color);
+ });
+
+ // 선택 영역 삭제 및 새로운 노드 삽입
+ const newRange = document.createRange();
+ newRange.setStart(nodesToWrap[0], 0);
+ newRange.setEnd(nodesToWrap[nodesToWrap.length - 1], nodesToWrap[nodesToWrap.length - 1].length);
+
+ selection.removeAllRanges();
+ selection.addRange(newRange);
+ }
+}
+
+// 텍스트 노드를 으로 감싸고 div 생성을 방지
+function wrapTextNodeInSpanWithoutDiv(textNode, color) {
+ const parent = textNode.parentNode;
+
+ // 이미 동일한 이 적용되어 있는 경우 처리하지 않음
+ if (parent.tagName === 'SPAN' && parent.style.color === color) {
+ return;
+ }
+
+ const span = document.createElement('span');
+ span.style.color = color;
+
+ // 텍스트 노드를 으로 감싸기
+ span.textContent = textNode.nodeValue;
+ parent.replaceChild(span, textNode);
+}
+
+function applyColorToExactSelection(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+
+ // 선택한 범위를 분리
+ const startContainer = range.startContainer;
+ const endContainer = range.endContainer;
+
+ if (startContainer === endContainer && startContainer.nodeType === Node.TEXT_NODE) {
+ // 단일 텍스트 노드 선택인 경우
+ wrapPartialTextInSpan(range, color);
+ } else {
+ // 여러 노드가 선택된 경우
+ splitAndWrapRange(range, color);
+ }
+ }
+}
+
+function splitAndWrapRange(range, color) {
+ const commonAncestor = range.commonAncestorContainer;
+
+ // 선택된 범위 내의 노드를 추출하여 처리
+ const fragment = range.cloneContents();
+ const walker = document.createTreeWalker(
+ fragment,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let currentNode;
+ const nodesToWrap = [];
+ while ((currentNode = walker.nextNode())) {
+ nodesToWrap.push(currentNode);
+ }
+
+ // 선택된 텍스트를 각각 으로 감싸기
+ nodesToWrap.forEach((node) => {
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = node.textContent;
+
+ const parent = node.parentNode;
+ if (parent) {
+ parent.replaceChild(span, node);
+ }
+ });
+
+ // 선택 영역 삭제 및 새로운 노드 삽입
+ range.deleteContents();
+ range.insertNode(fragment);
+}
+
+// 단일 텍스트 노드의 선택된 부분을 으로 감싸기
+function wrapPartialTextInSpan(range, color) {
+ const text = range.toString();
+ if (!text.trim()) return;
+
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = text;
+
+ range.deleteContents(); // 선택된 텍스트 삭제
+ range.insertNode(span); // 삽입
+}
+
+// 텍스트 노드를 으로 감싸고 컬러 스타일 적용
+function wrapTextNodeInSpan(textNode, color) {
+ const parent = textNode.parentNode;
+
+ // 이미 으로 감싸져 있고 동일한 컬러인 경우 처리하지 않음
+ if (parent.tagName === 'SPAN' && parent.style.color === color) {
+ return;
+ }
+
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = textNode.textContent;
+
+ parent.replaceChild(span, textNode);
+}
+
+function applyColorToSelectionSafely(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const ancestor = range.commonAncestorContainer;
+
+ // 순회하며 모든 텍스트 노드에 컬러 적용
+ const walker = document.createTreeWalker(
+ ancestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ let currentNode;
+ const nodesToWrap = [];
+ while ((currentNode = walker.nextNode())) {
+ nodesToWrap.push(currentNode);
+ }
+
+ nodesToWrap.forEach((node) => {
+ wrapTextNodeInSpan(node, color);
+ });
+ }
+}
+
+function applyColorToMultipleBlocks(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const startContainer = range.startContainer;
+ const endContainer = range.endContainer;
+
+ if (startContainer !== endContainer) {
+ // 선택 영역이 여러 블록에 걸쳐 있는 경우 처리
+ handleMultiBlockSelection(range, color);
+ } else {
+ // 단일 블록 내에서 처리
+ applyColorToSelection(color);
+ }
+ }
+}
+
+function handleMultiBlockSelection(range, color) {
+ const startContainer = range.startContainer;
+ const endContainer = range.endContainer;
+
+ const ancestor = range.commonAncestorContainer;
+
+ // 순회하며 모든 텍스트 노드에 컬러 적용
+ const walker = document.createTreeWalker(
+ ancestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ const nodeRange = document.createRange();
+ nodeRange.selectNodeContents(node);
+
+ // 텍스트 노드가 선택 범위에 포함된 경우만 처리
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ let currentNode;
+ while ((currentNode = walker.nextNode())) {
+ wrapTextInSpan(currentNode, color);
+ }
+
+ // 선택 영역 정리
+ range.deleteContents();
+}
+
+// 텍스트 노드를 으로 감싸고 컬러 스타일 적용
+function wrapTextInSpan(textNode, color) {
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = textNode.textContent;
+
+ const parent = textNode.parentNode;
+ parent.replaceChild(span, textNode);
+}
+
+
+
+function applyColorWithSpan(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const fragment = range.extractContents(); // 선택된 내용을 추출
+
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(fragment.childNodes).forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ // 기존 요소를 으로 감싸기
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.appendChild(node.cloneNode(true));
+ wrapper.appendChild(span);
+ } else if (node.nodeType === Node.TEXT_NODE) {
+ // 텍스트 노드를 으로 감싸기
+ const span = document.createElement('span');
+ span.style.color = color;
+ span.textContent = node.textContent;
+ wrapper.appendChild(span);
+ }
+ });
+
+ range.deleteContents(); // 기존 내용을 삭제
+ range.insertNode(wrapper); // 새로 생성한 내용 삽입
+ }
+}
+
+// 선택된 텍스트에 컬러를 적용하는 함수
+function applyColorToSelection(color) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0); // 선택된 범위 가져오기
+ const commonAncestor = range.commonAncestorContainer;
+
+ // 모든 텍스트 노드를 포함한 범위 처리
+ const walker = document.createTreeWalker(
+ commonAncestor,
+ NodeFilter.SHOW_TEXT, {
+ acceptNode: (node) => {
+ // 선택된 범위에 포함된 텍스트 노드만 처리
+ return range.intersectsNode(node) ?
+ NodeFilter.FILTER_ACCEPT :
+ NodeFilter.FILTER_REJECT;
+ },
+ }
+ );
+
+ let currentNode;
+ const nodesToWrap = [];
+ while ((currentNode = walker.nextNode())) {
+ nodesToWrap.push(currentNode);
+ }
+
+ // 모든 텍스트 노드에 태그 추가
+ nodesToWrap.forEach((node) => {
+ wrapNodeInSpan(node, color);
+ });
+
+ // 선택 영역 복원
+ restoreSelection();
+ }
+}
+
+function wrapNodeInSpan(node, color) {
+ const parent = node.parentNode;
+
+ // 이미 동일한 이 적용되어 있는 경우 처리하지 않음
+ if (parent.tagName === 'SPAN' && parent.style.color === color) {
+ return;
+ }
+
+ const span = document.createElement('span');
+ span.style.color = color;
+
+ if (node.nodeType === Node.TEXT_NODE) {
+ span.textContent = node.textContent; // 텍스트 노드 복사
+ } else {
+ span.innerHTML = node.outerHTML; // 요소 노드 복사
+ }
+
+ parent.replaceChild(span, node);
+}
+
+function normalizeSpans() {
+ $('#editor span').each(function () {
+ const $this = $(this);
+ const parent = $this.parent();
+
+ // 부모가 이고, 스타일이 동일하면 병합
+ if (parent.is('span') && parent.css('color') === $this.css('color')) {
+ $this.contents().unwrap(); // 현재 을 제거하고 부모로 병합
+ }
+ });
+}
+
+function applyFontTagWithColor(color) {
+ document.execCommand('styleWithCSS', false, false); // CSS 스타일 대신 태그 사용
+ document.execCommand('foreColor', false, color); // 컬러 적용
+}
+function applyColorWithExecCommand(color) {
+ // 컬러 변경 명령 실행
+ document.execCommand('foreColor', false, color);
+
+ // #editor 영역 내의 모든 태그를 찾아 으로 변경
+ $('#editor font').each(function () {
+ const $font = $(this);
+ // 태그의 color 속성을 읽음
+ let fontColor = $font.attr('color') || $font.css('color');
+
+ // 새 태그 생성 후 스타일과 내용을 복사
+ const $span = $('').css('color', fontColor).html($font.html());
+
+ // 태그를 새 태그로 교체
+ $font.replaceWith($span);
+ });
+}
+
+// 컬러 선택 후 텍스트에 색상 적용
+$('#text-color-picker').on('input', function () {
+ const selectedColor = $(this).val(); // 선택된 색상 값
+ $('#color-btn .color-btn-svg path.path2_color1').attr('fill', selectedColor); // SVG의 fill 속성 업데이트
+ $('#color-btn .color-btn-svg path.path2_color2').attr('fill', selectedColor); // SVG의 fill 속성 업데이트
+ restoreSelection(); // 선택 영역 복원
+ applyTextColor(selectedColor); // 컬러 변경
+ saveSelection(); // 선택 영역 다시 저장
+});
+
+$('#background-color-picker').on('input', function () {
+ const selectedBgColor = $(this).val();
+ restoreSelection();
+ //applyBackgroundColor(selectedBgColor);
+ applyBackgroundColorNoBreaking(selectedBgColor);
+
+ // 선택된 컬러를 SVG 등에 업데이트
+ $('#background-color-btn .background-color-btn-svg path').attr('fill', selectedBgColor);
+ saveSelection();
+});
+
+
+// 컬러 버튼 클릭 시 선택 영역 저장
+$('#color-btn').on('mousedown', function (e) {
+ saveSelection(); // 선택 영역 저장
+ e.preventDefault(); // 기본 동작 방지
+});
+
+// 텍스트 선택 후 컬러 버튼 클릭 시 Coloris 활성화
+$('#color-btn').click(function (e) {
+ e.preventDefault(); // 기본 동작 방지
+ saveSelection(); // 선택 영역 저장
+ $('#text-color-picker').click(); // 컬러 선택기 활성화
+});
+
+// 텍스트 선택 후 백그라운드 버튼 클릭 시 Coloris 활성화
+$('#background-color-btn').click(function (e) {
+ e.preventDefault(); // 기본 동작 방지
+ saveSelection(); // 선택 영역 저장
+ $('#background-color-picker').click(); // 컬러 선택기 활성화
+});
+
+
+function applyTextColor(color) {
+ if (currentMode === 'regular') {
+ if (savedSelection) {
+ const sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(savedSelection);
+ }
+ document.execCommand('foreColor', false, color);
+ updateMiniToolbar();
+ // #mini-toolbar는 숨기지 않음
+ } else if (currentMode === 'canvas') {
+ applyCanvasTextColor(color);
+ }
+}
+
+function applyBackgroundColorNoBreaking(color) {
+ const selection = window.getSelection();
+ if (!selection.rangeCount || selection.isCollapsed) return;
+
+ // 현재 선택 범위 가져오기
+ const range = selection.getRangeAt(0);
+ const startContainer = range.startContainer;
+ const endContainer = range.endContainer;
+
+ // ✅ 두 줄 이상 선택한 경우 기존 로직 사용
+ if (startContainer !== endContainer) {
+ const textNodes = getTextNodesInRange(range);
+ textNodes.forEach(node => highlightTextNodePartially(node, range, color));
+ return;
+ }
+
+ // ✅ 한 줄 부분 선택인 경우 일반적인 스타일 적용 방식 사용
+ applyStyleToSelection("backgroundColor", color);
+}
+
+function highlightTextNodePartially(textNode, selectionRange, color) {
+ if (!textNode || textNode.nodeType !== Node.TEXT_NODE) return;
+
+ const nodeRange = document.createRange();
+ nodeRange.selectNodeContents(textNode);
+
+ const intersectionRange = nodeRange.cloneRange();
+
+ if (selectionRange.compareBoundaryPoints(Range.START_TO_START, nodeRange) > 0) {
+ intersectionRange.setStart(selectionRange.startContainer, selectionRange.startOffset);
+ }
+ if (selectionRange.compareBoundaryPoints(Range.END_TO_END, nodeRange) < 0) {
+ intersectionRange.setEnd(selectionRange.endContainer, selectionRange.endOffset);
+ }
+
+ const selectedText = intersectionRange.toString();
+ if (!selectedText.trim()) return;
+
+ const startOffsetInNode = intersectionRange.startOffset - nodeRange.startOffset;
+ const endOffsetInNode = intersectionRange.endOffset - nodeRange.startOffset;
+
+ const originalText = textNode.nodeValue;
+ const beforeText = originalText.slice(0, startOffsetInNode);
+ const middleText = originalText.slice(startOffsetInNode, endOffsetInNode);
+ const afterText = originalText.slice(endOffsetInNode);
+
+ let highlightSpan;
+ if (textNode.parentNode.tagName === 'SPAN') {
+ highlightSpan = textNode.parentNode.cloneNode();
+ highlightSpan.style.backgroundColor = color;
+ } else {
+ highlightSpan = document.createElement('span');
+ highlightSpan.style.backgroundColor = color;
+ }
+
+ highlightSpan.textContent = middleText;
+
+ const parent = textNode.parentNode;
+ if (!parent) return;
+
+ const fragment = document.createDocumentFragment();
+
+ if (beforeText) {
+ fragment.appendChild(document.createTextNode(beforeText));
+ }
+ fragment.appendChild(highlightSpan);
+ if (afterText) {
+ fragment.appendChild(document.createTextNode(afterText));
+ }
+
+ parent.replaceChild(fragment, textNode);
+}
+
+
+function getTextNodesInRange(range) {
+ const container = range.commonAncestorContainer;
+ const textNodes = [];
+
+ const walker = document.createTreeWalker(
+ container,
+ NodeFilter.SHOW_TEXT,
+ {
+ acceptNode: (node) => {
+ return range.intersectsNode(node)
+ ? NodeFilter.FILTER_ACCEPT
+ : NodeFilter.FILTER_REJECT;
+ }
+ }
+ );
+
+ while (walker.nextNode()) {
+ textNodes.push(walker.currentNode);
+ }
+ return textNodes;
+}
+
+function mergeBackgroundSpans(editor) {
+ $(editor).find('span').each(function () {
+ const $span = $(this);
+
+ // 부모가 span이고 스타일이 같으면 병합
+ const parent = $span.parent();
+ if (parent.is('span') && parent.css('background-color') === $span.css('background-color')) {
+ $span.contents().unwrap(); // span 병합
+ }
+
+ // 빈 span 제거
+ if ($span.text().trim() === '' && $span.children().length === 0) {
+ $span.remove();
+ }
+ });
+}
+
+function applyBackgroundColor(color) {
+ if (savedSelection) {
+ const sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(savedSelection);
+ }
+
+ const selection = window.getSelection();
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const commonAncestor = range.commonAncestorContainer;
+
+ // ✅ 드래그로 여러 개의 ``, ` | `가 선택된 경우 처리
+ const selectedCells = getSelectedCells(range);
+
+ if (selectedCells.length > 0) {
+ selectedCells.forEach(cell => {
+ applyBackgroundToCell(cell, color);
+ });
+ } else {
+ // ✅ 단일 선택일 경우 기존 로직 사용
+ let targetElement = commonAncestor.nodeType === Node.ELEMENT_NODE ? commonAncestor : commonAncestor.parentElement;
+
+ if (targetElement.tagName === 'TD' || targetElement.tagName === 'TH') {
+ applyBackgroundToCell(targetElement, color);
+ } else {
+ wrapTextWithSpan(range, color);
+ }
+ }
+ }
+ updateMiniToolbar();
+}
+
+// ✅ 선택된 ` | `, ` | ` 목록 가져오기
+function getSelectedCells(range) {
+ const selectedCells = [];
+ const ancestor = range.commonAncestorContainer;
+ const table = ancestor.closest ? ancestor.closest('table') : null;
+
+ if (table) {
+ const allCells = table.querySelectorAll('td, th');
+ allCells.forEach(cell => {
+ if (range.intersectsNode(cell)) {
+ selectedCells.push(cell);
+ }
+ });
+ }
+ return selectedCells;
+}
+
+// ✅ 개별 ` | ` 또는 ` | ` 내부의 텍스트에만 배경색 적용
+function applyBackgroundToCell(cell, color) {
+ // 기존 `span`이 있는지 확인하고 스타일 변경
+ let existingSpan = cell.querySelector('span');
+
+ if (existingSpan) {
+ existingSpan.style.backgroundColor = color;
+ } else {
+ // 기존 `span`이 없으면 내부 텍스트를 `span`으로 감싸기
+ cell.childNodes.forEach((node) => {
+ if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
+ const span = document.createElement("span");
+ span.style.backgroundColor = color;
+ span.textContent = node.nodeValue;
+ node.replaceWith(span);
+ }
+ });
+ }
+}
+
+
+// 선택한 텍스트를 개별적으로 감싸서 스타일 적용하는 함수
+function wrapTextWithSpan(range, color) {
+ const span = document.createElement("span");
+ span.style.backgroundColor = color;
+
+ // 선택한 내용을 가져옴
+ const selectedContents = range.extractContents();
+
+ // 선택한 텍스트를 감싸서 배경색 적용
+ span.appendChild(selectedContents);
+
+ // 기존 내용을 삭제하고 새로 추가
+ range.deleteContents();
+ range.insertNode(span);
+}
+
+
+
+function applyFontSize(fontSize) {
+ const selection = window.getSelection();
+ if (!selection.rangeCount || selection.isCollapsed) return;
+
+ const range = selection.getRangeAt(0);
+
+ // 시작/끝 컨테이너가 텍스트 노드라면 부모 요소로 변경
+ const startContainer =
+ range.startContainer.nodeType === Node.TEXT_NODE
+ ? range.startContainer.parentElement
+ : range.startContainer;
+ const endContainer =
+ range.endContainer.nodeType === Node.TEXT_NODE
+ ? range.endContainer.parentElement
+ : range.endContainer;
+
+ // 시작과 끝이 각각 td 또는 th 내부에 있는지 확인
+ const startCell =
+ startContainer.closest && startContainer.closest("td, th");
+ const endCell =
+ endContainer.closest && endContainer.closest("td, th");
+
+ // 두 셀 모두 존재하고, 같은 테이블에 속해 있다면
+ if (
+ startCell &&
+ endCell &&
+ startCell.closest("table") === endCell.closest("table")
+ ) {
+ // 테이블 내 모든 셀 중 선택 영역과 교차하는 셀에 대해 스타일 적용
+ const table = startCell.closest("table");
+ const cells = table.querySelectorAll("td, th");
+
+ cells.forEach((cell) => {
+ // Range API의 intersectsNode 메서드를 사용하여
+ // 해당 셀과 선택 영역이 겹치는지 검사
+ if (range.intersectsNode(cell)) {
+ cell.style.fontSize = fontSize;
+ }
+ });
+ return;
+ }
+
+ // 테이블 셀 내부가 아닌 경우 – 기존 로직대로 선택 영역 내부의 텍스트/요소에 span 등을 삽입하여 폰트 크기 적용
+ const extractedContents = range.extractContents();
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(extractedContents.childNodes).forEach((node) => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ // 텍스트 노드인 경우 새로운 span으로 감싸서 적용
+ const span = document.createElement("span");
+ span.style.fontSize = fontSize;
+ span.textContent = node.textContent;
+ wrapper.appendChild(span);
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ // 요소 노드인 경우 style만 변경
+ node.style.fontSize = fontSize;
+ wrapper.appendChild(node);
+ }
+ });
+
+ range.insertNode(wrapper);
+ // 편집 영역(normalize)에서 불필요한 텍스트 노드 분리(한글 초성 분리 방지)
+ document.getElementById("editor").normalize();
+}
+
+
+// ✅ `td`, `th` 내부에서 폰트 크기 변경 (새로운 ` | `, ` | ` 생성 방지)
+function applyFontSizeInsideTable(fontSize, $currentCell) {
+ const selection = window.getSelection();
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const selectedNodes = [];
+
+ const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, null);
+ let currentNode;
+
+ while ((currentNode = walker.nextNode())) {
+ if (selection.containsNode(currentNode, true)) {
+ selectedNodes.push(currentNode);
+ }
+ }
+
+ function applyStyleToSelection(node) {
+ if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+ let parent = node.parentNode;
+
+ // ✅ `td`, `th` 자체가 아니라 내부 텍스트에만 스타일 적용
+ if ($currentCell[0] === parent) {
+ const span = document.createElement("span");
+ span.style.fontSize = fontSize;
+ span.textContent = node.textContent;
+ parent.replaceChild(span, node);
+ } else if (parent.tagName === "SPAN") {
+ parent.style.fontSize = fontSize;
+ } else {
+ const span = document.createElement("span");
+ span.style.fontSize = fontSize;
+ span.appendChild(node.cloneNode(true));
+ parent.replaceChild(span, node);
+ }
+ }
+ }
+
+ selectedNodes.forEach(applyStyleToSelection);
+ }
+}
+
+// ✅ `td`, `th` 외부 또는 `td`, `th` 내부의 텍스트에서 폰트 크기 변경 (새로운 `` 추가)
+function applyFontSizeOutsideTable(fontSize) {
+ const selection = window.getSelection();
+
+ if (selection.rangeCount > 0 && !selection.isCollapsed) {
+ const range = selection.getRangeAt(0);
+ const fragment = range.cloneContents(); // ✅ 기존 구조 유지
+
+ const wrapper = document.createDocumentFragment();
+
+ Array.from(fragment.childNodes).forEach((node) => {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ node.style.fontSize = fontSize;
+ wrapper.appendChild(node);
+ } else if (node.nodeType === Node.TEXT_NODE) {
+ const span = document.createElement("span");
+ span.style.fontSize = fontSize;
+ span.textContent = node.textContent;
+ wrapper.appendChild(span);
+ }
+ });
+
+ range.deleteContents();
+ range.insertNode(wrapper);
+ } else {
+ if (!$('#editor').text().trim()) {
+ $('#editor').css('font-size', fontSize);
+ }
+ }
+}
+
+function alignText(alignment) {
+ const selection = window.getSelection();
+ const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+ if (currentMode === 'regular') {
+ const $currentCell = $(selection.anchorNode).closest('td, th');
+
+ if ($currentCell.length) {
+ // 커서가 표 안에 있는 경우 해당 셀에만 정렬 적용
+ $currentCell.css('text-align', alignment);
+ } else {
+ // 커서가 표 밖에 있으면 전체 문서에 정렬 적용 (표는 제외)
+ $('#editor').children(':not(table)').css('text-align', alignment);
+ }
+ } else if (currentMode === 'canvas') {
+ const activeObject = fabricCanvas.getActiveObject();
+ if (!activeObject) return;
+
+ if (activeObject.type === 'i-text') {
+ activeObject.set('textAlign', alignment);
+ fabricCanvas.renderAll();
+ }
+ }
+
+ updateMiniToolbar();
+}
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/js/upload.js b/plugin/editor/rb.editor/js/upload.js
new file mode 100644
index 000000000..b250b0395
--- /dev/null
+++ b/plugin/editor/rb.editor/js/upload.js
@@ -0,0 +1,219 @@
+let uploadedImages = [];
+
+// 업로드 시 Nonce 값이 없으면 iframe에서 요청 후 대기
+async function uploadImage(file, options = { insert: true }) {
+ if (typeof file === 'string') {
+ // SVG 파일은 변환하지 않고 바로 업로드
+ if (file.endsWith(".svg")) {
+ //console.log("SVG 파일 감지:", file);
+ } else {
+ file = await convertImageUrlToFile(file);
+ }
+ }
+
+ if (!(file instanceof File)) {
+ //console.error("올바른 이미지 파일이 아닙니다:", file);
+ alert("이미지 파일을 선택해주세요.");
+ return;
+ }
+
+ if (!ed_nonce) {
+ ed_nonce = await requestNonceFromParent();
+ }
+
+ if (!ed_nonce) {
+ alert("보안 토큰이 유효하지 않습니다. 새로고침 후 다시 시도해주세요.");
+ return;
+ }
+
+ // ✅ 로딩 오버레이 표시
+ const loadingOverlay = document.querySelector('.loadingOverlay.loadingOverlay_ai');
+ if (loadingOverlay) {
+ loadingOverlay.style.display = 'block';
+ }
+
+ const formData = new FormData();
+ formData.append("file", file);
+ formData.append("editor_nonce", ed_nonce);
+
+ return new Promise((resolve, reject) => {
+ $.ajax({
+ url: g5Config.g5_editor_url + "/php/rb.upload.php",
+ type: "POST",
+ data: formData,
+ contentType: false,
+ processData: false,
+ dataType: "json",
+ success: function (response) {
+ if (response.files && response.files[0] && response.files[0].url) {
+ let imageUrl = response.files[0].url;
+
+ // 업로드 성공 후 로딩 숨김
+ if (loadingOverlay) {
+ loadingOverlay.style.display = 'none';
+ }
+
+ // SVG 업로드 후 처리
+ //console.log("업로드 성공:", imageUrl);
+
+ // 일반 첨부용일 때만 insertImage() 호출
+ if (options.insert) {
+ insertImage(imageUrl);
+ }
+ resolve(imageUrl);
+ } else {
+ alert("이미지 업로드에 실패 하였습니다.");
+ reject("이미지 업로드에 실패 하였습니다");
+ }
+ },
+ error: function (error) {
+ console.error("이미지 업로드 실패:", error);
+ reject(error);
+ },
+ complete: function () {
+ // ✅ 업로드가 끝나면 무조건 로딩 숨김
+ if (loadingOverlay) {
+ loadingOverlay.style.display = 'none';
+ }
+ }
+ });
+ });
+}
+
+
+
+
+$('#editor').on('dragover', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).addClass('dragover');
+});
+
+$('#editor').on('dragleave', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).removeClass('dragover');
+});
+
+$('#editor').on('drop', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ $(this).removeClass('dragover');
+
+ const files = e.originalEvent.dataTransfer.files;
+ if (!files.length) return;
+
+ for (let i = 0; i < files.length; i++) {
+ uploadImage(files[i]);
+ }
+});
+
+// 파일 선택 이미지 업로드 (input[type="file"])
+$('#image-upload').change(function (event) {
+ const files = event.target.files;
+ if (!files.length) return;
+
+ for (let i = 0; i < files.length; i++) {
+ uploadImage(files[i]);
+ }
+
+ $('#image-upload').val('');
+});
+
+function insertImage(imageUrl) {
+ const img = document.createElement('img');
+ img.src = imageUrl;
+ img.alt = "Uploaded Image";
+ img.crossOrigin = "anonymous";
+ img.draggable = false; // 드래그 방지
+ img.style.width = '100%'; // 가로는 부모 요소에 맞춤
+
+ img.onload = function () {
+ // 이미지의 원본 크기
+ const imgWidth = img.naturalWidth;
+ const imgHeight = img.naturalHeight;
+ // data‑ratio는 이미지의 원본 높이/원본 너비
+ const ratio = imgHeight / imgWidth;
+
+ const editor = document.getElementById('editor');
+ const editorWidth = editor.offsetWidth; // 에디터의 가로 크기
+
+ // .resizable_wrap 생성
+ const wrap = document.createElement('div');
+ wrap.classList.add('resizable_wrap');
+
+ // .resizable div 생성
+ const wrapper = document.createElement('div');
+ wrapper.classList.add('resizable');
+
+ // 에디터보다 클 경우 100%, 작으면 원본 크기 사용하여 width 설정
+ if (imgWidth > editorWidth) {
+ wrapper.style.width = '100%';
+ } else {
+ wrapper.style.width = `${imgWidth}px`;
+ }
+ // 원본 크기를 data 속성에 저장 (항상 갱신)
+ wrapper.dataset.originalWidth = imgWidth;
+ wrapper.dataset.originalHeight = imgHeight;
+ wrapper.dataset.ratio = ratio;
+
+ // 초기 높이 계산 (현재 width에 data‑ratio를 곱함)
+ wrapper.style.height = `${wrapper.offsetWidth * ratio}px`;
+
+ // 크기 조절 핸들 추가
+ const resizeHandle = document.createElement('div');
+ resizeHandle.classList.add('resize-handle');
+
+ // 이미지와 핸들 추가
+ wrapper.appendChild(img);
+ wrapper.appendChild(resizeHandle);
+ wrap.appendChild(wrapper);
+
+ // 줄바꿈용
추가
+ const paragraph = document.createElement('p');
+ paragraph.appendChild(document.createElement('br'));
+
+ // 현재 커서 위치 확인 후 에디터 내 삽입
+ const selection = window.getSelection();
+ const range = selection.rangeCount ? selection.getRangeAt(0) : null;
+
+ if (range) {
+ let container = range.commonAncestorContainer;
+ if (container.nodeType === Node.TEXT_NODE) {
+ container = container.parentElement;
+ }
+ if ($(container).closest('#editor').length) {
+ range.deleteContents();
+ range.insertNode(wrap);
+ wrap.parentNode.insertBefore(paragraph, wrap.nextSibling);
+ range.setStart(paragraph, 0);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ } else {
+ editor.appendChild(wrap);
+ editor.appendChild(paragraph);
+ }
+ } else {
+ editor.appendChild(wrap);
+ editor.appendChild(paragraph);
+ }
+
+ // 갱신: 현재 wrapper의 높이를 data‑ratio에 따라 재계산
+ wrapper.style.height = `${wrapper.offsetWidth * ratio}px`;
+
+ // 창 크기가 변경될 때 높이 업데이트
+ function updateHeight() {
+ const currentWidth = wrapper.offsetWidth;
+ const originalWidth = parseFloat(wrapper.dataset.originalWidth) || currentWidth;
+ const originalHeight = parseFloat(wrapper.dataset.originalHeight) || currentWidth * ratio;
+ const originalRatio = parseFloat(wrapper.dataset.ratio) || (originalHeight / originalWidth);
+
+ wrapper.style.height = `${currentWidth * originalRatio}px`;
+ }
+ window.addEventListener("resize", updateHeight);
+
+ // 크기 조절 기능 활성화 (이 함수 내에서 리사이즈 후에도 data‑속성이 갱신되도록 구현 가능)
+ makeImageResizableWithObserver($(wrapper));
+ };
+}
diff --git a/plugin/editor/rb.editor/php/_common.php b/plugin/editor/rb.editor/php/_common.php
new file mode 100644
index 000000000..da78d2798
--- /dev/null
+++ b/plugin/editor/rb.editor/php/_common.php
@@ -0,0 +1,2 @@
+ "파일 경로가 제공되지 않았습니다."]);
+ exit;
+}
+
+// 업로드된 파일 경로에서 /data/editor/YYYY/MM/ 추출
+$pattern = "#/data/editor/(\d{4})/([\w\d_-]+\.\w+)$#"; // 2502/파일명.확장자 패턴
+if (!preg_match($pattern, $file_url, $matches)) {
+ echo json_encode(["error" => "잘못된 파일 경로 형식입니다."]);
+ exit;
+}
+
+$ym = $matches[1]; // 2502 (연월)
+$file_name = $matches[2]; // 1738844872_c13aee53489a52b7_...png
+
+// 업로드된 디렉토리 경로
+$data_dir = G5_DATA_PATH . "/editor/" . $ym . "/";
+$file_path = $data_dir . $file_name;
+
+// 파일 존재 여부 확인 후 삭제
+if (file_exists($file_path)) {
+ unlink($file_path);
+ echo json_encode(["success" => "파일이 삭제되었습니다.", "file" => $file_name]);
+} else {
+ echo json_encode(["error" => "파일을 찾을 수 없습니다."]);
+}
+?>
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/php/rb.fonts.php b/plugin/editor/rb.editor/php/rb.fonts.php
new file mode 100644
index 000000000..64e10d88b
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.fonts.php
@@ -0,0 +1,18 @@
+ array_values($folders)]);
+} else {
+ echo json_encode(["error" => "폰트없음"]);
+}
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/php/rb.image_proxy.php b/plugin/editor/rb.editor/php/rb.image_proxy.php
new file mode 100644
index 000000000..c513edf65
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.image_proxy.php
@@ -0,0 +1,50 @@
+
diff --git a/plugin/editor/rb.editor/php/rb.metadata.php b/plugin/editor/rb.editor/php/rb.metadata.php
new file mode 100644
index 000000000..432112e72
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.metadata.php
@@ -0,0 +1,143 @@
+ 'CURL 기능이 서버에서 지원되지 않습니다.'];
+ }
+
+ $ch = curl_init($url);
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+ curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+ curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
+ curl_setopt($ch, CURLOPT_TIMEOUT, 15);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+
+ curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36');
+ curl_setopt($ch, CURLOPT_HTTPHEADER, [
+ 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
+ 'Referer: https://www.google.com/',
+ 'Upgrade-Insecure-Requests: 1'
+ ]);
+
+ $data = curl_exec($ch);
+ $contentType = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
+
+ if (curl_errno($ch)) {
+ $error_msg = curl_error($ch);
+ curl_close($ch);
+ return ['error' => 'CURL 에러: ' . $error_msg];
+ }
+
+ curl_close($ch);
+ return ['html' => $data, 'content_type' => $contentType];
+}
+
+if (isset($_GET['url'])) {
+ $url = $_GET['url'];
+
+ if (preg_match('/\.(jpg|jpeg|png|gif|webp|svg)$/i', $url)) {
+ echo json_encode(['title' => 'Image', 'meta' => ['og:image' => $url]], JSON_UNESCAPED_UNICODE);
+ exit;
+ }
+
+ $result = curl_get_contents($url);
+ if (isset($result['error'])) {
+ echo json_encode(['error' => $result['error']], JSON_UNESCAPED_UNICODE);
+ exit;
+ }
+
+ $html = $result['html'];
+ $contentType = $result['content_type'];
+
+ if (!$html) {
+ echo json_encode(['error' => '데이터를 가져오지 못했습니다.'], JSON_UNESCAPED_UNICODE);
+ exit;
+ }
+
+ preg_match('/]+)/i', $html, $matches);
+ $htmlCharset = isset($matches[1]) ? strtolower($matches[1]) : 'utf-8';
+
+ if (isFunctionAvailable('mb_detect_encoding')) {
+ $detectedEncoding = mb_detect_encoding($html, ['UTF-8', 'EUC-KR', 'SJIS', 'ISO-8859-1', 'CP949'], true);
+ } else {
+ $detectedEncoding = false;
+ }
+
+ if (isFunctionAvailable('mb_convert_encoding')) {
+ if ($detectedEncoding && $detectedEncoding !== 'UTF-8') {
+ $html = mb_convert_encoding($html, 'UTF-8', $detectedEncoding);
+ } elseif ($htmlCharset !== 'utf-8' && $htmlCharset !== '') {
+ $html = mb_convert_encoding($html, 'UTF-8', strtoupper($htmlCharset));
+ }
+ }
+
+ if (!class_exists('DOMDocument')) {
+ echo json_encode(['error' => 'DOMDocument 확장이 필요합니다.'], JSON_UNESCAPED_UNICODE);
+ exit;
+ }
+
+ $dom = new DOMDocument();
+ @$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
+ $metas = $dom->getElementsByTagName('meta');
+ $metaData = [];
+
+ foreach ($metas as $meta) {
+ $name = $meta->getAttribute('name');
+ if (!$name) {
+ $name = $meta->getAttribute('property');
+ }
+ $content = $meta->getAttribute('content');
+ if ($name && $content) {
+ $metaData[$name] = $content;
+ }
+ }
+
+ // ✅ og:image가 없으면 첫 번째 ![]() 태그의 src를 가져옴
+ if (!isset($metaData['og:image'])) {
+ $imgTags = $dom->getElementsByTagName('img');
+ $firstImage = null;
+
+ foreach ($imgTags as $img) {
+ $src = $img->getAttribute('src');
+ if (!$src) continue;
+
+ if (!preg_match('/^https?:\/\//', $src)) {
+ $parsedUrl = parse_url($url);
+ $base = $parsedUrl['scheme'] . '://' . $parsedUrl['host'];
+ if (isset($parsedUrl['port'])) {
+ $base .= ':' . $parsedUrl['port'];
+ }
+ $src = $base . (substr($src, 0, 1) === '/' ? '' : '/') . $src;
+ }
+
+ $firstImage = $src;
+ break;
+ }
+
+ if ($firstImage) {
+ $metaData['og:image'] = $firstImage;
+ }
+ }
+
+ // ✅ 태그 가져오기
+ $titleElement = $dom->getElementsByTagName('title')->item(0);
+ $title = $titleElement ? trim($titleElement->nodeValue) : '';
+
+ $response = [
+ 'title' => $title,
+ 'meta' => $metaData
+ ];
+
+ echo json_encode($response, JSON_UNESCAPED_UNICODE);
+} else {
+ echo json_encode(['error' => 'URL 파라미터가 필요합니다.'], JSON_UNESCAPED_UNICODE);
+}
+?>
diff --git a/plugin/editor/rb.editor/php/rb.metadata_proxy.php b/plugin/editor/rb.editor/php/rb.metadata_proxy.php
new file mode 100644
index 000000000..46fd22eee
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.metadata_proxy.php
@@ -0,0 +1,20 @@
+<?php
+include_once("./_common.php");
+header('Content-Type: application/json');
+
+$data = json_decode(file_get_contents('php://input'), true);
+$url = $data['url'];
+
+if (!$url) {
+ echo json_encode(['error' => 'Invalid URL']);
+ exit;
+}
+
+$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];
+
+// 🛠️ 실제 메타데이터 스크래핑을 수행하는 파일 호출
+$metadata_url = $editor_url.'/php/rb.metadata.php?url=' . urlencode($url);
+
+$response = file_get_contents($metadata_url);
+echo $response;
+?>
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/php/rb.paste_image_proxy.php b/plugin/editor/rb.editor/php/rb.paste_image_proxy.php
new file mode 100644
index 000000000..996fa601a
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.paste_image_proxy.php
@@ -0,0 +1,54 @@
+<?php
+// CORS 허용
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Methods: GET");
+header("Access-Control-Allow-Headers: Content-Type");
+
+// 요청된 이미지 URL 가져오기
+if (!isset($_GET['url'])) {
+ http_response_code(400);
+ echo "URL이 잘못 되었습니다.";
+ exit;
+}
+
+$image_url = filter_var($_GET['url'], FILTER_SANITIZE_URL);
+
+// URL 유효성 검사
+if (!filter_var($image_url, FILTER_VALIDATE_URL)) {
+ http_response_code(400);
+ echo "URL이 잘못 되었습니다.";
+ exit;
+}
+
+// CURL을 사용하여 이미지 다운로드
+$ch = curl_init();
+curl_setopt($ch, CURLOPT_URL, $image_url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+curl_setopt($ch, CURLOPT_TIMEOUT, 10);
+
+$image_data = curl_exec($ch);
+$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+$mime_type = curl_getinfo($ch, CURLINFO_CONTENT_TYPE);
+curl_close($ch);
+
+if ($http_code !== 200 || !$image_data) {
+ http_response_code(500);
+ echo "이미지 파일 저장에 실패 하였습니다.";
+ exit;
+}
+
+// 이미지 타입 허용 (JPG, PNG, WEBP, GIF만 허용)
+$allowed_types = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
+if (!in_array($mime_type, $allowed_types)) {
+ http_response_code(400);
+ echo "이미지 파일만 가능합니다.";
+ exit;
+}
+
+// 올바른 Content-Type 설정 후 출력
+header("Content-Type: " . $mime_type);
+echo $image_data;
+?>
diff --git a/plugin/editor/rb.editor/php/rb.sticker.php b/plugin/editor/rb.editor/php/rb.sticker.php
new file mode 100644
index 000000000..15e8500e8
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.sticker.php
@@ -0,0 +1,30 @@
+<?php
+include_once("./_common.php");
+$g5_editor = isset( $_GET['editor']) ? $_GET['editor'] : 'rb.editor';
+$baseDir = G5_PATH.'/plugin/editor/'.$g5_editor.'/image/sticker/';
+
+header('Content-Type: application/json');
+
+if (isset($_GET['folder'])) {
+ // 폴더의 파일 조회 (이미지 파일만)
+ $folder = preg_replace('/[^a-zA-Z0-9-_ ]/', '', $_GET['folder']); // 보안 필터링
+ $path = $baseDir . $folder;
+
+ if (is_dir($path)) {
+ $files = array_values(array_filter(scandir($path), function ($file) use ($path) {
+ return preg_match('/\.(png|jpe?g|gif|svg|webp)$/i', $file) && is_file("$path/$file");
+ }));
+
+ echo json_encode(["files" => $files]);
+ } else {
+ echo json_encode(["error" => "폴더가 존재하지 않습니다."]);
+ }
+} else {
+ // 전체 폴더 목록 조회
+ $folders = array_filter(glob($baseDir . '*'), 'is_dir');
+ $folderNames = array_map('basename', $folders);
+
+ echo json_encode(["folders" => $folderNames]);
+}
+
+?>
diff --git a/plugin/editor/rb.editor/php/rb.upload.php b/plugin/editor/rb.editor/php/rb.upload.php
new file mode 100644
index 000000000..eeef0d5fb
--- /dev/null
+++ b/plugin/editor/rb.editor/php/rb.upload.php
@@ -0,0 +1,83 @@
+<?php
+include_once("./_common.php");
+
+if (session_status() === PHP_SESSION_NONE) {
+ session_start();
+}
+
+// Nonce 관련 상수 정의 추가
+if (!defined('FT_NONCE_UNIQUE_KEY'))
+ define('FT_NONCE_UNIQUE_KEY', sha1($_SERVER['SERVER_SOFTWARE'] . G5_MYSQL_USER . session_id() . G5_TABLE_PREFIX));
+
+if (!defined('FT_NONCE_SESSION_KEY'))
+ define('FT_NONCE_SESSION_KEY', substr(md5(FT_NONCE_UNIQUE_KEY), 5));
+
+if (!defined('FT_NONCE_DURATION'))
+ define('FT_NONCE_DURATION', 60 * 60); // 1시간 유효
+
+if (!defined('FT_NONCE_KEY'))
+ define('FT_NONCE_KEY', '_nonce');
+
+// 세션에서 Nonce 값을 가져옴
+$session_nonce = isset($_SESSION['token_' . FT_NONCE_SESSION_KEY]) ? $_SESSION['token_' . FT_NONCE_SESSION_KEY] : '';
+
+// 업로드 시 전달된 Nonce 값
+$posted_nonce = isset($_POST['editor_nonce']) ? $_POST['editor_nonce'] : '';
+
+// Nonce 검증 로그 추가
+error_log("업로드 요청 Nonce 값: " . $posted_nonce);
+error_log("서버 세션 Nonce 값: " . $session_nonce);
+
+if (!$session_nonce || $posted_nonce !== $session_nonce) {
+ error_log("Nonce 불일치: 업로드된 nonce = " . $posted_nonce . " | 세션 nonce = " . $session_nonce);
+ echo json_encode(array("files" => array(array("error" => "잘못된 접근입니다. (Nonce 불일치)"))));
+ exit;
+}
+
+
+// 업로드 디렉토리 설정
+$ym = date('ym', G5_SERVER_TIME);
+$data_dir = G5_DATA_PATH . '/editor/' . $ym . '/';
+$data_url = G5_DATA_URL . '/editor/' . $ym . '/';
+
+// 디렉토리가 없으면 생성
+if (!is_dir($data_dir)) {
+ if (!@mkdir($data_dir, G5_DIR_PERMISSION, true)) {
+ error_log("업로드 디렉토리 생성 실패: " . $data_dir);
+ echo json_encode(array("files" => array(array("error" => "업로드 디렉토리 생성에 실패했습니다."))));
+ exit;
+ }
+ @chmod($data_dir, G5_DIR_PERMISSION);
+}
+
+// 파일 업로드 검증
+if (!isset($_FILES['file']) || $_FILES['file']['error'] !== UPLOAD_ERR_OK) {
+ error_log("파일 업로드 실패 (파일 정보 없음 또는 오류 코드 존재)");
+ echo json_encode(array("files" => array(array("error" => "파일 업로드에 실패했습니다."))));
+ exit;
+}
+
+// 파일 저장 처리
+$tempfile = $_FILES['file']['tmp_name'];
+$filename = time() . '_' . bin2hex(random_bytes(8)) . '_' . $_FILES['file']['name'];
+$savefile = $data_dir . $filename;
+
+if (!file_exists($tempfile)) {
+ error_log("임시 파일이 존재하지 않음: " . $tempfile);
+ echo json_encode(array("files" => array(array("error" => "임시 파일이 존재하지 않습니다."))));
+ exit;
+}
+
+if (!move_uploaded_file($tempfile, $savefile)) {
+ error_log("파일 저장 실패: " . $savefile);
+ echo json_encode(array("files" => array(array("error" => "파일 저장에 실패했습니다."))));
+ exit;
+}
+
+// 파일 권한 설정
+@chmod($savefile, G5_FILE_PERMISSION);
+
+// 업로드 성공 응답
+$file_url = $data_url . $filename;
+echo json_encode(array('files' => array(array('name' => $filename, 'url' => $file_url))));
+?>
diff --git a/plugin/editor/rb.editor/plugin/ai/_common.php b/plugin/editor/rb.editor/plugin/ai/_common.php
new file mode 100644
index 000000000..ae8f2d1c2
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/ai/_common.php
@@ -0,0 +1,2 @@
+<?php
+include_once("../../../../../common.php");
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/plugin/ai/ajax.generate.php b/plugin/editor/rb.editor/plugin/ai/ajax.generate.php
new file mode 100644
index 000000000..56e97a88d
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/ai/ajax.generate.php
@@ -0,0 +1,221 @@
+<?php
+include_once('./_common.php');
+
+// _common.php에서 출력된 내용 제거
+if (ob_get_length()) {
+ ob_clean();
+}
+
+header('Content-Type: application/json; charset=UTF-8');
+
+$userPrompt = trim(isset($_POST['prompt']) ? $_POST['prompt'] : '');
+$taskType = isset($_POST['taskType']) ? $_POST['taskType'] : 'image'; // 기본값: 이미지 생성
+
+$imageModels = [
+ //"prompthero/openjourney" //유료
+ //"stabilityai/stable-diffusion-1.5"
+ //"Linaqruf/anything-v5"
+ "stabilityai/stable-diffusion-xl-base-1.0" //무료 (분당 3회 요청, 불안정 할 수 있음)
+];
+
+// 퀄리티 보장을 위한 기본 프롬프트 mdjrny-v4,
+$defaultHighQualityPrompt = ", best quality, realistic, photorealistic, hyperrealism, ultra high res, masterpiece, 1, ";
+
+if ($taskType === 'image') {
+ $prompt = $userPrompt !== '' ? sprintf("%s, %s", $userPrompt, $defaultHighQualityPrompt) : $defaultHighQualityPrompt;
+} else {
+ $prompt = $userPrompt; // 텍스트 생성 시엔 프롬프트 그대로 사용
+ if (substr($prompt, -1) !== "\n") {
+ $prompt .= "\n";
+ }
+}
+
+if ($taskType === 'text') {
+
+ /* Gemini { */
+
+ // Google Gemini API 키 및 URL 설정
+ $apiKey = "";
+ $url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=" . $apiKey; // 1.5 Flash 모델 사용
+
+ /*
+ https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=
+ https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=
+
+ 1.5 flash : 분당 15회요청, 분당 100만개 토큰, 1일 1,500회요청 (한글 1자=1~1.5토큰)
+ 2.0 flash : 분당 10회요청, 1일 1,500회요청, 월 400만토큰 (한글 1자=1~1.5토큰)
+
+ //실험용 모델
+ gemini-2.0-pro-exp-02-05 (Gemini 2.0 Pro기반)
+ gemini-2.0-flash-thinking-exp-01-21 (Gemini 2.0 Flash Thinking기반)
+ learnlm-1.5-pro-experimental (LearnLM 1.5 Pro 기반)
+ */
+
+ // 요청 페이로드 구성
+ $userPrompt .= " (한글기준 약 600자를 넘지않도록 답변해줘, 그리고 600자 이내로 요약해 드릴게요! 와 같은 말은 쓰지말아줘)";
+
+ $data = [
+ "contents" => [
+ [
+ "parts" => [
+ ["text" => $userPrompt]
+ ]
+ ]
+ ],
+ "generationConfig" => [
+ "temperature" => 0.7,
+ "topK" => 40,
+ "topP" => 0.85,
+ "maxOutputTokens" => 1024
+ ]
+ ];
+
+ // cURL 요청 설정
+ $ch = curl_init($url);
+ curl_setopt($ch, CURLOPT_POST, true);
+ curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+ curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
+ curl_setopt($ch, CURLOPT_TIMEOUT, 30);
+ curl_setopt($ch, CURLOPT_NOSIGNAL, 1);
+
+ $response = curl_exec($ch);
+ $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+ $curlError = curl_error($ch);
+ curl_close($ch);
+
+ // 에러 처리
+ if ($httpCode !== 200) {
+ echo json_encode([
+ "error" => "잠시 후 다시 시도해주세요.",
+ //"http_code" => $httpCode,
+ //"curl_error" => $curlError,
+ //"response" => $response
+ ]);
+ exit;
+ }
+
+ // 응답 데이터 파싱
+ $responseArray = json_decode($response, true);
+ if (!empty($responseArray["candidates"][0]["content"]["parts"][0]["text"])) {
+ $generatedText = $responseArray["candidates"][0]["content"]["parts"][0]["text"];
+ } else {
+ echo json_encode([
+ "error" => "잠시 후 다시 시도해주세요."
+ //"response" => $response
+ ]);
+ exit;
+ }
+
+ function removeEmojis($text) {
+ // 정규식 패턴: 이모지 및 일부 특수 기호를 필터링
+ $emojiPattern = '/[\x{1F600}-\x{1F64F}]|' . // 이모지 (스마일리, 사람)
+ '[\x{1F300}-\x{1F5FF}]|' . // 이모지 (기타 기호)
+ '[\x{1F680}-\x{1F6FF}]|' . // 이모지 (교통 및 지도 기호)
+ '[\x{1F700}-\x{1F77F}]|' . // 이모지 (기타 심볼)
+ '[\x{1F780}-\x{1F7FF}]|' . // 이모지 (기타 심볼)
+ '[\x{1F800}-\x{1F8FF}]|' . // 이모지 (기타 심볼)
+ '[\x{1F900}-\x{1F9FF}]|' . // 이모지 (기타 심볼)
+ '[\x{1FA00}-\x{1FA6F}]|' . // 이모지 (기타 심볼)
+ '[\x{2600}-\x{26FF}]|' . // 기타 심볼 및 화살표
+ '[\x{2700}-\x{27BF}]|' . // Dingbats
+ '[\x{FE0F}]|' . // Variation Selector
+ '[\x{200D}]|' . // Zero Width Joiner (ZJW)
+ '[\x{E0020}-\x{E007F}]|' . // 태그 문자
+ '[\x{E000}-\x{F8FF}]|' . // 개인 사용 영역 (일부 폰트의 사용자 정의 문자)
+ '[\x{1F1E6}-\x{1F1FF}]|' . // 국가 기호 플래그
+ '[\x{1F004}-\x{1F0CF}]|' . // 기타 기호
+ '[\x{1F18E}-\x{1F251}]/u'; // 기타 이모지 및 심볼
+
+ return preg_replace($emojiPattern, '', $text);
+ }
+
+ // 이모지를 제거한 후 반환
+ $generatedText = removeEmojis($generatedText);
+
+ $generatedText = preg_replace('/\*\*(.*?)\*\*/', '<b>$1</b>', $generatedText);
+ $generatedText = preg_replace('/<p>(.*?)<\/p>/s', '<div>$1</div>', $generatedText);
+ $generatedText = "<div>" . preg_replace('/\n+/', "</div><div>", $generatedText) . "</div>";
+
+ echo json_encode(["text" => $generatedText, "model" => "Gemini"]);
+ exit;
+ /* } */
+
+} else {
+ // https://huggingface.co/settings/tokens 토큰키 필요(Permissions:read 읽기원한)
+ $apiToken = "";
+ $retryLimit = 3;
+ $response = null;
+ $currentModel = null;
+
+ foreach ($imageModels as $model) {
+ $currentModel = $model;
+ $url = "https://api-inference.huggingface.co/models/" . $model;
+ $data = json_encode(array(
+ "inputs" => $prompt,
+ "parameters" => array(
+ "num_inference_steps" => 25,
+ "guidance_scale" => 7,
+ "width" => 768,
+ "height" => 512,
+ "num_images" => 1,
+ "seed" => rand(1, 1000000),
+ "negative_prompt" => "blurry, low quality, distorted, artifacts, unrealistic, frame, text"
+ )
+ ));
+ $acceptHeader = "Accept: image/png";
+
+ for ($attempt = 0; $attempt < $retryLimit; $attempt++) {
+ $ch = curl_init($url);
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+ curl_setopt($ch, CURLOPT_POST, true);
+ curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
+ curl_setopt($ch, CURLOPT_HTTPHEADER, array(
+ "Content-Type: application/json",
+ $acceptHeader,
+ "Authorization: Bearer " . $apiToken
+ ));
+ curl_setopt($ch, CURLOPT_TIMEOUT, 30);
+ curl_setopt($ch, CURLOPT_NOSIGNAL, 1);
+
+ $response = curl_exec($ch);
+ $curlError = curl_error($ch);
+ curl_close($ch);
+
+ if ($curlError) {
+ continue;
+ }
+ // 만약 응답이 JSON 형태라면 이미지 생성에 실패한 것으로 간주
+ if (substr($response, 0, 1) === '{') {
+ break;
+ }
+ // 이미지 데이터인 경우 루프 탈출
+ if (substr($response, 0, 1) !== '{') {
+ break;
+ }
+ }
+
+ if ($response) {
+ break;
+ }
+ }
+
+ if (!$response) {
+ echo json_encode(array("error" => "All models failed."));
+ exit;
+ }
+
+ // 만약 응답이 JSON 형태이면, 오류 메시지로 간주하고 텍스트 결과로 출력
+ if (substr($response, 0, 1) === '{') {
+ $jsonError = json_decode($response, true);
+ $errorMessage = isset($jsonError['error']) ? $jsonError['error'] : "Image generation failed.";
+ echo json_encode(array("text" => $errorMessage, "model" => $currentModel));
+ exit;
+ }
+
+ // 응답 데이터가 이미지 데이터라면 base64 인코딩하여 이미지로 출력
+ $base64Image = base64_encode($response);
+ echo json_encode(array("image" => $base64Image, "model" => $currentModel));
+ exit;
+}
+?>
diff --git a/plugin/editor/rb.editor/plugin/coloris/coloris.css b/plugin/editor/rb.editor/plugin/coloris/coloris.css
new file mode 100644
index 000000000..323f0bef6
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/coloris/coloris.css
@@ -0,0 +1,590 @@
+.clr-picker {
+ display: none;
+ flex-wrap: wrap;
+ position: absolute;
+ width: 200px;
+ z-index: 1000;
+ border-radius: 10px;
+ background-color: #fff;
+ justify-content: flex-end;
+ direction: ltr;
+ box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ top:45px !important;
+ left:-13px !important;
+}
+
+.clr-picker.clr-open,
+.clr-picker[data-inline="true"] {
+ display: flex;
+}
+
+.clr-picker[data-inline="true"] {
+ position: relative;
+}
+
+.clr-gradient {
+ position: relative;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 15px;
+ border-radius: 3px 3px 0 0;
+ background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
+ cursor: pointer;
+}
+
+.clr-marker {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ margin: -6px 0 0 -6px;
+ border: 1px solid #fff;
+ border-radius: 50%;
+ background-color: currentColor;
+ cursor: pointer;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 16px;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-thumb {
+ width: 16px;
+ height: 16px;
+ -webkit-appearance: none;
+}
+
+.clr-picker input[type="range"]::-moz-range-track {
+ width: 100%;
+ height: 16px;
+ border: 0;
+}
+
+.clr-picker input[type="range"]::-moz-range-thumb {
+ width: 16px;
+ height: 16px;
+ border: 0;
+}
+
+.clr-hue {
+ background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+}
+
+.clr-hue,
+.clr-alpha {
+ position: relative;
+ width: calc(100% - 40px);
+ height: 8px;
+ margin: 5px 20px;
+ border-radius: 4px;
+}
+
+.clr-alpha span {
+ display: block;
+ height: 100%;
+ width: 100%;
+ border-radius: inherit;
+ background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
+}
+
+.clr-hue input[type="range"],
+.clr-alpha input[type="range"] {
+ position: absolute;
+ width: calc(100% + 32px);
+ height: 16px;
+ left: -16px;
+ top: -4px;
+ margin: 0;
+ background-color: transparent;
+ opacity: 0;
+ cursor: pointer;
+ appearance: none;
+ -webkit-appearance: none;
+ z-index: 99;
+}
+
+.clr-hue div,
+.clr-alpha div {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ left: 0;
+ top: 50%;
+ margin-left: -8px;
+ transform: translateY(-50%);
+ border: 2px solid #fff;
+ border-radius: 50%;
+ background-color: currentColor;
+ box-shadow: 0 0 1px #888;
+ z-index: 2
+}
+
+.clr-alpha div:before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ border-radius: 50%;
+ background-color: currentColor;
+}
+
+.clr-format {
+ display: none;
+ order: 1;
+ width: calc(100% - 40px);
+ margin: 0 20px 20px;
+}
+
+.clr-segmented {
+ display: flex;
+ position: relative;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: 1px solid #ddd;
+ border-radius: 15px;
+ box-sizing: border-box;
+ color: #999;
+ font-size: 12px;
+}
+
+.clr-segmented input,
+.clr-segmented legend {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.clr-segmented label {
+ flex-grow: 1;
+ margin: 0;
+ padding: 4px 0;
+ font-size: inherit;
+ font-weight: normal;
+ line-height: initial;
+ text-align: center;
+ cursor: pointer;
+}
+
+.clr-segmented label:first-of-type {
+ border-radius: 10px 0 0 10px;
+}
+
+.clr-segmented label:last-of-type {
+ border-radius: 0 10px 10px 0;
+}
+
+.clr-segmented input:checked + label {
+ color: #fff;
+ background-color: #666;
+}
+
+.clr-swatches {
+ order: 2;
+ width: calc(100% - 32px);
+ margin: 0 16px;
+}
+
+.clr-swatches div {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 12px;
+ justify-content: center;
+}
+
+.clr-swatches button {
+ position: relative;
+ width: 20px;
+ height: 20px;
+ margin: 0 4px 6px 4px;
+ padding: 0;
+ border: 0;
+ border-radius: 50%;
+ color: inherit;
+ text-indent: -1000px;
+ white-space: nowrap;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.clr-swatches button:after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ border-radius: inherit;
+ background-color: currentColor;
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+input.clr-color {
+ order: 1;
+ width: calc(100% - 80px);
+ height: 32px;
+ margin: 15px 20px 20px auto;
+ padding: 0 10px;
+ border: 1px solid #ddd;
+ border-radius: 16px;
+ color: #444;
+ background-color: #fff;
+ font-family: sans-serif;
+ font-size: 14px;
+ text-align: center;
+ box-shadow: none;
+}
+
+input.clr-color:focus {
+ outline: none;
+ border: 1px solid #1e90ff;
+}
+
+.clr-close,
+.clr-clear {
+ display: none;
+ order: 2;
+ height: 24px;
+ margin: 0 20px 20px;
+ padding: 0 20px;
+ border: 0;
+ border-radius: 12px;
+ color: #fff;
+ background-color: #666;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 400;
+ cursor: pointer;
+ display: none !important
+}
+
+.clr-close {
+ display: block;
+ margin: 0 20px 20px auto;
+}
+
+.clr-preview {
+ position: relative;
+ width: 32px;
+ height: 32px;
+ margin: 15px 0 20px 20px;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.clr-preview:before,
+.clr-preview:after {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ border: 1px solid #fff;
+ border-radius: 50%;
+}
+
+.clr-preview:after {
+ border: 0;
+ background-color: currentColor;
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.clr-preview button {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ border-radius: 50%;
+ outline-offset: -2px;
+ background-color: transparent;
+ text-indent: -9999px;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.clr-marker,
+.clr-hue div,
+.clr-alpha div,
+.clr-color {
+ box-sizing: border-box;
+}
+
+.clr-field {
+ display: inline-block;
+ position: relative;
+ color: transparent;
+}
+
+.clr-field input {
+ margin: 0;
+ direction: ltr;
+ width: 40px;
+ background-color: transparent;
+ border:0px !important;
+ cursor: pointer;
+}
+
+.clr-field input:focus {outline: none;}
+
+.clr-field.clr-rtl input {
+ text-align: right;
+}
+
+.clr-field button {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ margin: 0;
+ padding: 0;
+ border: 0;
+ color: inherit;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.clr-field.clr-rtl button {
+ right: auto;
+ left: 0;
+}
+
+.clr-field button:after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ border-radius: inherit;
+ background-color: currentColor;
+ box-shadow: inset 0 0 1px rgba(0,0,0,.5);
+}
+
+.clr-alpha,
+.clr-alpha div,
+.clr-swatches button,
+.clr-preview:before,
+.clr-field button {
+ background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
+ background-position: 0 0, 4px 4px;
+ background-size: 8px 8px;
+}
+
+
+.clr-marker:focus {
+ outline: none;
+}
+
+.clr-keyboard-nav .clr-marker:focus,
+.clr-keyboard-nav .clr-hue input:focus + div,
+.clr-keyboard-nav .clr-alpha input:focus + div,
+.clr-keyboard-nav .clr-segmented input:focus + label {
+ outline: none;
+ box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
+}
+
+.clr-picker[data-alpha="false"] .clr-alpha {
+ display: none;
+}
+
+.clr-picker[data-minimal="true"] {
+ padding-top: 16px;
+}
+
+.clr-picker[data-minimal="true"] .clr-gradient,
+.clr-picker[data-minimal="true"] .clr-hue,
+.clr-picker[data-minimal="true"] .clr-alpha,
+.clr-picker[data-minimal="true"] .clr-color,
+.clr-picker[data-minimal="true"] .clr-preview {
+ display: none;
+}
+
+/** Dark theme **/
+
+.clr-dark {
+ background-color: #444;
+}
+
+.clr-dark .clr-segmented {
+ border-color: #777;
+}
+
+.clr-dark .clr-swatches button:after {
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
+}
+
+.clr-dark input.clr-color {
+ color: #fff;
+ border-color: #777;
+ background-color: #555;
+}
+
+.clr-dark input.clr-color:focus {
+ border-color: #1e90ff;
+}
+
+.clr-dark .clr-preview:after {
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
+}
+
+.clr-dark .clr-alpha,
+.clr-dark .clr-alpha div,
+.clr-dark .clr-swatches button,
+.clr-dark .clr-preview:before {
+ background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
+}
+
+/** Polaroid theme **/
+
+.clr-picker.clr-polaroid {
+ border-radius: 10px;
+ box-shadow: 0 0px 50px rgba(0, 0, 0, 0.1);
+}
+
+
+.clr-picker.clr-polaroid.clr-dark:before {
+ color: #444;
+}
+
+
+.clr-picker.clr-polaroid.clr-top:before {
+ top: auto;
+ bottom: -10px;
+ transform: rotateZ(180deg);
+}
+
+.clr-polaroid .clr-gradient {
+ width: calc(100% - 20px);
+ height: 120px;
+ margin: 10px;
+ border-radius: 3px;
+}
+
+.clr-polaroid .clr-hue,
+.clr-polaroid .clr-alpha {
+ width: calc(100% - 30px);
+ height: 10px;
+ margin: 6px 15px;
+ border-radius: 5px;
+}
+
+.clr-polaroid .clr-hue div,
+.clr-polaroid .clr-alpha div {
+ box-shadow: 0 0 5px rgba(0,0,0,.2);
+}
+
+.clr-polaroid .clr-format {
+ width: calc(100% - 20px);
+ margin: 0 10px 15px;
+}
+
+.clr-polaroid .clr-swatches {
+ width: calc(100% - 12px);
+ margin: 0 6px;
+}
+.clr-polaroid .clr-swatches div {
+ padding-bottom: 10px;
+}
+
+.clr-polaroid .clr-swatches button {
+ width: 22px !important;
+ height: 22px !important;
+}
+
+.clr-polaroid input.clr-color {
+ width: calc(100% - 60px);
+ margin: 10px 10px 15px auto;
+}
+
+.clr-polaroid .clr-clear {
+ margin: 0 10px 15px 10px;
+}
+
+.clr-polaroid .clr-close {
+ margin: 0 10px 15px auto;
+}
+
+.clr-polaroid .clr-preview {
+ margin: 10px 0 15px 10px;
+}
+
+/** Large theme **/
+
+.clr-picker.clr-large {
+ width: 275px;
+}
+
+.clr-large .clr-gradient {
+ height: 150px;
+}
+
+.clr-large .clr-swatches button {
+ width: 22px;
+ height: 22px;
+}
+
+/** Pill (horizontal) theme **/
+
+.clr-picker.clr-pill {
+ width: 380px;
+ padding-left: 180px;
+ box-sizing: border-box;
+}
+
+.clr-pill .clr-gradient {
+ position: absolute;
+ width: 180px;
+ height: 100%;
+ left: 0;
+ top: 0;
+ margin-bottom: 0;
+ border-radius: 3px 0 0 3px;
+}
+
+.clr-pill .clr-hue {
+ margin-top: 20px;
+}
+
+.clr-picker.clr-polaroid:before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 16px;
+ height: 10px;
+ left: 20px;
+ top: -10px;
+ border: solid transparent;
+ border-width: 0 8px 10px 8px;
+ border-bottom-color: currentColor;
+ box-sizing: border-box;
+ color: #fff;
+ filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
+ pointer-events: none;
+}
+
+.square .clr-field button {width: 22px;height: 22px;left: 5px;right: auto;border-radius: 5px;}
+.square .clr-field input{padding-left: 35px;}
+.clr-picker {z-index: 92345678902; position:absolute;}
+.square .clr-field input {height:35px !important; border-radius: 6px !important; width: 238px !important;}
+.color_set_wrap {position: relative;}
+.color_set_wrap span {position: absolute; top:9px; left: 30px;}
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/plugin/coloris/coloris.js b/plugin/editor/rb.editor/plugin/coloris/coloris.js
new file mode 100644
index 000000000..1aa88b0e9
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/coloris/coloris.js
@@ -0,0 +1,1263 @@
+ /*!
+ * Copyright (c) 2021 Momo Bassit.
+ * Licensed under the MIT License (MIT)
+ * https://github.com/mdbassit/Coloris
+ */
+
+(function (window, document, Math, undefined) {
+ var ctx = document.createElement('canvas').getContext('2d');
+ var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
+ var container,picker,colorArea,colorMarker,colorPreview,colorValue,clearButton,closeButton,
+ hueSlider,hueMarker,alphaSlider,alphaMarker,currentEl,currentFormat,oldColor,keyboardNav,
+ colorAreaDims = {};
+
+ // Default settings
+ var settings = {
+ el: '[data-coloris]',
+ parent: 'body',
+ theme: 'default',
+ themeMode: 'light',
+ rtl: false,
+ wrap: true,
+ margin: 2,
+ format: 'hex',
+ formatToggle: false,
+ swatches: [],
+ swatchesOnly: false,
+ alpha: true,
+ forceAlpha: false,
+ focusInput: true,
+ selectInput: false,
+ inline: false,
+ defaultColor: '#000000',
+ clearButton: false,
+ clearLabel: 'Clear',
+ closeButton: false,
+ closeLabel: 'Close',
+ onChange: function onChange() {return undefined;},
+ a11y: {
+ open: 'Open color picker',
+ close: 'Close color picker',
+ clear: 'Clear the selected color',
+ marker: 'Saturation: {s}. Brightness: {v}.',
+ hueSlider: 'Hue slider',
+ alphaSlider: 'Opacity slider',
+ input: 'Color value field',
+ format: 'Color format',
+ swatch: 'Color swatch',
+ instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' } };
+
+
+
+ // Virtual instances cache
+ var instances = {};
+ var currentInstanceId = '';
+ var defaultInstance = {};
+ var hasInstance = false;
+
+ /**
+ * Configure the color picker.
+ * @param {object} options Configuration options.
+ */
+ function configure(options) {
+ if (typeof options !== 'object') {
+ return;
+ }
+
+ for (var key in options) {
+ switch (key) {
+ case 'el':
+ bindFields(options.el);
+ if (options.wrap !== false) {
+ wrapFields(options.el);
+ }
+ break;
+ case 'parent':
+ container = options.parent instanceof HTMLElement ? options.parent : document.querySelector(options.parent);
+ if (container) {
+ container.appendChild(picker);
+ settings.parent = options.parent;
+
+ // document.body is special
+ if (container === document.body) {
+ container = undefined;
+ }
+ }
+ break;
+ case 'themeMode':
+ settings.themeMode = options.themeMode;
+ if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ settings.themeMode = 'dark';
+ }
+ // The lack of a break statement is intentional
+ case 'theme':
+ if (options.theme) {
+ settings.theme = options.theme;
+ }
+
+ // Set the theme and color scheme
+ picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
+
+ // Update the color picker's position if inline mode is in use
+ if (settings.inline) {
+ updatePickerPosition();
+ }
+ break;
+ case 'rtl':
+ settings.rtl = !!options.rtl;
+ Array.from(document.getElementsByClassName('clr-field')).forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+ break;
+ case 'margin':
+ options.margin *= 1;
+ settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
+ break;
+ case 'wrap':
+ if (options.el && options.wrap) {
+ wrapFields(options.el);
+ }
+ break;
+ case 'formatToggle':
+ settings.formatToggle = !!options.formatToggle;
+ getEl('clr-format').style.display = settings.formatToggle ? 'block' : 'none';
+ if (settings.formatToggle) {
+ settings.format = 'auto';
+ }
+ break;
+ case 'swatches':
+ if (Array.isArray(options.swatches)) {(function () {
+ var swatchesContainer = getEl('clr-swatches');
+ var swatches = document.createElement('div');
+
+ // Clear current swatches
+ swatchesContainer.textContent = '';
+
+ // Build new swatches
+ options.swatches.forEach(function (swatch, i) {
+ var button = document.createElement('button');
+
+ button.setAttribute('type', "button");
+ button.setAttribute('id', "clr-swatch-" + i);
+ button.setAttribute('aria-labelledby', "clr-swatch-label clr-swatch-" + i);
+ button.style.color = swatch;
+ button.textContent = swatch;
+
+ swatches.appendChild(button);
+ });
+
+ // Append new swatches if any
+ if (options.swatches.length) {
+ swatchesContainer.appendChild(swatches);
+ }
+
+ settings.swatches = options.swatches.slice();})();
+ }
+ break;
+ case 'swatchesOnly':
+ settings.swatchesOnly = !!options.swatchesOnly;
+ picker.setAttribute('data-minimal', settings.swatchesOnly);
+ break;
+ case 'alpha':
+ settings.alpha = !!options.alpha;
+ picker.setAttribute('data-alpha', settings.alpha);
+ break;
+ case 'inline':
+ settings.inline = !!options.inline;
+ picker.setAttribute('data-inline', settings.inline);
+
+ if (settings.inline) {
+ var defaultColor = options.defaultColor || settings.defaultColor;
+
+ currentFormat = getColorFormatFromStr(defaultColor);
+ updatePickerPosition();
+ setColorFromStr(defaultColor);
+ }
+ break;
+ case 'clearButton':
+ // Backward compatibility
+ if (typeof options.clearButton === 'object') {
+ if (options.clearButton.label) {
+ settings.clearLabel = options.clearButton.label;
+ clearButton.innerHTML = settings.clearLabel;
+ }
+
+ options.clearButton = options.clearButton.show;
+ }
+
+ settings.clearButton = !!options.clearButton;
+ clearButton.style.display = settings.clearButton ? 'block' : 'none';
+ break;
+ case 'clearLabel':
+ settings.clearLabel = options.clearLabel;
+ clearButton.innerHTML = settings.clearLabel;
+ break;
+ case 'closeButton':
+ settings.closeButton = !!options.closeButton;
+
+ if (settings.closeButton) {
+ picker.insertBefore(closeButton, colorPreview);
+ } else {
+ colorPreview.appendChild(closeButton);
+ }
+
+ break;
+ case 'closeLabel':
+ settings.closeLabel = options.closeLabel;
+ closeButton.innerHTML = settings.closeLabel;
+ break;
+ case 'a11y':
+ var labels = options.a11y;
+ var update = false;
+
+ if (typeof labels === 'object') {
+ for (var label in labels) {
+ if (labels[label] && settings.a11y[label]) {
+ settings.a11y[label] = labels[label];
+ update = true;
+ }
+ }
+ }
+
+ if (update) {
+ var openLabel = getEl('clr-open-label');
+ var swatchLabel = getEl('clr-swatch-label');
+
+ openLabel.innerHTML = settings.a11y.open;
+ swatchLabel.innerHTML = settings.a11y.swatch;
+ closeButton.setAttribute('aria-label', settings.a11y.close);
+ clearButton.setAttribute('aria-label', settings.a11y.clear);
+ hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
+ alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
+ colorValue.setAttribute('aria-label', settings.a11y.input);
+ colorArea.setAttribute('aria-label', settings.a11y.instruction);
+ }
+ break;
+ default:
+ settings[key] = options[key];}
+
+ }
+ }
+
+ /**
+ * Add or update a virtual instance.
+ * @param {String} selector The CSS selector of the elements to which the instance is attached.
+ * @param {Object} options Per-instance options to apply.
+ */
+ function setVirtualInstance(selector, options) {
+ if (typeof selector === 'string' && typeof options === 'object') {
+ instances[selector] = options;
+ hasInstance = true;
+ }
+ }
+
+ /**
+ * Remove a virtual instance.
+ * @param {String} selector The CSS selector of the elements to which the instance is attached.
+ */
+ function removeVirtualInstance(selector) {
+ delete instances[selector];
+
+ if (Object.keys(instances).length === 0) {
+ hasInstance = false;
+
+ if (selector === currentInstanceId) {
+ resetVirtualInstance();
+ }
+ }
+ }
+
+ /**
+ * Attach a virtual instance to an element if it matches a selector.
+ * @param {Object} element Target element that will receive a virtual instance if applicable.
+ */
+ function attachVirtualInstance(element) {
+ if (hasInstance) {
+ // These options can only be set globally, not per instance
+ var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop(
+
+ selector) {
+ var options = instances[selector];
+
+ // If the element matches an instance's CSS selector
+ if (element.matches(selector)) {
+ currentInstanceId = selector;
+ defaultInstance = {};
+
+ // Delete unsupported options
+ unsupportedOptions.forEach(function (option) {return delete options[option];});
+
+ // Back up the default options so we can restore them later
+ for (var option in options) {
+ defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];
+ }
+
+ // Set the instance's options
+ configure(options);
+ return "break";
+ }};for (var selector in instances) {var _ret = _loop(selector);if (_ret === "break") break;
+ }
+ }
+ }
+
+ /**
+ * Revert any per-instance options that were previously applied.
+ */
+ function resetVirtualInstance() {
+ if (Object.keys(defaultInstance).length > 0) {
+ configure(defaultInstance);
+ currentInstanceId = '';
+ defaultInstance = {};
+ }
+ }
+
+ /**
+ * Bind the color picker to input fields that match the selector.
+ * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
+ */
+ function bindFields(selector) {
+ if (selector instanceof HTMLElement) {
+ selector = [selector];
+ }
+
+ if (Array.isArray(selector)) {
+ selector.forEach(function (field) {
+ addListener(field, 'click', openPicker);
+ addListener(field, 'input', updateColorPreview);
+ });
+ } else {
+ addListener(document, 'click', selector, openPicker);
+ addListener(document, 'input', selector, updateColorPreview);
+ }
+ }
+
+ /**
+ * Open the color picker.
+ * @param {object} event The event that opens the color picker.
+ */
+ function openPicker(event) {
+ // Skip if inline mode is in use
+ if (settings.inline) {
+ return;
+ }
+
+ // Apply any per-instance options first
+ attachVirtualInstance(event.target);
+
+ currentEl = event.target;
+ oldColor = currentEl.value;
+ currentFormat = getColorFormatFromStr(oldColor);
+ picker.classList.add('clr-open');
+
+ updatePickerPosition();
+ setColorFromStr(oldColor);
+
+ if (settings.focusInput || settings.selectInput) {
+ colorValue.focus({ preventScroll: true });
+ colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+ }
+
+ if (settings.selectInput) {
+ colorValue.select();
+ }
+
+ // Always focus the first element when using keyboard navigation
+ if (keyboardNav || settings.swatchesOnly) {
+ getFocusableElements().shift().focus();
+ }
+
+ // Trigger an "open" event
+ currentEl.dispatchEvent(new Event('open', { bubbles: true }));
+ }
+
+ /**
+ * Update the color picker's position and the color gradient's offset
+ */
+ function updatePickerPosition() {
+ var parent = container;
+ var scrollY = window.scrollY;
+ var pickerWidth = picker.offsetWidth;
+ var pickerHeight = picker.offsetHeight;
+ var reposition = { left: false, top: false };
+ var parentStyle, parentMarginTop, parentBorderTop;
+ var offset = { x: 0, y: 0 };
+
+ if (parent) {
+ parentStyle = window.getComputedStyle(parent);
+ parentMarginTop = parseFloat(parentStyle.marginTop);
+ parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+
+ offset = parent.getBoundingClientRect();
+ offset.y += parentBorderTop + scrollY;
+ }
+
+ if (!settings.inline) {
+ var coords = currentEl.getBoundingClientRect();
+ var left = coords.x;
+ var top = scrollY + coords.y + coords.height + settings.margin;
+
+ // If the color picker is inside a custom container
+ // set the position relative to it
+ if (parent) {
+ left -= offset.x;
+ top -= offset.y;
+
+ if (left + pickerWidth > parent.clientWidth) {
+ left += coords.width - pickerWidth;
+ reposition.left = true;
+ }
+
+ if (top + pickerHeight > parent.clientHeight - parentMarginTop) {
+ if (pickerHeight + settings.margin <= coords.top - (offset.y - scrollY)) {
+ top -= coords.height + pickerHeight + settings.margin * 2;
+ reposition.top = true;
+ }
+ }
+
+ top += parent.scrollTop;
+
+ // Otherwise set the position relative to the whole document
+ } else {
+ if (left + pickerWidth > document.documentElement.clientWidth) {
+ left += coords.width - pickerWidth;
+ reposition.left = true;
+ }
+
+ if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
+ if (pickerHeight + settings.margin <= coords.top) {
+ top = scrollY + coords.y - pickerHeight - settings.margin;
+ reposition.top = true;
+ }
+ }
+ }
+
+ picker.classList.toggle('clr-left', reposition.left);
+ picker.classList.toggle('clr-top', reposition.top);
+ picker.style.left = left + "px";
+ picker.style.top = top + "px";
+ offset.x += picker.offsetLeft;
+ offset.y += picker.offsetTop;
+ }
+
+ colorAreaDims = {
+ width: colorArea.offsetWidth,
+ height: colorArea.offsetHeight,
+ x: colorArea.offsetLeft + offset.x,
+ y: colorArea.offsetTop + offset.y };
+
+ }
+
+ /**
+ * Wrap the linked input fields in a div that adds a color preview.
+ * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
+ */
+ function wrapFields(selector) {
+ if (selector instanceof HTMLElement) {
+ wrapColorField(selector);
+ } else if (Array.isArray(selector)) {
+ selector.forEach(wrapColorField);
+ } else {
+ document.querySelectorAll(selector).forEach(wrapColorField);
+ }
+ }
+
+ /**
+ * Wrap an input field in a div that adds a color preview.
+ * @param {object} field The input field.
+ */
+ function wrapColorField(field) {
+ var parentNode = field.parentNode;
+
+ if (!parentNode.classList.contains('clr-field')) {
+ var wrapper = document.createElement('div');
+ var classes = 'clr-field';
+
+ if (settings.rtl || field.classList.contains('clr-rtl')) {
+ classes += ' clr-rtl';
+ }
+
+ wrapper.innerHTML = '<button type="button" aria-labelledby="clr-open-label"></button>';
+ parentNode.insertBefore(wrapper, field);
+ wrapper.className = classes;
+ wrapper.style.color = field.value;
+ wrapper.appendChild(field);
+ }
+ }
+
+ /**
+ * Update the color preview of an input field
+ * @param {object} event The "input" event that triggers the color change.
+ */
+ function updateColorPreview(event) {
+ var parent = event.target.parentNode;
+
+ // Only update the preview if the field has been previously wrapped
+ if (parent.classList.contains('clr-field')) {
+ parent.style.color = event.target.value;
+ }
+ }
+
+ /**
+ * Close the color picker.
+ * @param {boolean} [revert] If true, revert the color to the original value.
+ */
+ function closePicker(revert) {
+ if (currentEl && !settings.inline) {
+ var prevEl = currentEl;
+
+ // Revert the color to the original value if needed
+ if (revert) {
+ // This will prevent the "change" event on the colorValue input to execute its handler
+ currentEl = undefined;
+
+ if (oldColor !== prevEl.value) {
+ prevEl.value = oldColor;
+
+ // Trigger an "input" event to force update the thumbnail next to the input field
+ prevEl.dispatchEvent(new Event('input', { bubbles: true }));
+ }
+ }
+
+ // Trigger a "change" event if needed
+ setTimeout(function () {// Add this to the end of the event loop
+ if (oldColor !== prevEl.value) {
+ prevEl.dispatchEvent(new Event('change', { bubbles: true }));
+ }
+ });
+
+ // Hide the picker dialog
+ picker.classList.remove('clr-open');
+
+ // Reset any previously set per-instance options
+ if (hasInstance) {
+ resetVirtualInstance();
+ }
+
+ // Trigger a "close" event
+ prevEl.dispatchEvent(new Event('close', { bubbles: true }));
+
+ if (settings.focusInput) {
+ prevEl.focus({ preventScroll: true });
+ }
+
+ // This essentially marks the picker as closed
+ currentEl = undefined;
+ }
+ }
+
+ /**
+ * Set the active color from a string.
+ * @param {string} str String representing a color.
+ */
+ function setColorFromStr(str) {
+ var rgba = strToRGBA(str);
+ var hsva = RGBAtoHSVA(rgba);
+
+ updateMarkerA11yLabel(hsva.s, hsva.v);
+ updateColor(rgba, hsva);
+
+ // Update the UI
+ hueSlider.value = hsva.h;
+ picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
+ hueMarker.style.left = hsva.h / 360 * 100 + "%";
+
+ colorMarker.style.left = colorAreaDims.width * hsva.s / 100 + "px";
+ colorMarker.style.top = colorAreaDims.height - colorAreaDims.height * hsva.v / 100 + "px";
+
+ alphaSlider.value = hsva.a * 100;
+ alphaMarker.style.left = hsva.a * 100 + "%";
+ }
+
+ /**
+ * Guess the color format from a string.
+ * @param {string} str String representing a color.
+ * @return {string} The color format.
+ */
+ function getColorFormatFromStr(str) {
+ var format = str.substring(0, 3).toLowerCase();
+
+ if (format === 'rgb' || format === 'hsl') {
+ return format;
+ }
+
+ return 'hex';
+ }
+
+ /**
+ * Copy the active color to the linked input field.
+ * @param {number} [color] Color value to override the active color.
+ */
+ function pickColor(color) {
+ color = color !== undefined ? color : colorValue.value;
+
+ if (currentEl) {
+ currentEl.value = color;
+ currentEl.dispatchEvent(new Event('input', { bubbles: true }));
+ }
+
+ if (settings.onChange) {
+ settings.onChange.call(window, color, currentEl);
+ }
+
+ document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
+ }
+
+ /**
+ * Set the active color based on a specific point in the color gradient.
+ * @param {number} x Left position.
+ * @param {number} y Top position.
+ */
+ function setColorAtPosition(x, y) {
+ var hsva = {
+ h: hueSlider.value * 1,
+ s: x / colorAreaDims.width * 100,
+ v: 100 - y / colorAreaDims.height * 100,
+ a: alphaSlider.value / 100 };
+
+ var rgba = HSVAtoRGBA(hsva);
+
+ updateMarkerA11yLabel(hsva.s, hsva.v);
+ updateColor(rgba, hsva);
+ pickColor();
+ }
+
+ /**
+ * Update the color marker's accessibility label.
+ * @param {number} saturation
+ * @param {number} value
+ */
+ function updateMarkerA11yLabel(saturation, value) {
+ var label = settings.a11y.marker;
+
+ saturation = saturation.toFixed(1) * 1;
+ value = value.toFixed(1) * 1;
+ label = label.replace('{s}', saturation);
+ label = label.replace('{v}', value);
+ colorMarker.setAttribute('aria-label', label);
+ }
+
+ //
+ /**
+ * Get the pageX and pageY positions of the pointer.
+ * @param {object} event The MouseEvent or TouchEvent object.
+ * @return {object} The pageX and pageY positions.
+ */
+ function getPointerPosition(event) {
+ return {
+ pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
+ pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY };
+
+ }
+
+ /**
+ * Move the color marker when dragged.
+ * @param {object} event The MouseEvent object.
+ */
+ function moveMarker(event) {
+ var pointer = getPointerPosition(event);
+ var x = pointer.pageX - colorAreaDims.x;
+ var y = pointer.pageY - colorAreaDims.y;
+
+ if (container) {
+ y += container.scrollTop;
+ }
+
+ setMarkerPosition(x, y);
+
+ // Prevent scrolling while dragging the marker
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ /**
+ * Move the color marker when the arrow keys are pressed.
+ * @param {number} offsetX The horizontal amount to move.
+ * @param {number} offsetY The vertical amount to move.
+ */
+ function moveMarkerOnKeydown(offsetX, offsetY) {
+ var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
+ var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
+
+ setMarkerPosition(x, y);
+ }
+
+ /**
+ * Set the color marker's position.
+ * @param {number} x Left position.
+ * @param {number} y Top position.
+ */
+ function setMarkerPosition(x, y) {
+ // Make sure the marker doesn't go out of bounds
+ x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
+ y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
+
+ // Set the position
+ colorMarker.style.left = x + "px";
+ colorMarker.style.top = y + "px";
+
+ // Update the color
+ setColorAtPosition(x, y);
+
+ // Make sure the marker is focused
+ colorMarker.focus();
+ }
+
+ /**
+ * Update the color picker's input field and preview thumb.
+ * @param {Object} rgba Red, green, blue and alpha values.
+ * @param {Object} [hsva] Hue, saturation, value and alpha values.
+ */
+ function updateColor(rgba, hsva) {if (rgba === void 0) {rgba = {};}if (hsva === void 0) {hsva = {};}
+ var format = settings.format;
+
+ for (var key in rgba) {
+ currentColor[key] = rgba[key];
+ }
+
+ for (var _key in hsva) {
+ currentColor[_key] = hsva[_key];
+ }
+
+ var hex = RGBAToHex(currentColor);
+ var opaqueHex = hex.substring(0, 7);
+
+ colorMarker.style.color = opaqueHex;
+ alphaMarker.parentNode.style.color = opaqueHex;
+ alphaMarker.style.color = hex;
+ colorPreview.style.color = hex;
+
+ // Force repaint the color and alpha gradients as a workaround for a Google Chrome bug
+ colorArea.style.display = 'none';
+ colorArea.offsetHeight;
+ colorArea.style.display = '';
+ alphaMarker.nextElementSibling.style.display = 'none';
+ alphaMarker.nextElementSibling.offsetHeight;
+ alphaMarker.nextElementSibling.style.display = '';
+
+ if (format === 'mixed') {
+ format = currentColor.a === 1 ? 'hex' : 'rgb';
+ } else if (format === 'auto') {
+ format = currentFormat;
+ }
+
+ switch (format) {
+ case 'hex':
+ colorValue.value = hex;
+ break;
+ case 'rgb':
+ colorValue.value = RGBAToStr(currentColor);
+ break;
+ case 'hsl':
+ colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
+ break;}
+
+
+ // Select the current format in the format switcher
+ document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
+ }
+
+ /**
+ * Set the hue when its slider is moved.
+ */
+ function setHue() {
+ var hue = hueSlider.value * 1;
+ var x = colorMarker.style.left.replace('px', '') * 1;
+ var y = colorMarker.style.top.replace('px', '') * 1;
+
+ picker.style.color = "hsl(" + hue + ", 100%, 50%)";
+ hueMarker.style.left = hue / 360 * 100 + "%";
+
+ setColorAtPosition(x, y);
+ }
+
+ /**
+ * Set the alpha when its slider is moved.
+ */
+ function setAlpha() {
+ var alpha = alphaSlider.value / 100;
+
+ alphaMarker.style.left = alpha * 100 + "%";
+ updateColor({ a: alpha });
+ pickColor();
+ }
+
+ /**
+ * Convert HSVA to RGBA.
+ * @param {object} hsva Hue, saturation, value and alpha values.
+ * @return {object} Red, green, blue and alpha values.
+ */
+ function HSVAtoRGBA(hsva) {
+ var saturation = hsva.s / 100;
+ var value = hsva.v / 100;
+ var chroma = saturation * value;
+ var hueBy60 = hsva.h / 60;
+ var x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
+ var m = value - chroma;
+
+ chroma = chroma + m;
+ x = x + m;
+
+ var index = Math.floor(hueBy60) % 6;
+ var red = [chroma, x, m, m, x, chroma][index];
+ var green = [x, chroma, chroma, x, m, m][index];
+ var blue = [m, m, x, chroma, chroma, x][index];
+
+ return {
+ r: Math.round(red * 255),
+ g: Math.round(green * 255),
+ b: Math.round(blue * 255),
+ a: hsva.a };
+
+ }
+
+ /**
+ * Convert HSVA to HSLA.
+ * @param {object} hsva Hue, saturation, value and alpha values.
+ * @return {object} Hue, saturation, lightness and alpha values.
+ */
+ function HSVAtoHSLA(hsva) {
+ var value = hsva.v / 100;
+ var lightness = value * (1 - hsva.s / 100 / 2);
+ var saturation;
+
+ if (lightness > 0 && lightness < 1) {
+ saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
+ }
+
+ return {
+ h: hsva.h,
+ s: saturation || 0,
+ l: Math.round(lightness * 100),
+ a: hsva.a };
+
+ }
+
+ /**
+ * Convert RGBA to HSVA.
+ * @param {object} rgba Red, green, blue and alpha values.
+ * @return {object} Hue, saturation, value and alpha values.
+ */
+ function RGBAtoHSVA(rgba) {
+ var red = rgba.r / 255;
+ var green = rgba.g / 255;
+ var blue = rgba.b / 255;
+ var xmax = Math.max(red, green, blue);
+ var xmin = Math.min(red, green, blue);
+ var chroma = xmax - xmin;
+ var value = xmax;
+ var hue = 0;
+ var saturation = 0;
+
+ if (chroma) {
+ if (xmax === red) {hue = (green - blue) / chroma;}
+ if (xmax === green) {hue = 2 + (blue - red) / chroma;}
+ if (xmax === blue) {hue = 4 + (red - green) / chroma;}
+ if (xmax) {saturation = chroma / xmax;}
+ }
+
+ hue = Math.floor(hue * 60);
+
+ return {
+ h: hue < 0 ? hue + 360 : hue,
+ s: Math.round(saturation * 100),
+ v: Math.round(value * 100),
+ a: rgba.a };
+
+ }
+
+ /**
+ * Parse a string to RGBA.
+ * @param {string} str String representing a color.
+ * @return {object} Red, green, blue and alpha values.
+ */
+ function strToRGBA(str) {
+ var regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+ var match, rgba;
+
+ // Default to black for invalid color strings
+ ctx.fillStyle = '#000';
+
+ // Use canvas to convert the string to a valid color string
+ ctx.fillStyle = str;
+ match = regex.exec(ctx.fillStyle);
+
+ if (match) {
+ rgba = {
+ r: match[3] * 1,
+ g: match[4] * 1,
+ b: match[5] * 1,
+ a: match[6] * 1 };
+
+
+ } else {
+ match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(function (h) {return parseInt(h, 16);});
+ rgba = {
+ r: match[0],
+ g: match[1],
+ b: match[2],
+ a: 1 };
+
+ }
+
+ return rgba;
+ }
+
+ /**
+ * Convert RGBA to Hex.
+ * @param {object} rgba Red, green, blue and alpha values.
+ * @return {string} Hex color string.
+ */
+ function RGBAToHex(rgba) {
+ var R = rgba.r.toString(16);
+ var G = rgba.g.toString(16);
+ var B = rgba.b.toString(16);
+ var A = '';
+
+ if (rgba.r < 16) {
+ R = '0' + R;
+ }
+
+ if (rgba.g < 16) {
+ G = '0' + G;
+ }
+
+ if (rgba.b < 16) {
+ B = '0' + B;
+ }
+
+ if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
+ var alpha = rgba.a * 255 | 0;
+ A = alpha.toString(16);
+
+ if (alpha < 16) {
+ A = '0' + A;
+ }
+ }
+
+ return '#' + R + G + B + A;
+ }
+
+ /**
+ * Convert RGBA values to a CSS rgb/rgba string.
+ * @param {object} rgba Red, green, blue and alpha values.
+ * @return {string} CSS color string.
+ */
+ function RGBAToStr(rgba) {
+ if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
+ return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
+ } else {
+ return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
+ }
+ }
+
+ /**
+ * Convert HSLA values to a CSS hsl/hsla string.
+ * @param {object} hsla Hue, saturation, lightness and alpha values.
+ * @return {string} CSS color string.
+ */
+ function HSLAToStr(hsla) {
+ if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
+ return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
+ } else {
+ return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
+ }
+ }
+
+ /**
+ * Init the color picker.
+ */
+ function init() {
+ // Render the UI
+ container = undefined;
+ picker = document.createElement('div');
+ picker.setAttribute('id', 'clr-picker');
+ picker.className = 'clr-picker';
+ picker.innerHTML =
+ "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+ settings.a11y.instruction + "\">") +
+ '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
+ '</div>' +
+ '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+ settings.a11y.hueSlider + "\">") +
+ '<div id="clr-hue-marker"></div>' +
+ '</div>' +
+ '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+ settings.a11y.alphaSlider + "\">") +
+ '<div id="clr-alpha-marker"></div>' +
+ '<span></span>' +
+ '</div>' +
+ '<div id="clr-format" class="clr-format">' +
+ '<fieldset class="clr-segmented">' + ("<legend>" +
+ settings.a11y.format + "</legend>") +
+ '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
+ '<label for="clr-f1">Hex</label>' +
+ '<input id="clr-f2" type="radio" name="clr-format" value="rgb">' +
+ '<label for="clr-f2">RGB</label>' +
+ '<input id="clr-f3" type="radio" name="clr-format" value="hsl">' +
+ '<label for="clr-f3">HSL</label>' +
+ '<span></span>' +
+ '</fieldset>' +
+ '</div>' +
+ '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
+ settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
+ '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
+ settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
+ '</div>' + ("<span id=\"clr-open-label\" hidden>" +
+ settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
+ settings.a11y.swatch + "</span>");
+
+ // Append the color picker to the DOM
+ document.body.appendChild(picker);
+
+ // Reference the UI elements
+ colorArea = getEl('clr-color-area');
+ colorMarker = getEl('clr-color-marker');
+ clearButton = getEl('clr-clear');
+ closeButton = getEl('clr-close');
+ colorPreview = getEl('clr-color-preview');
+ colorValue = getEl('clr-color-value');
+ hueSlider = getEl('clr-hue-slider');
+ hueMarker = getEl('clr-hue-marker');
+ alphaSlider = getEl('clr-alpha-slider');
+ alphaMarker = getEl('clr-alpha-marker');
+
+ // Bind the picker to the default selector
+ bindFields(settings.el);
+ wrapFields(settings.el);
+
+ addListener(picker, 'mousedown', function (event) {
+ picker.classList.remove('clr-keyboard-nav');
+ event.stopPropagation();
+ });
+
+ addListener(colorArea, 'mousedown', function (event) {
+ addListener(document, 'mousemove', moveMarker);
+ });
+
+ addListener(colorArea, 'contextmenu', function (event) {
+ event.preventDefault();
+ });
+
+ addListener(colorArea, 'touchstart', function (event) {
+ document.addEventListener('touchmove', moveMarker, { passive: false });
+ });
+
+ addListener(colorMarker, 'mousedown', function (event) {
+ addListener(document, 'mousemove', moveMarker);
+ });
+
+ addListener(colorMarker, 'touchstart', function (event) {
+ document.addEventListener('touchmove', moveMarker, { passive: false });
+ });
+
+ addListener(colorValue, 'change', function (event) {
+ var value = colorValue.value;
+
+ if (currentEl || settings.inline) {
+ var color = value === '' ? value : setColorFromStr(value);
+ pickColor(color);
+ }
+ });
+
+ addListener(clearButton, 'click', function (event) {
+ pickColor('');
+ closePicker();
+ });
+
+ addListener(closeButton, 'click', function (event) {
+ pickColor();
+ closePicker();
+ });
+
+ addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
+ currentFormat = event.target.value;
+ updateColor();
+ pickColor();
+ });
+
+ addListener(picker, 'click', '.clr-swatches button', function (event) {
+ setColorFromStr(event.target.textContent);
+ pickColor();
+
+ if (settings.swatchesOnly) {
+ closePicker();
+ }
+ });
+
+ addListener(document, 'mouseup', function (event) {
+ document.removeEventListener('mousemove', moveMarker);
+ });
+
+ addListener(document, 'touchend', function (event) {
+ document.removeEventListener('touchmove', moveMarker);
+ });
+
+ addListener(document, 'mousedown', function (event) {
+ keyboardNav = false;
+ picker.classList.remove('clr-keyboard-nav');
+ closePicker();
+ });
+
+ addListener(document, 'keydown', function (event) {
+ var key = event.key;
+ var target = event.target;
+ var shiftKey = event.shiftKey;
+ var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+ if (key === 'Escape') {
+ closePicker(true);
+
+ // Display focus rings when using the keyboard
+ } else if (navKeys.includes(key)) {
+ keyboardNav = true;
+ picker.classList.add('clr-keyboard-nav');
+ }
+
+ // Trap the focus within the color picker while it's open
+ if (key === 'Tab' && target.matches('.clr-picker *')) {
+ var focusables = getFocusableElements();
+ var firstFocusable = focusables.shift();
+ var lastFocusable = focusables.pop();
+
+ if (shiftKey && target === firstFocusable) {
+ lastFocusable.focus();
+ event.preventDefault();
+ } else if (!shiftKey && target === lastFocusable) {
+ firstFocusable.focus();
+ event.preventDefault();
+ }
+ }
+ });
+
+ addListener(document, 'click', '.clr-field button', function (event) {
+ // Reset any previously set per-instance options
+ if (hasInstance) {
+ resetVirtualInstance();
+ }
+
+ // Open the color picker
+ event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));
+ });
+
+ addListener(colorMarker, 'keydown', function (event) {
+ var movements = {
+ ArrowUp: [0, -1],
+ ArrowDown: [0, 1],
+ ArrowLeft: [-1, 0],
+ ArrowRight: [1, 0] };
+
+
+ if (Object.keys(movements).includes(event.key)) {
+ moveMarkerOnKeydown.apply(void 0, movements[event.key]);
+ event.preventDefault();
+ }
+ });
+
+ addListener(colorArea, 'click', moveMarker);
+ addListener(hueSlider, 'input', setHue);
+ addListener(alphaSlider, 'input', setAlpha);
+ }
+
+ /**
+ * Return a list of focusable elements within the color picker.
+ * @return {array} The list of focusable DOM elemnts.
+ */
+ function getFocusableElements() {
+ var controls = Array.from(picker.querySelectorAll('input, button'));
+ var focusables = controls.filter(function (node) {return !!node.offsetWidth;});
+
+ return focusables;
+ }
+
+ /**
+ * Shortcut for getElementById to optimize the minified JS.
+ * @param {string} id The element id.
+ * @return {object} The DOM element with the provided id.
+ */
+ function getEl(id) {
+ return document.getElementById(id);
+ }
+
+ /**
+ * Shortcut for addEventListener to optimize the minified JS.
+ * @param {object} context The context to which the listener is attached.
+ * @param {string} type Event type.
+ * @param {(string|function)} selector Event target if delegation is used, event handler if not.
+ * @param {function} [fn] Event handler if delegation is used.
+ */
+ function addListener(context, type, selector, fn) {
+ var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
+
+ // Delegate event to the target of the selector
+ if (typeof selector === 'string') {
+ context.addEventListener(type, function (event) {
+ if (matches.call(event.target, selector)) {
+ fn.call(event.target, event);
+ }
+ });
+
+ // If the selector is not a string then it's a function
+ // in which case we need a regular event listener
+ } else {
+ fn = selector;
+ context.addEventListener(type, fn);
+ }
+ }
+
+ /**
+ * Call a function only when the DOM is ready.
+ * @param {function} fn The function to call.
+ * @param {array} [args] Arguments to pass to the function.
+ */
+ function DOMReady(fn, args) {
+ args = args !== undefined ? args : [];
+
+ if (document.readyState !== 'loading') {
+ fn.apply(void 0, args);
+ } else {
+ document.addEventListener('DOMContentLoaded', function () {
+ fn.apply(void 0, args);
+ });
+ }
+ }
+
+ // Polyfill for Nodelist.forEach
+ if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {
+ NodeList.prototype.forEach = Array.prototype.forEach;
+ }
+
+ // Expose the color picker to the global scope
+ window.Coloris = function () {
+ var methods = {
+ set: configure,
+ wrap: wrapFields,
+ close: closePicker,
+ setInstance: setVirtualInstance,
+ removeInstance: removeVirtualInstance,
+ updatePosition: updatePickerPosition,
+ ready: DOMReady };
+
+
+ function Coloris(options) {
+ DOMReady(function () {
+ if (options) {
+ if (typeof options === 'string') {
+ bindFields(options);
+ } else {
+ configure(options);
+ }
+ }
+ });
+ }var _loop2 = function _loop2(
+
+ key) {
+ Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {args[_key2] = arguments[_key2];}
+ DOMReady(methods[key], args);
+ };};for (var key in methods) {_loop2(key);
+ }
+
+ return Coloris;
+ }();
+
+ // Init the color picker when the DOM is ready
+ DOMReady(init);
+
+})(window, document, Math);
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/plugin/edit/_common.php b/plugin/editor/rb.editor/plugin/edit/_common.php
new file mode 100644
index 000000000..ae8f2d1c2
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/edit/_common.php
@@ -0,0 +1,2 @@
+<?php
+include_once("../../../../../common.php");
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/plugin/edit/ajax.edit_add.php b/plugin/editor/rb.editor/plugin/edit/ajax.edit_add.php
new file mode 100644
index 000000000..09ce5e1ad
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/edit/ajax.edit_add.php
@@ -0,0 +1,135 @@
+<?php
+include_once('./_common.php');
+//if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
+
+$ed_id = isset($_POST['ed_id']) ? $_POST['ed_id'] : '';
+$mb_id = isset($_POST['mb_id']) ? $_POST['mb_id'] : '';
+$wr_id = isset($_POST['wr_id']) ? $_POST['wr_id'] : '';
+$bo_table = isset($_POST['bo_table']) ? $_POST['bo_table'] : '';
+$wr_subject = isset($_POST['wr_subject']) ? $_POST['wr_subject'] : '';
+$write_id = isset($_POST['write_id']) ? $_POST['write_id'] : '';
+$ed_type = isset($_POST['ed_type']) ? $_POST['ed_type'] : '';
+?>
+
+<?php
+
+$rb_editor_edit_table = G5_TABLE_PREFIX . "rb_editor_edit"; //테이블명
+$rb_editor_edit_table2 = G5_TABLE_PREFIX . "rb_editor_edit_content"; //테이블명
+$write_tables = G5_TABLE_PREFIX . "write_" . $bo_table;
+
+$mb = get_member($mb_id);
+
+if($ed_type == "ps") { //게재
+
+ if($mb_id && $wr_id && $bo_table) {
+
+ $sql = " UPDATE {$rb_editor_edit_table2} SET ed_status = '1' WHERE ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' and ed_mb_id = '{$mb_id}' and ed_id = '{$ed_id}' ; ";
+ sql_query($sql);
+
+ $content = sql_fetch ("select ed_wr_content from {$rb_editor_edit_table2} where ed_id = '{$ed_id}' ");
+
+ $sql2 = " UPDATE {$write_tables} SET wr_content = '{$content['ed_wr_content']}', wr_datetime_last = '".G5_TIME_YMDHIS."', wr_datetime_last_id = '{$mb_id}' WHERE wr_id = '{$wr_id}' and wr_is_comment = '0'; ";
+ sql_query($sql2);
+
+ memo_auto_send('[편집 승인] ['.$wr_subject.'] 게시물의 편집 내용이 반영 되었습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $mb_id, "system-msg");
+
+ echo 'alert( "승인 처리 되었습니다.");';
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+} else if($ed_type == "pc") { //요청취소
+
+ if($mb_id && $wr_id && $bo_table) {
+
+ $sql = "DELETE FROM {$rb_editor_edit_table2} WHERE ed_mb_id = '{$mb_id}' and ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' and ed_id = '{$ed_id}' ;";
+ sql_query($sql);
+
+ memo_auto_send('[편집 취소] ['.$wr_subject.'] 게시물의 편집 요청이 철회 되었습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $mb_id, "system-msg");
+
+ echo 'alert( "편집승인 요청을 취소 하였습니다.");';
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+
+
+} else if($ed_type == "confirm") { //승인
+
+ if($mb_id && $wr_id && $bo_table) {
+
+ $sql = " UPDATE {$rb_editor_edit_table} SET ed_status = '1' WHERE ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' and ed_mb_id = '{$mb_id}' and ed_id = '{$ed_id}' ; ";
+ sql_query($sql);
+
+ memo_auto_send('[편집권한 승인] ['.$wr_subject.'] 게시물의 편집권한이 승인 되었습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $mb_id, "system-msg");
+
+ echo 'alert( "승인 처리 되었습니다.");';
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+} else if($ed_type == "cancle") { //취소
+
+ if($mb_id && $wr_id && $bo_table) {
+
+ $sql = " UPDATE {$rb_editor_edit_table} SET ed_status = '0' WHERE ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' and ed_mb_id = '{$mb_id}' and ed_id = '{$ed_id}' ; ";
+ sql_query($sql);
+
+ memo_auto_send('[편집권한 취소] ['.$wr_subject.'] 게시물의 편집권한이 취소 되었습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $mb_id, "system-msg");
+
+ echo 'alert( "취소 처리 되었습니다.");';
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+
+} else if($ed_type == "del") { //요청취소
+
+ if($mb_id && $wr_id && $bo_table) {
+
+ $sql = "DELETE FROM {$rb_editor_edit_table} WHERE ed_mb_id = '{$mb_id}' and ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' and ed_id = '{$ed_id}' ;";
+ sql_query($sql);
+
+ memo_auto_send('[편집권한 요청취소] '.$mb['mb_nick'].'님 께서 ['.$wr_subject.'] 게시물의 편집권한 요청을 철회 하였습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $write_id, "system-msg");
+
+ echo 'alert( "편집권한 요청을 취소 하였습니다.");';
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+
+
+} else {
+
+ if($mb_id && $wr_id && $bo_table && $write_id) {
+
+ //편집권한이 있는지 조회
+ $acc = 0;
+ $edit = sql_fetch (" select COUNT(*) as cnt from {$rb_editor_edit_table} where ed_mb_id = '{$mb_id}' and ed_wr_id = '{$wr_id}' and ed_bo_table = '{$bo_table}' ed_status = '1' ");
+
+ if(isset($edit['cnt']) && $edit['cnt'] > 0) {
+ $acc = $edit['cnt'];
+ } else {
+ $acc = 0;
+ }
+
+ //권힌이 없는 경우 요청
+ if(isset($acc) && $acc > 0) {
+ echo 'alert( "이미 편집 권한이 있습니다.");';
+ } else {
+
+ $sql = " insert into {$rb_editor_edit_table} ( ed_bo_table, ed_mb_id, ed_wr_id, ed_wr_subject, ed_write_id, ed_status, ed_time ) values ( '{$bo_table}', '{$mb_id}', '{$wr_id}', '{$wr_subject}', '{$write_id}', '0', '".G5_TIME_YMDHIS."' ) ";
+ sql_query($sql);
+
+ memo_auto_send('[편집권한 요청] '.$mb['mb_nick'].'님 께서 ['.$wr_subject.'] 게시물에 편집권한 요청을 하였습니다.', G5_BBS_URL.'/board.php?bo_table='.$bo_table.'&wr_id='.$wr_id, $write_id, "system-msg");
+
+ echo 'alert( "편집권한 요청을 완료 하였습니다.\n원 저작자 승인 시 본 게시물을 편집하실 수 있습니다.");';
+ }
+
+ } else {
+ echo 'alert( "처리에 문제가 있습니다. 다시 시도해주세요.");';
+ }
+
+}
+
+?>
diff --git a/plugin/editor/rb.editor/plugin/edit/inc.view_skin.php b/plugin/editor/rb.editor/plugin/edit/inc.view_skin.php
new file mode 100644
index 000000000..edad913d0
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/edit/inc.view_skin.php
@@ -0,0 +1,467 @@
+<!-- 편집기능 -->
+ <div class="btm_btns mf_wrap_inner">
+
+ <?php if($is_member) { ?>
+ <?php if($view['mb_id'] != $member['mb_id']) { ?>
+ <?php
+ $edit_acc = rb_edit_acc($member['mb_id'], $view['wr_id'], $bo_table);
+ ?>
+ <?php if(isset($edit_acc) && $edit_acc == 2) { ?>
+ <a href="<?php echo G5_BBS_URL ?>/write_mod.php?w=u&bo_table=free&wr_id=<?php echo $view['wr_id'] ?>&edit=<?php echo $member['mb_id'] ?>" class="fl_btns">
+ <span class="font-B">편집</span>
+ </a>
+ <?php } else if(isset($edit_acc) && $edit_acc == 1) { ?>
+ <a href="javascript:rb_edit_del('<?php echo $member['mb_id'] ?>');" id="rb_edit_add" class="fl_btns">
+ <span class="font-B">요청취소</span>
+ </a>
+ <?php } else { ?>
+ <?php if(!$is_admin && $view['mb_id']) { ?>
+ <a href="javascript:rb_edit_add('<?php echo $member['mb_id'] ?>');" id="rb_edit_add" class="fl_btns">
+ <span class="font-B">편집권한 요청</span>
+ </a>
+ <?php } ?>
+ <?php } ?>
+
+ <script>
+ var rb_edit_add = function(add_id) { // 등록
+
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = add_id; //요청자 ID
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+
+ if (confirm('[' + wr_subject + ']\n게시물에 대해 <?php echo $view['wr_name'] ?> 님께 편집권한을 요청 하시겠습니까?')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "mb_id": mb_id,
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "write_id": write_id
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+
+
+ var rb_edit_del = function(add_id) { // 등록
+
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = add_id; //요청자 ID
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+ var ed_type = "del";
+
+ if (confirm('[' + wr_subject + ']\n게시물에 대해 편집권한 요청을 취소 하시겠습니까?')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "mb_id": mb_id,
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "write_id": write_id,
+ "ed_type": ed_type
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+ </script>
+ <?php } ?>
+ <?php } ?>
+
+ <?php
+ if(isset($view['wr_datetime_last_id']) && $view['wr_datetime_last_id']) {
+ $w_last = get_member($view['wr_datetime_last_id']);
+ ?>
+ <a href="javascript:void(0);" class="fl_btns" style="border:1px solid rgba(0,0,0,0.1) !important; background-color:transparent; font-size:12px; color:#000;">
+ 발행인 <span class="font-B"><?php echo $view['wr_name'] ?></span> | 최종편집 : <?php echo $w_last['mb_nick'] ?>
+ </a>
+ <?php } ?>
+
+ <?php
+ if(isset($edit_acc) && $edit_acc == 2 || $is_admin || $view['mb_id'] == $member['mb_id']) {
+
+ $rb_editor_edit_table2 = G5_TABLE_PREFIX . "rb_editor_edit_content"; //테이블명
+ if($is_admin || $view['mb_id'] == $member['mb_id']) { //관리자 또는 작성자라면,
+ $edit_sql_common = " from {$rb_editor_edit_table2} where ed_wr_id = '{$view['wr_id']}' and ed_bo_table = '{$bo_table}' and ed_write_id = '{$view['mb_id']}' ";
+ } else { //자신이 요청한 내역만
+ $edit_sql_common = " from {$rb_editor_edit_table2} where ed_wr_id = '{$view['wr_id']}' and ed_bo_table = '{$bo_table}' and ed_write_id = '{$view['mb_id']}' and ed_mb_id = '{$member['mb_id']}' ";
+ }
+
+ $sql_cnt = " select count(*) as cnt " . $edit_sql_common;
+ $row_cnt = sql_fetch($sql_cnt);
+ $total_count_edit = isset($row_cnt['cnt']) ? $row_cnt['cnt'] : 0;
+
+ $edit_sql = " select * $edit_sql_common order by ed_time desc ";
+ $result_edit = sql_query($edit_sql);
+
+
+ ?>
+
+
+ <div class="rb_mf_wrap_list">
+
+
+ <div>
+
+ <button type="button" class="cmt_btn2"><span class="total"><b>편집승인 요청</b> <?php echo $total_count_edit ?></span></button>
+
+
+ <section id="bo_vc2" style="display: block;">
+ <?php
+ for ($i = 0; $row_ed = sql_fetch_array($result_edit); $i++) {
+
+ $mbx = get_member($row_ed['ed_mb_id']);
+ $tmp_name = get_text(cut_str($mbx['mb_nick'], $config['cf_cut_name']));
+
+ if ($board['bo_use_sideview']) {
+ $edit_name = get_sideview($row_ed['ed_mb_id'], $tmp_name, $mbx['mb_email'], $mbx['mb_homepage']);
+ } else {
+ $edit_name = '<span class="'.($row_ed['ed_mb_id']?'member':'guest').'">'.$tmp_name.'</span>';
+ }
+
+ if($row_ed['ed_status'] == 1) {
+ $ed_status = "(승인)";
+ } else {
+ $ed_status = "(요청)";
+ }
+ ?>
+ <article>
+ <div class="cm_wrap">
+ <header style="z-index:2">
+ <span class="sv_wrap"><?php echo $edit_name ?></span>
+ <span><?php echo isset($row_ed['ed_time']) ? $row_ed['ed_time'] : ''; ?>
+ <?php if($is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <span <?php if(isset($row_ed['ed_status']) && $row_ed['ed_status'] == 1) { ?>class="main_color" <?php } ?>><?php echo $ed_status ?></span>
+ <?php } ?>
+ </header>
+ </div>
+
+
+
+ <div class="bo_vl_opt edit_add_wrap">
+
+ <?php if(isset($row_ed['ed_status']) && $row_ed['ed_status'] == 0) { ?>
+ <?php if($row_ed['ed_mb_id'] == $member['mb_id'] || $is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <button type="button" class="edit_add_b" onclick="javascript:rb_edit_pc('<?php echo isset($row_ed['ed_mb_id']) ? $row_ed['ed_mb_id'] : ''; ?>', '<?php echo isset($row_ed['ed_id']) ? $row_ed['ed_id'] : ''; ?>');">취소</button>
+ <?php } ?>
+ <?php } ?>
+
+
+ <?php if(isset($row_ed['ed_status']) && $row_ed['ed_status'] == 1) { ?>
+ <button type="button" class="edit_add_b" onclick="javascript:alert('편집 승인 처리되어 게재 완료 되었습니다.');">완료</button>
+ <?php } else { ?>
+ <button type="button" class="edit_add_a" onclick="javascript:open_view('<?php echo isset($row_ed['ed_id']) ? $row_ed['ed_id'] : ''; ?>');">보기</button>
+ <?php if($is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <button type="button" class="edit_add_a" onclick="javascript:rb_edit_ps('<?php echo isset($row_ed['ed_mb_id']) ? $row_ed['ed_mb_id'] : ''; ?>', '<?php echo isset($row_ed['ed_id']) ? $row_ed['ed_id'] : ''; ?>');">승인</button>
+ <?php } ?>
+ <?php } ?>
+ </div>
+
+
+ <div class="cb"></div>
+
+
+ </article>
+ <?php } ?>
+ <?php if ($i == 0) { ?>
+ <p id="bo_vc_empty">등록된 편집승인 요청이 없습니다.</p>
+ <?php } ?>
+
+ </section>
+ <!-- } 댓글 끝 -->
+
+ </div>
+
+ </div>
+ <?php } ?>
+
+
+ <div class="rb_mf_wrap_list">
+
+ <?php
+ $rb_editor_edit_table = G5_TABLE_PREFIX . "rb_editor_edit"; //테이블명
+ if($is_admin || $view['mb_id'] == $member['mb_id']) { //승인권한이 있다면,
+ $edit_sql_common = " from {$rb_editor_edit_table} where ed_wr_id = '{$view['wr_id']}' and ed_bo_table = '{$bo_table}' and ed_write_id = '{$view['mb_id']}' ";
+ } else { //승인권한이 없다면 승인된 회원만
+ $edit_sql_common = " from {$rb_editor_edit_table} where ed_wr_id = '{$view['wr_id']}' and ed_bo_table = '{$bo_table}' and ed_write_id = '{$view['mb_id']}' and ed_status = '1' ";
+ }
+
+ $sql_cnt = " select count(*) as cnt " . $edit_sql_common;
+ $row_cnt = sql_fetch($sql_cnt);
+ $total_count_edit = isset($row_cnt['cnt']) ? $row_cnt['cnt'] : 0;
+
+ $edit_sql = " select * $edit_sql_common order by ed_time desc ";
+ $result_edit = sql_query($edit_sql);
+
+
+ ?>
+ <div>
+ <button type="button" class="cmt_btn2"><span class="total"><b>편집 참여자</b> <?php echo $total_count_edit ?></span></button>
+
+ <!-- 댓글 시작 { -->
+ <section id="bo_vc2" style="display: block;">
+ <?php
+ for ($i = 0; $row_ed = sql_fetch_array($result_edit); $i++) {
+
+ $mbx = get_member($row_ed['ed_mb_id']);
+ $tmp_name = get_text(cut_str($mbx['mb_nick'], $config['cf_cut_name']));
+
+ if ($board['bo_use_sideview']) {
+ $edit_name = get_sideview($row_ed['ed_mb_id'], $tmp_name, $mbx['mb_email'], $mbx['mb_homepage']);
+ } else {
+ $edit_name = '<span class="'.($row_ed['ed_mb_id']?'member':'guest').'">'.$tmp_name.'</span>';
+ }
+
+ if($row_ed['ed_status'] == 1) {
+ $ed_status = "(승인)";
+ } else {
+ $ed_status = "(요청)";
+ }
+ ?>
+ <article>
+ <div class="cm_wrap">
+ <header style="z-index:2">
+ <span class="sv_wrap"><?php echo $edit_name ?></span>
+ <span><?php echo isset($row_ed['ed_time']) ? $row_ed['ed_time'] : ''; ?>
+ <?php if($is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <span <?php if(isset($row_ed['ed_status']) && $row_ed['ed_status'] == 1) { ?>class="main_color" <?php } ?>><?php echo $ed_status ?></span>
+ <?php } ?>
+ </header>
+ </div>
+
+
+
+ <div class="bo_vl_opt edit_add_wrap">
+ <?php if(isset($row_ed['ed_status']) && $row_ed['ed_status'] == 1) { ?>
+ <?php if(isset($row_ed['ed_mb_id']) && $row_ed['ed_mb_id'] == $member['mb_id'] || $is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <button type="button" class="edit_add_b" onclick="javascript:rb_edit_c('<?php echo isset($row_ed['ed_mb_id']) ? $row_ed['ed_mb_id'] : ''; ?>', '<?php echo isset($row_ed['ed_id']) ? $row_ed['ed_id'] : ''; ?>');">취소</button>
+ <?php } ?>
+ <?php } ?>
+
+ <?php if($is_admin || $view['mb_id'] == $member['mb_id']) { ?>
+ <button type="button" class="edit_add_a" onclick="javascript:rb_edit_s('<?php echo isset($row_ed['ed_mb_id']) ? $row_ed['ed_mb_id'] : ''; ?>', '<?php echo isset($row_ed['ed_id']) ? $row_ed['ed_id'] : ''; ?>');">승인</button>
+ <?php } ?>
+ </div>
+
+
+
+ <div class="cb"></div>
+
+
+ </article>
+ <?php } ?>
+ <?php if ($i == 0) { ?>
+ <p id="bo_vc_empty">등록된 편집자가 없습니다.</p>
+ <?php } ?>
+
+ </section>
+ <!-- } 댓글 끝 -->
+
+ </div>
+
+ </div>
+
+
+
+ <script>
+ function open_view(ed_id) {
+ // #bo_v_con 요소의 width 가져오기
+ var bo_v_con = document.querySelector('#bo_v_con');
+ var popupWidth = bo_v_con ? bo_v_con.offsetWidth : 400; // 기본값 800
+
+ // URL 설정
+ var popupUrl = g5_url + `/plugin/editor/` + g5_editor + `/plugin/edit/popup_view.php?ed_id=${encodeURIComponent(ed_id)}`;
+
+ // 새 창 열기
+ window.open(popupUrl, 'previewWindow', `width=${popupWidth},height=600,resizable=yes`);
+ }
+ </script>
+
+
+ <script>
+ var rb_edit_ps = function(id, ed_id) { // 편집내용 게재
+
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = id; //요청자 ID
+ var ed_id = ed_id;
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+
+ if (confirm('편집을 승인처리 하시겠습니까?\n승인 처리시 해당 게시물의 내용이 승인 요청한 내용으로 변경 되며 취소할 수 없습니다.')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "mb_id": mb_id,
+ "ed_id": ed_id,
+ "write_id": write_id,
+ "ed_type": "ps",
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+
+ var rb_edit_pc = function(id, ed_id) { // 편집내용 게재
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = id; //요청자 ID
+ var ed_id = ed_id;
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+
+
+ if (confirm('승인요청을 취소처리 하시겠습니까?')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "mb_id": mb_id,
+ "ed_id": ed_id,
+ "write_id": write_id,
+ "ed_type": "pc",
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+
+ var rb_edit_s = function(id, ed_id) { // 등록
+
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = id; //요청자 ID
+ var ed_id = ed_id;
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+
+ if (confirm('편집권한을 승인처리 하시겠습니까?\n승인 처리시 해당 게시물에 대해 편집권한이 부여 됩니다.')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "mb_id": mb_id,
+ "ed_id": ed_id,
+ "write_id": write_id,
+ "ed_type": "confirm",
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+
+ var rb_edit_c = function(id, ed_id) { // 등록
+
+ var wr_id = "<?php echo $view['wr_id'] ?>"; //게시물 ID
+ var bo_table = "<?php echo $bo_table; ?>"; //게시판 ID
+ var wr_subject = "<?php echo $view['wr_subject'] ?>"; //게시물 제목
+ var mb_id = id; //요청자 ID
+ var ed_id = ed_id;
+ var write_id = "<?php echo $view['mb_id'] ?>"; //원글 작성자ID
+
+ if (confirm('편집권한을 취소처리 하시겠습니까?\n취소 처리시 해당 게시물에 대해 편집권한이 제거 됩니다.')) {
+
+ $.ajax({
+ url: g5_url + '/plugin/editor/' + g5_editor + '/plugin/edit/ajax.edit_add.php', // 쿼리 파일
+ type: 'post', // 전송방식
+ dataType: 'html',
+ data: {
+ "wr_id": wr_id,
+ "bo_table": bo_table,
+ "wr_subject": wr_subject,
+ "mb_id": mb_id,
+ "ed_id": ed_id,
+ "write_id": write_id,
+ "ed_type": "cancle",
+ },
+ success: function(data) {
+ eval(data)
+ window.location.reload();
+ },
+ error: function(err) {
+ alert("오류가 발생 했습니다. 다시 시도해주세요."); //실패
+ }
+ });
+
+ } else {
+ return false;
+ }
+ }
+ </script>
+
+
+ </div>
\ No newline at end of file
diff --git a/plugin/editor/rb.editor/plugin/edit/popup_view.php b/plugin/editor/rb.editor/plugin/edit/popup_view.php
new file mode 100644
index 000000000..460ccee8a
--- /dev/null
+++ b/plugin/editor/rb.editor/plugin/edit/popup_view.php
@@ -0,0 +1,25 @@
+<?php
+include_once('./_common.php');
+$ed_id = $_GET['ed_id'];
+$rb_editor_edit_table2 = G5_TABLE_PREFIX . "rb_editor_edit_content"; //테이블명
+
+$content = sql_fetch ("select ed_wr_content from {$rb_editor_edit_table2} where ed_id = '{$ed_id}' ");
+?>
+
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+ <meta charset="UTF-8">
+ <title>미리보기
+
+
+
+
+
+
+
+
+
+
+ |