matcha-components 20.214.0 → 20.216.0

package/fesm2022/matcha-components.mjs

@@ -14543,6 +14543,2231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+// SunEditor core — extracted from suneditor.html
+// Do NOT edit directly. Source: design-system/temp/suneditor.html
+// The SUNEDITOR.create() call is intentionally omitted — MatchaTextEditorComponent calls it dynamically.
+const SUNEDITOR_JS = `
+if(typeof window.SUNEDITOR=='undefined') window.SUNEDITOR = {};
+
+/** default language english */
+SUNEDITOR.defaultLang = {
+    toolbar : {
+        fontFamily : 'Font',
+        fontFamilyDelete : 'Remove Font Family',
+        formats : 'Formats',
+        bold : 'Bold',
+        underline : 'Underline',
+        italic : 'Italic',
+        strike : 'Strike',
+        fontColor : 'Font Color',
+        hiliteColor : 'Background Color',
+        indent : 'Indent',
+        outdent : 'Outdent',
+        align : 'Align',
+        alignLeft : 'Align left',
+        alignRight : 'Align right',
+        alignCenter : 'Align center',
+        justifyFull : 'Justify full',
+        left : 'Left',
+        right : 'Right',
+        center : 'Center',
+        bothSide : 'Justify full',
+        list : 'list',
+        orderList : 'Ordered list',
+        unorderList : 'Unordered list',
+        line : 'Line',
+        table : 'Table',
+        link : 'Link',
+        image : 'Picture',
+        video : 'Video',
+        fullScreen : 'Full Screen',
+        htmlEditor : 'Code View'
+    },
+    dialogBox : {
+        linkBox : {
+            title : 'Insert Link',
+            url : 'URL to link',
+            text : 'Text to display'
+        },
+        imageBox : {
+            title : 'Insert Image',
+            file : 'Select from files',
+            url : 'Image URL',
+            resize100 : 'resize 100%',
+            resize75 : 'resize 75%',
+            resize50 : 'resize 50%',
+            resize25 : 'resize 25%',
+            remove : 'remove image'
+        },
+        videoBox : {
+            title : 'Insert Video',
+            url : 'Media embed URL, YouTube',
+            width : 'Width',
+            height : 'Height'
+        },
+        submitButton : 'Submit'
+    }
+};
+
+/**
+ * wysiwyg web editor
+ *
+ * suneditor.js
+ * Copyright 2017 JiHong Lee.
+ * MIT license.
+ */
+(function(){
+    /**
+	 * utile func
+     * @type {{returnTrue}}
+     */
+    var func = (function(){
+        return {
+            returnTrue : function() {
+                return true;
+            }
+        };
+    })();
+
+    /**
+     * document func
+     * @type {{getArrayIndex, nextIdx, prevIdx, isCell, getListChildren, getParentNode, changeTxt, changeClass, addClass, removeClass, toggleClass}}
+     */
+    var dom = (function(){
+        return {
+            getArrayIndex : function(array, element) {
+                var idx = -1;
+
+                for(var i=0; i<array.length; i++) {
+                    if(array[i] === element) {
+                        idx = i;
+                        break;
+                    }
+                }
+
+                return idx;
+            },
+
+            nextIdx : function(array, item) {
+                var idx = this.getArrayIndex(array, item);
+                if (idx === -1) return -1;
+
+                return idx + 1;
+            },
+
+            prevIdx : function(array, item) {
+                var idx = this.getArrayIndex(array, item);
+                if (idx === -1) return -1;
+
+                return idx - 1;
+            },
+
+            isCell : function(node) {
+                return node && /^TD$|^TH$/i.test(node.nodeName);
+            },
+
+            getListChildren : function(element, validation) {
+                var children = [];
+                validation = validation || func.returnTrue;
+
+                (function recursionFunc(current){
+                    if (element !== current && validation(current)) {
+                        children.push(current);
+                    }
+                    for (var i = 0, len = current.children.length; i < len; i++) {
+                        recursionFunc(current.children[i]);
+                    }
+                })(element);
+
+                return children;
+            },
+
+            getParentNode : function(element, tagName) {
+                var check = new RegExp("^"+tagName+"$", "i");
+
+                while(!check.test(element.tagName)) {
+                    element = element.parentNode;
+                }
+
+                return element;
+            },
+
+            changeTxt : function(element, txt) {
+                element.textContent = txt;
+            },
+
+            changeClass : function(element, className) {
+                element.className = className;
+            },
+
+            addClass : function(element, className) {
+                if(!element) return;
+
+                var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
+                if(check.test(element.className)) return;
+
+                element.className += " " + className;
+            },
+
+            removeClass : function(element, className) {
+                if(!element) return;
+
+                var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
+                element.className = element.className.replace(check, " ").trim();
+            },
+
+            toggleClass : function(element, className) {
+                var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
+
+                if (check.test(element.className)) {
+                    element.className = element.className.replace(check, " ").trim();
+                }
+                else {
+                    element.className += " " + className;
+                }
+            }
+        };
+    })();
+
+    /**
+	 * SunEditor
+     * @param context
+     */
+	var core = function(context){
+		/** ë°°́—´ ê´€ë ¨ */
+        var list = (function(){
+            var commandMap = {
+                'FONT': context.tool.fontFamily,
+                'B' : context.tool.bold,
+                'U' : context.tool.underline,
+                'I' : context.tool.italic,
+                'STRIKE' : context.tool.strike
+            };
+
+            /** 글꼴 목록 ê°€́ ¸́˜¤ê¸° */
+            var fontFamilyMap = {};
+			var list_fontFamily = context.tool.list_fontFamily.children;
+
+            list_fontFamily[0].firstChild.getAttribute("data-value");
+            for(var i=0; i<list_fontFamily.length; i++) {
+                fontFamilyMap[list_fontFamily[i].firstChild.getAttribute("data-value").replace(/\s*/g,"")] = list_fontFamily[i].firstChild.getAttribute("data-txt");
+            }
+
+            if(context.tool.list_fontFamily_add) {
+                list_fontFamily = context.tool.list_fontFamily_add.children;
+                for(var i=0; i<list_fontFamily.length; i++) {
+                    fontFamilyMap[list_fontFamily[i].firstChild.getAttribute("data-value").replace(/\s*/g,"")] = list_fontFamily[i].firstChild.getAttribute("data-txt");
+                }
+            }
+
+            list_fontFamily = null;
+
+            return {
+                commandMap : commandMap,
+                fontFamilyMap : fontFamilyMap
+            }
+        })();
+
+		/** selection ê´€ë ¨ */
+        var wysiwygSelection = (function(){
+            return {
+                focus : function(){
+                    context.element.wysiwygWindow.document.body.focus();
+                },
+
+                isEdgePoint : function(container, offset) {
+                    return (offset === 0) || (offset === container.nodeValue.length);
+                },
+
+                createRange : function() {
+                    return context.element.wysiwygWindow.document.createRange();
+                },
+
+                getSelection : function() {
+                    return context.element.wysiwygWindow.getSelection();
+                },
+
+                getPElementInFocusNode : function() {
+                    var parentElement = context.argument._selectionNode;
+                    while(!/^P$/i.test(parentElement.tagName) && !/^BODY$/i.test(parentElement.tagName)) {
+                        parentElement = parentElement.parentNode;
+                    }
+
+                    return parentElement;
+                }
+            }
+        })();
+
+		/** ́—ë””í„° */
+		var editor = (function(){
+            return {
+                subMenu : null,
+                originSub : null,
+                modalForm : null,
+                tabSize : 4,
+
+                pure_execCommand : function(command, showDefaultUI, value) {
+                    context.element.wysiwygWindow.document.execCommand(command, showDefaultUI, value);
+                },
+
+                cancel_table_picker : function() {
+                    context.tool.tableHighlight.style.width = "1em";
+                    context.tool.tableHighlight.style.height = "1em";
+                    context.tool.tableUnHighlight.style.width = "5em";
+                    context.tool.tableUnHighlight.style.height = "5em";
+                    dom.changeTxt(context.tool.tableDisplay, "1 x 1");
+                },
+
+                subOff : function() {
+                    if(this.subMenu) {
+                        this.subMenu.style.display = "none";
+                        this.subMenu = null;
+                        this.cancel_table_picker();
+                    }
+                    if(this.modalForm) {
+                        this.modalForm.style.display = "none";
+                        context.dialog.back.style.display = "none";
+                        context.dialog.modalArea.style.display = "none";
+                    }
+                    if(context.argument._imageElement) {
+                        event.cancel_resize_image();
+                    }
+
+                    return;
+                },
+
+                toggleFrame : function(){
+                    if(!context.argument._wysiwygActive) {
+                        var ec = {"&amp;":"&","&nbsp;":"\u00A0","&quot;":"\"","&lt;":"<","&gt;":">"};
+                        var source_html = context.element.source.value.replace(/&[a-z]+;/g, function(m){ return (typeof ec[m] === "string")?ec[m]:m; });
+                        context.element.wysiwygWindow.document.body.innerHTML = source_html.trim().length > 0? source_html: "<p>&#65279</p>";
+                        context.element.wysiwygWindow.document.body.scrollTop = 0;
+                        context.element.source.style.display = "none";
+                        context.element.wysiwygElement.style.display = "block";
+                        context.argument._wysiwygActive = true;
+                    }
+                    else {
+                        context.element.source.value = context.element.wysiwygWindow.document.body.innerHTML.trim();
+                        context.element.wysiwygElement.style.display = "none";
+                        context.element.source.style.display = "block";
+                        context.argument._wysiwygActive = false;
+                    }
+                },
+
+                toggleFullScreen : function(element){
+                    if(!context.argument._isFullScreen) {
+                        context.element.topArea.style.position = "fixed";
+                        context.element.topArea.style.top = "0";
+                        context.element.topArea.style.left = "0";
+                        context.element.topArea.style.width = "100%";
+                        context.element.topArea.style.height = "100%";
+
+                        context.argument._innerHeight_fullScreen = (window.innerHeight - context.tool.bar.offsetHeight);
+                        context.element.editorArea.style.height = context.argument._innerHeight_fullScreen + "px";
+
+                        dom.removeClass(element.firstElementChild, 'ico_full_screen_e');
+                        dom.addClass(element.firstElementChild, 'ico_full_screen_i');
+                    }
+                    else {
+                        context.element.topArea.style.cssText = context.argument._originCssText;
+                        context.element.editorArea.style.height = context.argument._innerHeight + "px";
+
+                        dom.removeClass(element.firstElementChild, 'ico_full_screen_i');
+                        dom.addClass(element.firstElementChild, 'ico_full_screen_e');
+                    }
+
+                    context.argument._isFullScreen = !context.argument._isFullScreen;
+                },
+
+                appendHr : function(value) {
+                    var borderStyle = "";
+                    switch(value) {
+                        case 'hr1':
+                            borderStyle = "black 1px solid";
+                            break;
+                        case 'hr2':
+                            borderStyle = "black 1px dotted";
+                            break;
+                        case 'hr3':
+                            borderStyle = "black 1px dashed";
+                            break;
+                    }
+
+                    var oHr = document.createElement("HR");
+                    oHr.style.border = "black 0px none";
+                    oHr.style.borderTop = borderStyle;
+                    oHr.style.height = "1px";
+                    context.argument._selectionNode.parentNode.appendChild(oHr);
+
+                    editor.appendP(oHr);
+                },
+
+                appendTable : function(x, y) {
+                    var oTable = document.createElement("TABLE");
+
+                    var tableHTML = '<tbody>';
+                    while(y>0) {
+                        tableHTML += '<tr>';
+                        var tdCnt = x;
+                        while(tdCnt>0) {
+                            tableHTML += '<td><p>&#65279</p></td>';
+                            --tdCnt;
+                        }
+                        tableHTML += '</tr>';
+                        --y;
+                    }
+                    tableHTML += '</tbody>';
+
+                    oTable.innerHTML = tableHTML;
+
+                    editor.insertNode(oTable);
+                    editor.appendP(oTable);
+                },
+
+                appendP : function(element) {
+                    var oP = document.createElement("P");
+                    oP.innerHTML = '&#65279';
+                    element.parentNode.insertBefore(oP, element.nextElementSibling);
+                },
+
+                openDialog : function(kind) {
+                    var focusText = null;
+
+                    switch(kind) {
+                        case 'link':
+                            this.modalForm = context.dialog.link;
+                            focusText = context.dialog.linkText;
+                            break;
+                        case 'image':
+                            this.modalForm = context.dialog.image;
+                            focusText = context.dialog.imgInputUrl;
+                            break;
+                        case 'video':
+                            this.modalForm = context.dialog.video;
+                            focusText = context.dialog.videoInputUrl;
+                            break;
+                    }
+
+                    context.dialog.modalArea.style.display = "block";
+                    context.dialog.back.style.display = "block";
+                    context.dialog.modal.style.display = "block";
+                    this.modalForm.style.display = "block";
+
+                    this.subMenu = context.dialog.modal;
+
+                    focusText.focus();
+                },
+
+                showLoding : function() {
+                    context.element.loding.style.display = "block";
+                },
+
+                closeLoding : function() {
+                    context.element.loding.style.display = "none";
+                },
+
+                insertNode : function(oNode) {
+                    var selection = wysiwygSelection.getSelection();
+                    var nativeRng = null;
+
+                    if(selection.rangeCount > 0) {
+                        nativeRng = selection.getRangeAt(0);
+                    } else {
+                        selection = context.argument._copySelection;
+
+                        nativeRng = wysiwygSelection.createRange();
+                        nativeRng.setStart(selection.focusNode, selection.anchorOffset);
+                        nativeRng.setEnd(selection.focusNode, selection.focusOffset);
+                    }
+
+                    var startCon = nativeRng.startContainer;
+                    var startOff = nativeRng.startOffset;
+                    var endCon = nativeRng.endContainer;
+                    var endOff = nativeRng.endOffset;
+
+                    var pNode = startCon;
+                    if(/^#text$/i.test(startCon.nodeName)) {
+                        pNode = startCon.parentNode;
+                    }
+
+                    /** ë²”́œ„́„ 택 ́—†́„ë•Œ */
+                    if(startCon === endCon && startOff === endOff) {
+                        if(/^#text$/i.test(selection.focusNode.nodeName)) {
+                            var rightNode = selection.focusNode.splitText(endOff);
+                            pNode.insertBefore(oNode, rightNode);
+                        }
+                        else {
+                            if(/^BR$/i.test(pNode.lastChild.nodeName)) {
+                                pNode.removeChild(pNode.lastChild);
+                            }
+                            pNode.appendChild(oNode);
+                        }
+                    }
+                    /** ë²”́œ„́„ 택 í–ˆ́„ë•Œ */
+                    else {
+                        var removeNode = startCon;
+                        var rightNode = null;
+                        var isSameContainer = startCon === endCon;
+
+                        if(isSameContainer) {
+                            if(!wysiwygSelection.isEdgePoint(endCon, endOff)) {
+                                rightNode = endCon.splitText(endOff);
+                            }
+
+                            if(!wysiwygSelection.isEdgePoint(startCon, startOff)) {
+                                removeNode = startCon.splitText(startOff);
+                            }
+
+                            pNode.removeChild(removeNode);
+                        }
+                        else {
+                            var nodes = [];
+                            var container = startCon;
+                            while(container.nodeType == 3 && !(endCon == container)) {
+                                nodes.push(container);
+                                container = container.nextSibling;
+                            }
+
+                            nodes.push(container);
+
+                            for(var i=0; i<nodes.length; i++) {
+                                pNode.removeChild(nodes[i]);
+                            }
+                        }
+
+                        pNode.insertBefore(oNode, rightNode);
+                    }
+                }
+            };
+		})();
+
+		/** ́´ë²¤íŠ¸ */
+        var event = (function(){
+            var resize_window = function() {
+                // if(context.tool.barHeight == context.tool.bar.offsetHeight) return;
+
+                if(context.argument._isFullScreen) {
+                    context.argument._innerHeight_fullScreen += ((context.tool.barHeight - context.tool.bar.offsetHeight) + (this.innerHeight - context.argument._windowHeight));
+                    context.element.editorArea.style.height = context.argument._innerHeight_fullScreen + "px";
+                }
+
+                context.tool.barHeight = context.tool.bar.offsetHeight;
+                context.argument._windowHeight = this.innerHeight;
+            };
+
+            var onClick_toolbar = function(e) {
+                var targetElement = e.target;
+                var display = targetElement.getAttribute("data-display");
+                var command = targetElement.getAttribute("data-command");
+                var className = targetElement.className;
+
+                e.preventDefault();
+                e.stopPropagation();
+
+                wysiwygSelection.focus();
+
+                while(!command && !display && !/layer_color|layer_url|editor_tool/.test(className) && !/^BODY$/i.test(targetElement.tagName)){
+                    targetElement = targetElement.parentNode;
+                    command = targetElement.getAttribute("data-command");
+                    display = targetElement.getAttribute("data-display");
+                    className = targetElement.className;
+                }
+
+                var value = targetElement.getAttribute("data-value");
+                var txt = targetElement.getAttribute("data-txt");
+
+                /** ́„œë¸Œë©”뉴 ë³´́´ê¸° */
+                if(display || /^BODY$/i.test(targetElement.tagName)) {
+                    var nextSibling = editor.subMenu;
+                    editor.subOff();
+
+                    if(targetElement.nextElementSibling != null && targetElement.nextElementSibling != nextSibling){
+                        editor.subMenu = targetElement.nextElementSibling;
+                        editor.subMenu.style.display = "block";
+                        editor.originSub = editor.subMenu.previousElementSibling;
+                    }
+                    else if(/modal/.test(display)) {
+                        editor.openDialog(command);
+                    }
+
+                    nextSibling = null;
+
+                    return;
+                }
+
+                if(/layer_color/.test(className) && /^BUTTON$/i.test(e.target.tagName)) {
+                    value = e.target.textContent;
+                }
+
+                /** ́»¤ë©˜ë“œ ëª…ë ¹́–´ ́‹¤í–‰ */
+                if(command) {
+                    if(/fontName/.test(command)) {
+                        dom.changeTxt(editor.originSub.firstElementChild, txt);
+                        editor.pure_execCommand(command, false, value);
+                    }
+                    else if(/format/.test(command)) {
+                        editor.pure_execCommand("formatBlock", false, value);
+                    }
+                    else if(/justifyleft|justifyright|justifycenter|justifyfull/.test(command)) {
+                        dom.changeTxt(editor.originSub.firstElementChild, targetElement.title.split(" ")[0]);
+//					dom.changeClass(editor.originSub.firstElementChild, targetElement.firstElementChild.className);
+                        editor.pure_execCommand(command, false);
+                    }
+                    else if(/foreColor|hiliteColor/.test(command)) {
+                        editor.pure_execCommand(command, false, value);
+                    }
+                    else if(/horizontalRules/.test(command)) {
+                        editor.appendHr(value);
+                    }
+                    else if(/sorceFrame/.test(command)) {
+                        editor.toggleFrame();
+                        dom.toggleClass(targetElement, 'on');
+                    }
+                    else if(/fullScreen/.test(command)) {
+                        editor.toggleFullScreen(targetElement);
+                        dom.toggleClass(targetElement, "on");
+                    }
+                    else if(/indent|outdent/.test(command)) {
+                        editor.pure_execCommand(command, false);
+                    }
+                    else if(/insertTable/.test(command)) {
+                        editor.appendTable(context.argument._tableXY[0], context.argument._tableXY[1]);
+                    }
+                    else {
+                        editor.pure_execCommand(command, false, value);
+                        dom.toggleClass(targetElement, "on");
+                    }
+
+                    editor.subOff();
+                }
+
+            };
+
+            var onMouseDown_wysiwyg = function(e) {
+                var targetElement = e.target;
+
+                editor.subOff();
+
+                if(/^IMG$/i.test(targetElement.nodeName)) {
+                    /** ie,firefox image resize handle : false*/
+                    targetElement.setAttribute('unselectable', 'on');
+                    targetElement.contentEditable = false;
+
+                    var resizeDiv = context.element.imageResizeDiv;
+                    var w = targetElement.offsetWidth;
+                    var h = targetElement.offsetHeight;
+
+                    var parentElement = targetElement.offsetParent;
+                    var parentT = 1;
+                    var parentL = 1;
+                    while(parentElement) {
+                        parentT += (parentElement.offsetTop + parentElement.clientTop);
+                        parentL += (parentElement.offsetLeft + + parentElement.clientLeft);
+                        parentElement = parentElement.offsetParent;
+                    }
+                    context.argument._imageResize_parent_t = (context.tool.bar.offsetHeight + parentT);
+                    context._imageResize_parent_l = parentL;
+
+                    var t = (targetElement.offsetTop + context.argument._imageResize_parent_t - context.element.wysiwygWindow.document.body.scrollTop);
+                    var l = (targetElement.offsetLeft + parentL);
+
+                    resizeDiv.style.top = t + "px";
+                    resizeDiv.style.left = l + "px";
+                    resizeDiv.style.width = w + "px";
+                    resizeDiv.style.height = h + "px";
+
+                    context.element.imageResizeBtn.style.top = (h + t) + "px";
+                    context.element.imageResizeBtn.style.left = l + "px";
+
+                    dom.changeTxt(context.element.imageResizeDisplay, w + " x " + h);
+
+                    context.argument._imageElement = targetElement;
+                    context.argument._imageElement_w = w;
+                    context.argument._imageElement_h = h;
+                    context.argument._imageElement_t = t;
+                    context.argument._imageElement_l = l;
+
+                    context.element.imageResizeDiv.style.display = "block";
+                    context.element.imageResizeBtn.style.display = "block";
+                }
+                else if(/^HTML$/i.test(targetElement.nodeName)){
+                    wysiwygSelection.focus();
+                }
+            };
+
+            /** selection 객́²´ ë³µ́‚¬́š©(IE...) */
+            function copyObj(obj) {
+                var copy = {};
+                for (var attr in obj) {
+                    copy[attr] = obj[attr];
+                }
+                return copy;
+            }
+
+            var onSelectionChange_wysiwyg = function() {
+                context.argument._copySelection = copyObj(wysiwygSelection.getSelection());
+                context.argument._selectionNode = wysiwygSelection.getSelection().anchorNode;
+
+                var selectionParent = context.argument._selectionNode;
+                var selectionNodeStr = "";
+                var fontFamily = context.tool.default_fontFamily;
+                while(!/^P$|^BODY$|^HTML$/i.test(selectionParent.nodeName)) {
+                    selectionNodeStr += selectionParent.nodeName + "|";
+                    if(/^FONT$/i.test(selectionParent.nodeName) && selectionParent.face.length > 0) {
+                        var selectFont = list.fontFamilyMap[selectionParent.face.replace(/\s*/g,"")];
+                        fontFamily = (selectFont? selectFont: fontFamily);
+                        break;
+                    }
+                    selectionParent = selectionParent.parentNode;
+                }
+
+                if(/^SPAN$/i.test(selectionParent.nodeName)) {
+                    for(var i=0; i<selectionParent.children.length; i++) {
+                        selectionNodeStr += selectionParent.children[i].tagName;
+                    }
+                }
+
+
+                /** add */
+                var onNode = selectionNodeStr.split("|");
+                var map = "B|U|I|STRIKE|FONT|";
+                for(var i=0; i<onNode.length - 1; i++) {
+                    var nodeName = (/^STRONG$/.test(onNode[i])? 'B': (/^EM/.test(onNode[i])? 'I': onNode[i]));
+                    if(/^FONT$/i.test(nodeName)) {
+                        dom.changeTxt(list.commandMap[nodeName], fontFamily);
+                    }
+                    else {
+                        dom.addClass(list.commandMap[nodeName], "on");
+                    }
+                    map = map.replace(nodeName+"|", "");
+                }
+
+                /** remove */
+                map = map.split("|");
+                for(var i=0; i<map.length - 1; i++) {
+                    if(/^FONT$/i.test(map[i])) {
+                        dom.changeTxt(list.commandMap[map[i]], fontFamily);
+                    }
+                    else {
+                        dom.removeClass(list.commandMap[map[i]], "on");
+                    }
+                }
+            };
+
+            var onKeyDown_wysiwyg = function(e) {
+                var target = e.target;
+                var keyCode = e.keyCode;
+                var shift = e.shiftKey;
+                var ctrl = e.ctrlKey;
+                var alt = e.altKey;
+
+
+                switch(keyCode) {
+                    case 8: /**backspace key*/
+                        if(target.childElementCount === 1 && target.children[0].innerHTML === "<br>") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            return false;
+                        }
+                        break;
+                    case 9: /**tab key*/
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        if(ctrl || alt) break;
+
+                        var currentNode = wysiwygSelection.getPElementInFocusNode().parentNode;
+
+                        if(currentNode && /^TD$/i.test(currentNode.tagName)) {
+                            var table = dom.getParentNode(currentNode, "table");
+                            var cells = dom.getListChildren(table, dom.isCell);
+                            var idx = shift? dom.prevIdx(cells, currentNode): dom.nextIdx(cells, currentNode);
+
+                            if(idx === cells.length && !shift) idx = 0;
+                            if(idx === -1 && shift) idx = cells.length - 1;
+
+                            var moveCell = cells[idx];
+                            if(!moveCell) return false;
+
+                            var range = wysiwygSelection.createRange();
+                            range.setStart(moveCell, 0);
+                            range.setEnd(moveCell, 0);
+
+                            var selection = wysiwygSelection.getSelection();
+                            if (selection.rangeCount > 0) {
+                                selection.removeAllRanges();
+                            }
+                            selection.addRange(range);
+
+                            break;
+                        }
+
+                        /** P 노드́¼ë•Œ */
+                        if(shift) break;
+
+                        var tabText = context.element.wysiwygWindow.document.createTextNode(new Array(editor.tabSize + 1).join("\u00A0"));
+                        editor.insertNode(tabText);
+
+                        var selection = wysiwygSelection.getSelection();
+                        var rng = wysiwygSelection.createRange();
+
+                        rng.setStart(tabText, editor.tabSize);
+                        rng.setEnd(tabText, editor.tabSize);
+
+                        if (selection.rangeCount > 0) {
+                            selection.removeAllRanges();
+                        }
+
+                        selection.addRange(rng);
+
+                        break;
+                }
+            };
+
+            var onScroll_wysiwyg = function() {
+                if(context.argument._imageElement) {
+                    var t = (context.argument._imageElement.offsetTop + context.argument._imageResize_parent_t - context.element.wysiwygWindow.scrollY);
+
+                    context.element.imageResizeDiv.style.top = t + "px"
+                    context.element.imageResizeBtn.style.top = (t + context.argument._imageElement_h) + "px";
+                }
+            };
+
+            var onClick_dialog = function(e) {
+                if(/modal-dialog/.test(e.target.className) || /close/.test(e.target.getAttribute("data-command"))) {
+                    editor.subOff();
+                }
+            };
+
+            var onChange_imgInput = function() {
+                try {
+                    if (this.files && this.files[0]) {
+                        editor.showLoding();
+                        editor.subOff();
+
+                        var reader = new FileReader();
+
+                        reader.onload = function () {
+                            try {
+                                context.argument._imageFileSrc = reader.result;
+
+                                var oImg = document.createElement("IMG");
+                                oImg.src = context.dialog.imgInputUrl.value.trim().length > 0 ? context.dialog.imgInputUrl.value : context.argument._imageFileSrc;
+                                oImg.style.width = context.user.imageSize;
+                                // wysiwygSelection.getPElementInFocusNode().appendChild(oImg);
+                                editor.insertNode(oImg);
+                                // editor.appendP(oImg);
+
+                                context.argument._imageFileSrc = null;
+                                context.dialog.imgInputFile.value = "";
+                                context.dialog.imgInputUrl.value = "";
+                            } finally {
+                                editor.closeLoding();
+                            }
+                        };
+
+                        reader.readAsDataURL(this.files[0]);
+                    }
+                } catch(e) {
+                    editor.closeLoding();
+                }
+            };
+
+            var onClick_imageResizeBtn = function(e) {
+                var command = e.target.getAttribute("data-command") || e.target.parentNode.getAttribute("data-command");
+
+                if(!command) return;
+
+                if(/^\d+$/.test(command)) {
+                    context.argument._imageElement.style.height = "";
+                    context.argument._imageElement.style.width = command + "%";
+                }
+                else if(/remove/.test(command)){
+                    context.argument._imageElement.remove();
+                }
+
+                editor.subOff();
+                wysiwygSelection.focus();
+
+                e.preventDefault();
+                e.stopPropagation();
+            };
+
+            var onMouseDown_image_ctrl = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                context.element.resizeBackground.style.display = "block";
+                context.element.imageResizeBtn.style = "none";
+
+                document.addEventListener('mousemove', resize_image);
+                document.addEventListener('mouseup', function(){
+                    document.removeEventListener('mousemove', resize_image);
+                    cancel_resize_image();
+                });
+            };
+
+            var resize_image = function(e) {
+                var w = (e.clientX - context.argument._imageElement_l - context.element.topArea.offsetLeft);
+                var h = ((context.argument._imageElement_h/context.argument._imageElement_w) * w);
+
+                context.argument._imageElement.style.width = w + "px";
+                context.argument._imageElement.style.height = h + "px";
+
+                var parentElement = context.argument._imageElement.offsetParent;
+                var parentL = 1;
+                while(parentElement) {
+                    parentL += (parentElement.offsetLeft + + parentElement.clientLeft);
+                    parentElement = parentElement.offsetParent;
+                }
+
+                var l = (context.argument._imageElement.offsetLeft + parentL);
+
+                context.element.imageResizeDiv.style.left = l + "px";
+                context.element.imageResizeDiv.style.width = w + "px";
+                context.element.imageResizeDiv.style.height = h + "px";
+
+                dom.changeTxt(context.element.imageResizeDisplay, Math.round(w) + " x " + Math.round(h));
+            };
+
+            var cancel_resize_image = function() {
+                context.element.resizeBackground.style.display = "none";
+                context.element.imageResizeDiv.style.display = "none";
+                context.element.imageResizeBtn.style.display = "none";
+                // context.argument._imageElement = null;
+            };
+
+            var onMouseMove_tablePicker = function(e) {
+                var x = Math.ceil(e.offsetX/18);
+                var y = Math.ceil(e.offsetY/18);
+                x = x<1? 1: x;
+                y = y<1? 1: y;
+                context.tool.tableHighlight.style.width = x + "em";
+                context.tool.tableHighlight.style.height = y + "em";
+
+                var x_u = x<5? 5: (x>9? 10: x+1);
+                var y_u = y<5? 5: (y>9? 10: y+1);
+                context.tool.tableUnHighlight.style.width = x_u + "em";
+                context.tool.tableUnHighlight.style.height = y_u + "em";
+
+                dom.changeTxt(context.tool.tableDisplay, x + " x " + y);
+                context.argument._tableXY = [x, y];
+            };
+
+            var onMouseDown_resizeBar = function(e) {
+                context.argument._resizeClientY = e.clientY;
+                context.element.resizeBackground.style.display = "block";
+
+                document.addEventListener('mousemove', resize_editor);
+                document.addEventListener('mouseup', function () {
+                    document.removeEventListener('mousemove', resize_editor);
+                    context.element.resizeBackground.style.display = "none";
+                });
+            };
+
+            var resize_editor = function(e) {
+                var resizeInterval = (e.clientY - context.argument._resizeClientY);
+
+                context.element.editorArea.style.height = (context.element.editorArea.offsetHeight + resizeInterval) + "px";
+
+                context.argument._innerHeight = (context.element.editorArea.offsetHeight + resizeInterval);
+
+                context.argument._resizeClientY = e.clientY;
+            };
+
+            var dialog_submit = function(e) {
+                var className = this.classList[this.classList.length - 1];
+
+                editor.showLoding();
+                editor.subOff();
+
+                e.preventDefault();
+                e.stopPropagation();
+
+                try {
+                    switch(className) {
+                        case 'sun-editor-id-submit-link':
+                            if(context.dialog.linkText.value.trim().length === 0) break;
+
+                            var url = /^https?:\/\//.test(context.dialog.linkText.value)? context.dialog.linkText.value: "http://" +  context.dialog.linkText.value;
+                            var anchor = context.dialog.linkAnchorText || context.dialog.document.getElementById("linkAnchorText");
+                            var anchorText = anchor.value.length === 0? url: anchor.value;
+
+                            var oA = document.createElement("A");
+                            oA.href = url;
+                            oA.textContent = anchorText;
+
+                            editor.insertNode(oA);
+                            // editor.pure_execCommand("createLink", false, url);
+                            // wysiwygSelection.getSelection().focusNode.parentNode.text = anchorText;
+
+                            context.dialog.linkText.value = "";
+                            context.dialog.linkAnchorText.value = "";
+                            break;
+                        case 'sun-editor-id-submit-image':
+                            if(!context.argument._imageFileSrc && context.dialog.imgInputUrl.value.trim().length === 0) break;
+
+                            var oImg = document.createElement("IMG");
+                            oImg.src = context.dialog.imgInputUrl.value.trim().length>0? context.dialog.imgInputUrl.value: context.argument._imageFileSrc;
+                            oImg.style.width = "350px";
+
+                            // wysiwygSelection.getPElementInFocusNode().appendChild(oImg);
+                            editor.insertNode(oImg);
+                            // editor.appendP(oImg);
+
+                            context.argument._imageFileSrc = null;
+                            context.dialog.imgInputFile.value = "";
+                            context.dialog.imgInputUrl.value = "";
+                            break;
+                        case'sun-editor-id-submit-video':
+                            if(context.dialog.videoInputUrl.value.trim().length === 0) break;
+
+                            var url = context.dialog.videoInputUrl.value.replace(/^https?:/, '');
+                            var oIframe = document.createElement("IFRAME");
+                            var x_v = context.dialog.video_x.value;
+                            var y_v = context.dialog.video_y.value;
+
+                            /** youtube */
+                            if(/youtu\.?be/.test(url)) {
+                                url = url.replace('watch?v=', '');
+                                if(!/^\/\/.+\/embed\//.test(url)) {
+                                    var youtubeUrl = url.match(/^\/\/.+\//)[0]
+                                    url = url.replace(youtubeUrl, '//www.youtube.com/embed/');
+                                }
+                            }
+
+                            oIframe.src = url;
+                            oIframe.width = (/^\d+$/.test(x_v)? x_v: context.user.videoX);
+                            oIframe.height = (/^\d+$/.test(y_v)? y_v: context.user.videoY);
+                            oIframe.frameBorder = "0";
+                            oIframe.allowFullscreen = true;
+
+                            // wysiwygSelection.getPElementInFocusNode().appendChild(oIframe);
+                            editor.insertNode(oIframe);
+                            editor.appendP(oIframe);
+
+                            context.dialog.videoInputUrl.value = "";
+                            context.dialog.video_x.value = context.user.videoX;
+                            context.dialog.video_y.value = context.user.videoY;
+
+                            break;
+                    }
+                }catch(e) {
+                    editor.closeLoding();
+                    return false;
+                }
+
+                editor.closeLoding();
+                return false;
+            };
+
+			/** ́´ë²¤íŠ¸ 등록 */
+            window.onresize = function(){resize_window()};
+            context.tool.bar.addEventListener("click", onClick_toolbar);
+            context.dialog.modal.addEventListener("click", onClick_dialog);
+            context.element.imageResizeBtn.addEventListener('click', onClick_imageResizeBtn);
+            context.element.wysiwygWindow.addEventListener("keydown", onKeyDown_wysiwyg);
+            context.dialog.imgInputFile.addEventListener("change", onChange_imgInput);
+            context.element.wysiwygWindow.addEventListener('scroll', onScroll_wysiwyg);
+            context.tool.tablePicker.addEventListener('mousemove', onMouseMove_tablePicker);
+            context.element.resizebar.addEventListener("mousedown", onMouseDown_resizeBar);
+            context.element.imageResizeController.addEventListener('mousedown', onMouseDown_image_ctrl);
+            context.element.wysiwygWindow.addEventListener("mousedown", onMouseDown_wysiwyg);
+            context.element.wysiwygWindow.document.addEventListener("selectionchange", onSelectionChange_wysiwyg);
+            for(var i=0; i<context.dialog.forms.length; i++) {
+                context.dialog.forms[i].getElementsByClassName("btn-primary")[0].addEventListener("click", dialog_submit);
+            };
+
+            return {
+                cancel_resize_image : cancel_resize_image
+            };
+        })();
+
+        /**
+         * user func
+         * @type {{save, getContent, setContent, appendContent, disabled, enabled, show, hide}}
+         */
+        var user = (function() {
+            return {
+                save : function() {
+                    if(context.argument._wysiwygActive) {
+                        context.element.textElement.innerHTML = context.element.wysiwygWindow.document.body.innerHTML;
+                    } else {
+                        context.element.textElement.innerHTML = context.element.source.value;
+                    }
+                },
+
+                getContent : function() {
+                    var content = "";
+                    if(context.argument._wysiwygActive) {
+                        content = context.element.wysiwygWindow.document.body.innerHTML;
+                    } else {
+                        content = context.element.source.value;
+                    }
+                    return content;
+                },
+
+                setContent : function(content) {
+                    if(context.argument._wysiwygActive) {
+                        context.element.wysiwygWindow.document.body.innerHTML = content;
+                    } else {
+                        context.element.source.value = content;
+                    }
+                },
+
+                appendContent : function(content) {
+                    if(context.argument._wysiwygActive) {
+                        context.element.wysiwygWindow.document.body.innerHTML += content;
+                    } else {
+                        context.element.source.value += content;
+                    }
+                },
+
+                disabled : function() {
+                    context.tool.cover.style.display = "block";
+                    context.element.wysiwygWindow.document.body.setAttribute("contenteditable", false);
+                },
+
+                enabled : function() {
+                    context.tool.cover.style.display = "none";
+                    context.element.wysiwygWindow.document.body.setAttribute("contenteditable", true);
+                },
+
+                show : function() {
+                    context.element.topArea.style.cssText = context.argument._originCssText;
+                },
+
+                hide : function() {
+                    context.element.topArea.style.display = "none";
+                }
+            };
+        })();
+
+        return {
+            save : user.save,
+            getContent : user.getContent,
+            setContent : user.setContent,
+            appendContent : user.appendContent,
+            disabled : user.disabled,
+            enabled : user.enabled,
+            show : user.show,
+            hide : user.hide
+        }
+	};
+
+    var createEditor = function (options){
+        var lang = SUNEDITOR.lang? SUNEDITOR.lang: SUNEDITOR.defaultLang;
+
+        var toolBar = function() {
+            var html = '<div class="sun-editor-id-toolbar-cover"></div>'+
+                /** 글꼴, 포멧 */
+                '<div class="tool_module">'+
+                '    <ul class="editor_tool">';
+                    if(options.showFont) {
+                        html += ''+
+                        '        <li class="compact_editor">'+
+                        '            <button type="button" class="btn_editor btn_font" title="'+lang.toolbar.fontFamily+'" data-display="sub">'+
+                        '                <span class="txt sun-editor-font-family">'+lang.toolbar.fontFamily+'</span><span class="img_editor ico_more"></span>'+
+                        '            </button>'+
+                        '            <div class="layer_editor" style="display: none;">'+
+                        '                <div class="inner_layer list_family">'+
+                        '                    <ul class="list_editor sun-editor-list-font-family">'+
+                        '                        <li><button type="button" class="btn_edit default" data-command="fontName" data-value="inherit" data-txt="'+lang.toolbar.fontFamily+'" style="font-family:inherit;">'+lang.toolbar.fontFamilyDelete+'</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Arial" data-txt="Arial" style="font-family:Arial;">Arial</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Comic Sans MS" data-txt="Comic Sans MS" style="font-family:Comic Sans MS;">Comic Sans MS</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Courier New,Courier" data-txt="Courier New" style="font-family:Courier New,Courier;">Courier New</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Georgia" data-txt="Georgia" style="font-family:Georgia;">Georgia</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="tahoma" data-txt="tahoma" style="font-family:tahoma;">Tahoma</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Trebuchet MS,Helvetica" data-txt="Trebuchet MS" style="font-family:Trebuchet MS,Helvetica;">Trebuchet MS</button></li>'+
+                        '                        <li><button type="button" class="btn_edit" data-command="fontName" data-value="Verdana" data-txt="Verdana" style="font-family:Verdana;">Verdana</button></li>'+
+                        '                    </ul>';
+                        /** ́‚¬́š©́ž ́¶”ê°€ 글꼴 */
+                        if(options.addFont) {
+                            html += '        <ul class="list_editor list_family_add sun-editor-list-font-family-add">';
+                            for (var i = 0; i < options.addFont.length; i++) {
+                                var font = options.addFont[i];
+                                html += '        <li><button type="button" class="btn_edit" data-command="fontName" data-value="'+font.value+'" data-txt="'+font.text+'" style="font-family:'+font.value+'">'+font.text+'</button></li>';
+                            }
+                            html += '        </ul>';
+                        }
+
+                        html += '        </div>'+
+                        '            </div>'+
+                        '        </li>';
+                    }
+                    if(options.showFormats) {
+                        html += ''+
+                        '        <li class="compact_editor">'+
+                        '            <button type="button" class="btn_editor btn_size" title="'+lang.toolbar.formats+'" data-display="sub">'+
+                        '                <span class="txt">'+lang.toolbar.formats+'</span><span class="img_editor ico_more"></span>'+
+                        '            </button>'+
+                        '            <div class="layer_editor layer_size">'+
+                        '                <div class="inner_layer">'+
+                        '                    <ul class="list_editor font_size_list">'+
+                        '                        <li><button type="button" class="btn_edit" style="height:30px;" data-command="format" data-value="P"><p style="font-size:13pt;">nomal</p></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:45px;" data-command="format" data-value="h1"><h1>Header 1</h1></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:34px;" data-command="format" data-value="h2"><h2>Header 2</h2></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:26px;" data-command="format" data-value="h3"><h3>Header 3</h3></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:23px;" data-command="format" data-value="h4"><h4>Header 4</h4></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:19px;" data-command="format" data-value="h5"><h5>Header 5</h5></button></li>'+
+                        '                        <li><button type="button" class="btn_edit" style="height:15px;" data-command="format" data-value="h6"><h6>Header 6</h6></button></li>'+
+                        '                    </ul>'+
+                        '                </div>'+
+                        '            </div>'+
+                        '        </li>' ;
+                    }
+                html += '</ul>'+
+                    '</div>'+
+                /** 굵게, ë°‘́¤„ 등 */
+                '<div class="tool_module">'+
+                '   <ul class="editor_tool">';
+                if(options.showBold) {
+                    html += ''+
+                    '       <li class="compact_editor">'+
+                    '           <button type="button" class="btn_editor sun-editor-id-bold" title="'+lang.toolbar.bold+' (Ctrl+B)" data-command="bold"><div class="ico_bold"></div></button>'+
+                    '       </li>';
+                }
+                if(options.showUnderline) {
+                    html += ''+
+                    '       <li class="compact_editor">'+
+                    '           <button type="button" class="btn_editor sun-editor-id-underline" title="'+lang.toolbar.underline+' (Ctrl+U)" data-command="underline"><div class="ico_underline"></div></button>'+
+                    '       </li>';
+                }
+                if(options.showItalic) {
+                    html += ''+
+                    '       <li>'+
+                    '           <button type="button" class="btn_editor sun-editor-id-italic" title="'+lang.toolbar.italic+' (Ctrl+I)" data-command="italic"><div class="ico_italic"></div></button>'+
+                    '       </li>';
+                }
+                if(options.showStrike) {
+                    html += ''+
+                    '       <li>'+
+                    '           <button type="button" class="btn_editor sun-editor-id-strike" title="'+lang.toolbar.strike+' (Ctrl+D)" data-command="strikethrough"><div class="ico_strike"></div></button>'+
+                    '       </li>';
+                }
+            html +='</ul>'+
+                '</div>'+
+                /** ́ƒ‰́ƒ ́„ 택 */
+                '<div class="tool_module">'+
+                '    <ul class="editor_tool">';
+                if(options.showFontColor) {
+                    html += ''+
+                    '        <li class="compact_editor">'+
+                    '            <div class="box_color" data-display="sub">'+
+                    '                <strong class="screen_out">'+lang.toolbar.fontColor+'</strong>'+
+                    '                <button type="button" class="btn_editor" title="'+lang.toolbar.fontColor+'">'+
+                    '                    <div class="ico_fcolor">'+
+                    '                        <em class="color_font" style="background-color:#1f92fe"></em>'+
+                    '                    </div>'+
+                    '                </button>'+
+                    '            </div>'+
+                    '            <div class="layer_editor layer_color" data-command="foreColor">'+
+                    '                <div class="inner_layer">'+
+                    '                    <div class="pallet_bgcolor">'+
+                    '                        <ul class="list_color list_bgcolor">'+
+                    '                            <li><button type="button" class="btn_color color_ff0000" style="background-color:#ff0000;">#ff0000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ff5e00" style="background-color:#ff5e00;">#ff5e00<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffe400" style="background-color:#ffe400;">#ffe400<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_abf200" style="background-color:#abf200;">#abf200<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_00d8ff" style="background-color:#00d8ff;">#00d8ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_0055ff" style="background-color:#0055ff;">#0055ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_6600ff" style="background-color:#6600ff;">#6600ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ff00dd" style="background-color:#ff00dd;">#ff00dd<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_000000" style="background-color:#000000;">#000000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffd8d8" style="background-color:#ffd8d8;">#ffd8d8<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_fae0d4" style="background-color:#fae0d4;">#fae0d4<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_faf4c0" style="background-color:#faf4c0;">#faf4c0<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_e4f7ba" style="background-color:#e4f7ba;">#e4f7ba<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_d4f4fa" style="background-color:#d4f4fa;">#d4f4fa<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_d9e5ff" style="background-color:#d9e5ff;">#d9e5ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_e8d9ff" style="background-color:#e8d9ff;">#e8d9ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffd9fa" style="background-color:#ffd9fa;">#ffd9fa<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffffff color_white" style="background-color:#ffffff;">#ffffff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffa7a7" style="background-color:#ffa7a7;">#ffa7a7<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffc19e" style="background-color:#ffc19e;">#ffc19e<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_faed7d" style="background-color:#faed7d;">#faed7d<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_cef279" style="background-color:#cef279;">#cef279<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_b2ebf4" style="background-color:#b2ebf4;">#b2ebf4<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_b2ccff" style="background-color:#b2ccff;">#b2ccff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_d1b2ff" style="background-color:#d1b2ff;">#d1b2ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_ffb2f5" style="background-color:#ffb2f5;">#ffb2f5<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_bdbdbd" style="background-color:#bdbdbd;">#bdbdbd<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_f15f5f" style="background-color:#f15f5f;">#f15f5f<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_f29661" style="background-color:#f29661;">#f29661<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_e5d85c" style="background-color:#e5d85c;">#e5d85c<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_bce55c" style="background-color:#bce55c;">#bce55c<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_5cd1e5" style="background-color:#5cd1e5;">#5cd1e5<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_6699ff" style="background-color:#6699ff;">#6699ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_a366ff" style="background-color:#a366ff;">#a366ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_f261df" style="background-color:#f261df;">#f261df<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_8c8c8c" style="background-color:#8c8c8c;">#8c8c8c<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_980000" style="background-color:#980000;">#980000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_993800" style="background-color:#993800;">#993800<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_998a00" style="background-color:#998a00;">#998a00<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_6b9900" style="background-color:#6b9900;">#6b9900<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_008299" style="background-color:#008299;">#008299<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_003399" style="background-color:#003399;">#003399<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_3d0099" style="background-color:#3d0099;">#3d0099<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_990085" style="background-color:#990085;">#990085<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_353535" style="background-color:#353535;">#353535<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_670000" style="background-color:#670000;">#670000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_662500" style="background-color:#662500;">#662500<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_665c00" style="background-color:#665c00;">#665c00<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_476600" style="background-color:#476600;">#476600<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_005766" style="background-color:#005766;">#005766<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_002266" style="background-color:#002266;">#002266<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_290066" style="background-color:#290066;">#290066<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_660058" style="background-color:#660058;">#660058<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li class="compact_color"><button type="button" class="btn_color" style="background-color:#222222;">#222222<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                        </ul>'+
+                    '                    </div>'+
+                    '                </div>'+
+                    '            </div>'+
+                    '        </li>';
+                }
+                if(options.showHiliteColor) {
+                    html += ''+
+                    '        <li>'+
+                    '            <strong class="screen_out">'+lang.toolbar.hiliteColor+'</strong>'+
+                    '            <button type="button" class="btn_editor btn_fbgcolor" title="'+lang.toolbar.hiliteColor+'" data-display="sub">'+
+                    '                <div class="img_editor ico_fcolor_w">'+
+                    '                    <em class="color_font" style="background-color:#1f92fe"></em>'+
+                    '                </div>'+
+                    '            </button>'+
+                    '            <div class="layer_editor layer_color" data-command="hiliteColor">'+
+                    '                <div class="inner_layer">'+
+                    '                    <div class="pallet_bgcolor pallet_text">'+
+                    '                        <ul class="list_color list_bgcolor">'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#1e9af9;">#1e9af9<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#00b8c6;">#00b8c6<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#6cce02;">#6cce02<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#ff9702;">#ff9702<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#ff0000;">#ff0000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#ff00dd;">#ff00dd<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#6600ff;">#6600ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#000;background-color:#cce9ff;">#cce9ff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#000;background-color:#fcfd4c;">#fcfd4c<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color color_white" style="color:#000;background-color:#ffffff;">#ffffff<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#000;background-color:#dfdede;">#dfdede<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#8c8c8c;">#8c8c8c<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li><button type="button" class="btn_color" style="color:#fff;background-color:#000000;">#000000<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                            <li class="compact_color"><button type="button" class="btn_color" style="background-color:#222222;">#222222<span class="bg_check"></span><span class="bg_btnframe"></span></button></li>'+
+                    '                        </ul>'+
+                    '                    </div>'+
+                    '                </div>'+
+                    '            </div>'+
+                    '        </li>';
+                }
+            html +='</ul>'+
+                '</div>';
+                /** 들́—¬́“°ê¸°, ë‚´́–´́“°ê¸° */
+            if(options.showInOutDent) {
+                html += ''+
+                '<div class="tool_module">'+
+                '    <ul class="editor_tool">'+
+                '        <li>'+
+                '            <button type="button" class="btn_editor" title="'+lang.toolbar.indent+'" data-command="indent">'+
+                '                <div class="img_editor ico_indnet"></div>'+
+                '            </button>'+
+                '        </li>'+
+                '        <li>'+
+                '            <button type="button" class="btn_editor" title="'+lang.toolbar.outdent+'" data-command="outdent">'+
+                '                <div class="img_editor ico_outdent"></div>'+
+                '            </button>'+
+                '        </li>'+
+                '    </ul>'+
+                '</div>';
+            }
+                /** ́ •ë ¬, 구분́„  ́ƒ́ž */
+            html += '<div class="tool_module">'+
+                '    <ul class="editor_tool">';
+                if(options.showAlign) {
+                    html += ''+
+                    '        <li>'+
+                    '            <strong class="screen_out">'+lang.toolbar.align+'</strong>'+
+                    '            <button type="button" class="btn_editor btn_align" title="'+lang.toolbar.align+'" data-display="sub">'+
+                    '                <span class="img_editor ico_align_l">'+lang.toolbar.alignLeft+'</span>'+
+                    '            </button>'+
+                    '            <div class="layer_editor layer_align">'+
+                    '                <div class="inner_layer inner_layer_type2">'+
+                    '                    <ul class="list_editor">'+
+                    '                        <li><button type="button" class="btn_edit btn_align" data-command="justifyleft" title="'+lang.toolbar.alignLeft+'"><span class="img_editor ico_align_l"></span>'+lang.toolbar.left+'</button></li>'+
+                    '                        <li><button type="button" class="btn_edit btn_align" data-command="justifycenter" title="'+lang.toolbar.alignCenter+'"><span class="img_editor ico_align_c"></span>'+lang.toolbar.center+'</button></li>'+
+                    '                        <li><button type="button" class="btn_edit btn_align" data-command="justifyright" title="'+lang.toolbar.alignRight+'"><span class="img_editor ico_align_r"></span>'+lang.toolbar.right+'</button></li>'+
+                    '                        <li><button type="button" class="btn_edit btn_align" data-command="justifyfull" title="'+lang.toolbar.justifyFull+'"><span class="img_editor ico_align_f"></span>'+lang.toolbar.bothSide+'</button></li>'+
+                    '                    </ul>'+
+                    '                </div>'+
+                    '            </div>'+
+                    '        </li>';
+                }
+                if(options.showList) {
+                    html += ''+
+                    '        <li>'+
+                    '            <button type="button" class="btn_editor" title="'+lang.toolbar.list+'" data-display="sub">'+
+                    '                <div class="img_editor ico_list ico_list_num"></div>'+
+                    '            </button>'+
+                    '            <div class="layer_editor layer_list">'+
+                    '                <div class="inner_layer inner_layer_type2">'+
+                    '                    <ul class="list_editor">'+
+                    '                        <li><button type="button" class="btn_edit" data-command="insertOrderedList" data-value="DECIMAL" title="'+lang.toolbar.orderList+'"><span class="img_editor ico_list ico_list_num"></span></button></li>'+
+                    '                        <li><button type="button" class="btn_edit" data-command="insertUnorderedList" data-value="DISC" title="'+lang.toolbar.unorderList+'"><span class="img_editor ico_list ico_list_square"></span></button></li>'+
+                    '                    </ul>'+
+                    '                </div>'+
+                    '            </div>'+
+                    '        </li>';
+                }
+                if(options.showLine) {
+                    html += ''+
+                    '        <li>'+
+                    '            <strong class="screen_out">'+lang.toolbar.line+'</strong>'+
+                    '            <button type="button" class="btn_editor btn_line" title="'+lang.toolbar.line+'" data-display="sub">'+
+                    '                <hr style="border-width: 1px 0px 0px; border-style: solid none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '                <hr style="border-width: 1px 0px 0px; border-style: dotted none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '                <hr style="border-width: 1px 0px 0px; border-style: dashed none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '            </button>'+
+                    '            <div class="layer_editor layer_line">'+
+                    '                <div class="inner_layer inner_layer_type2">'+
+                    '                    <ul class="list_editor">'+
+                    '                        <li><button type="button" class="btn_edit btn_line" data-command="horizontalRules" data-value="hr1">'+
+                    '                                <hr style="border-width: 1px 0px 0px; border-style: solid none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '                            </button>'+
+                    '                        </li>'+
+                    '                        <li>'+
+                    '                            <button type="button" class="btn_edit btn_line" data-command="horizontalRules" data-value="hr2">'+
+                    '                                <hr style="border-width: 1px 0px 0px; border-style: dotted none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '                            </button>'+
+                    '                        </li>'+
+                    '                        <li>'+
+                    '                            <button type="button" class="btn_edit btn_line" data-command="horizontalRules" data-value="hr3">'+
+                    '                                <hr style="border-width: 1px 0px 0px; border-style: dashed none none; border-color: black; border-image: initial; height: 1px;">'+
+                    '                            </button>'+
+                    '                        </li>'+
+                    '                    </ul>'+
+                    '                </div>'+
+                    '            </div>'+
+                    '        </li>';
+                }
+            html +='</ul>'+
+                '</div>'+
+                /** í…Œ́´ë¸”, 링크, ́‚¬́§„ */
+                '<div class="tool_module">'+
+                '    <ul class="editor_tool">';
+            if(options.showTable) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.table+'" data-display="sub" data-command="table">'+
+                    '                <div class="img_editor ico_table"></div>'+
+                    '            </button>'+
+                    '            <div class="table-content" style="display: none;">'+
+                    '                <div class="table-data-form">'+
+                    '                    <div class="table-picker sun-editor-id-table-picker" data-command="insertTable" data-value="1x1"></div>'+
+                    '                    <div class="table-highlighted sun-editor-id-table-highlighted"></div>'+
+                    '                    <div class="table-unhighlighted sun-editor-id-table-unhighlighted"></div>'+
+                    '                </div>'+
+                    '                <div class="table-display sun-editor-table-display">1 x 1</div>'+
+                    '            </div>'+
+                    '        </li>';
+            }
+            if(options.showLink) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.link+'" data-display="modal" data-command="link">'+
+                    '                <div class="img_editor ico_url"></div>'+
+                    '            </button>'+
+                    '        </li>';
+            }
+            if(options.showImage) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.image+'" data-display="modal" data-command="image">'+
+                    '                <div class="img_editor ico_picture"></div>'+
+                    '            </button>'+
+                    '        </li>';
+            }
+            html += '</ul>'+
+                '</div>'+
+                /** 동́˜́ƒ, ́ „́²´í™”ë©´, ́†Œ́Š¤íŽ¸́§‘ */
+                '<div class="tool_module">'+
+                '    <ul class="editor_tool">';
+            if(options.showVideo) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.video+'" data-display="modal" data-command="video">'+
+                    '                <div class="img_editor ico_video"></div>'+
+                    '            </button>'+
+                    '        </li>';
+            }
+            if(options.showFullScreen) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.fullScreen+'" data-command="fullScreen">'+
+                    '                <div class="img_editor ico_full_screen_e"></div>'+
+                    '            </button>'+
+                    '        </li>';
+            }
+            if(options.showCodeView) {
+                html += ''+
+                    '        <li>'+
+                    '            <button class="btn_editor" title="'+lang.toolbar.htmlEditor+'" data-command="sorceFrame">'+
+                    '                <div class="img_editor ico_html"></div>'+
+                    '            </button>'+
+                    '        </li>';
+            }
+            html += '</ul>'+
+                '</div>'+
+                '';
+
+            return html;
+        };
+
+        var dialogBox = function() {
+            var html = ''+
+                /** 다́´́–¼ë¡œê·¸ 백그라́š´ë“œ */
+                '<div class="modal-dialog-background sun-editor-id-dialog-back" style="display: none;"></div>'+
+                /** 다́´́–¼ë¡œê·¸ */
+                '<div class="modal-dialog sun-editor-id-dialog-modal" style="display: none;">';
+                /** 링크 ́‚½́ž… 다́´́–¼ë¡œê·¸ */
+                html += ''+
+                    '    <div class="modal-content sun-editor-id-dialog-link" style="display: none;">'+
+                    '        <form class="editor_link">'+
+                    '            <div class="modal-header">'+
+                    '                <button type="button" data-command="close" class="close" aria-label="Close">'+
+                    '                    <span aria-hidden="true" data-command="close">Ă—</span>'+
+                    '                </button>'+
+                    '                <h5 class="modal-title">'+lang.dialogBox.linkBox.title+'</h5>'+
+                    '            </div>'+
+                    '            <div class="modal-body">'+
+                    '                <div class="form-group">'+
+                    '                    <label>'+lang.dialogBox.linkBox.url+'</label>'+
+                    '                    <input class="form-control sun-editor-id-linkurl" type="text">'+
+                    '                </div>'+
+                    '                <div class="form-group">'+
+                    '                    <label>'+lang.dialogBox.linkBox.text+'</label><input class="form-control sun-editor-id-linktext" type="text">'+
+                    '                </div>'+
+                    '            </div>'+
+                    '            <div class="modal-footer">'+
+                    '                <button type="submit" class="btn btn-primary sun-editor-id-submit-link"><span>'+lang.dialogBox.submitButton+'</span></button>'+
+                    '            </div>'+
+                    '        </form>'+
+                    '    </div>';
+                /** ́´ë¯¸́§€ ́‚½́ž… 다́´́–¼ë¡œê·¸ */
+                html += ''+
+                    '    <div class="modal-content sun-editor-id-dialog-image" style="display: none;">'+
+                    '        <form class="editor_image" method="post" enctype="multipart/form-data">'+
+                    '            <div class="modal-header">'+
+                    '                <button type="button" data-command="close" class="close" aria-label="Close">'+
+                    '                    <span aria-hidden="true" data-command="close">Ă—</span>'+
+                    '                </button>'+
+                    '                <h5 class="modal-title">'+lang.dialogBox.imageBox.title+'</h5>'+
+                    '            </div>'+
+                    '            <div class="modal-body">'+
+                    '                <div class="form-group">'+
+                    '                    <label>'+lang.dialogBox.imageBox.file+'</label>'+
+                    '                    <input class="form-control sun-editor-id-image-file" type="file" accept="image/*" multiple="multiple">'+
+                    '                </div>'+
+                    '                <div class="form-group">'+
+                    '                    <label>'+lang.dialogBox.imageBox.url+'</label><input class="form-control sun-editor-id-image-url" type="text">'+
+                    '                </div>'+
+                    '            </div>'+
+                    '            <div class="modal-footer">'+
+                    '                <button type="submit" class="btn btn-primary sun-editor-id-submit-image"><span>'+lang.dialogBox.submitButton+'</span></button>'+
+                    '            </div>'+
+                    '        </form>'+
+                    '    </div>';
+                /** 동́˜́ƒ ́‚½́ž… 다́´́–¼ë¡œê·¸ */
+                html += ''+
+                    '    <div class="modal-content sun-editor-id-dialog-video" style="display: none;">'+
+                    '        <form class="editor_video">'+
+                    '            <div class="modal-header">'+
+                    '                <button type="button" data-command="close" class="close" aria-label="Close">'+
+                    '                    <span aria-hidden="true" data-command="close">Ă—</span>'+
+                    '                </button>'+
+                    '                <h5 class="modal-title">'+lang.dialogBox.videoBox.title+'</h5>'+
+                    '            </div>'+
+                    '            <div class="modal-body">'+
+                    '                <div class="form-group">'+
+                    '                    <label>'+lang.dialogBox.videoBox.url+'</label>'+
+                    '                    <input class="form-control sun-editor-id-video-url" type="text">'+
+                    '                </div>'+
+                    '                <div class="form-group form-size">'+
+                    '                    <div class="size-text"><label class="size-w">'+lang.dialogBox.videoBox.width+'</label><label class="size-x"> </label><label class="size-h">'+lang.dialogBox.videoBox.height+'</label></div>'+
+                    '                    <input type="text" class="form-size-control sun-editor-id-video-x"><label class="size-x">x</label><input type="text" class="form-size-control sun-editor-id-video-y">'+
+                    '                </div>'+
+                    '            </div>'+
+                    '            <div class="modal-footer">'+
+                    '                <button type="submit" class="btn btn-primary sun-editor-id-submit-video"><span>'+lang.dialogBox.submitButton+'</span></button>'+
+                    '            </div>'+
+                    '        </form>'+
+                    '    </div>';
+            html +='</div>';
+
+            return html;
+        };
+
+        var imgDIv = function() {
+            return ''+
+                '<div class="image-resize-dot tl"></div>'+
+                '<div class="image-resize-dot tr"></div>'+
+                '<div class="image-resize-dot bl"></div>'+
+                '<div class="image-resize-dot br-controller sun-editor-img-controller"></div>'+
+                '<div class="image-size-display sun-editor-id-img-display"></div>';
+        };
+
+        var imgBtn = function() {
+            return ''+
+                '<div class="btn-group">'+
+                '   <button type="button" data-command="100" title="'+lang.dialogBox.imageBox.resize100+'"><span class="note-fontsize-10">100%</span></button>'+
+                '   <button type="button" data-command="75" title="'+lang.dialogBox.imageBox.resize75+'"><span class="note-fontsize-10">75%</span></button>'+
+                '   <button type="button" data-command="50" title="'+lang.dialogBox.imageBox.resize50+'"><span class="note-fontsize-10">50%</span></button>'+
+                '   <button type="button" data-command="25" title="'+lang.dialogBox.imageBox.resize25+'"><span class="note-fontsize-10">25%</span></button>'+
+                '</div>'+
+                '<div class="btn-group remove">'+
+                '   <button type="button" data-command="remove" title="'+lang.dialogBox.imageBox.remove+'"><span class="image_remove">X</span></button>'+
+                '</div>';
+        };
+
+        return {
+            toolBar : toolBar,
+            dialogBox : dialogBox,
+            imgDiv : imgDIv,
+            imgBtn : imgBtn
+        };
+    };
+
+    /**
+	 * document create
+     * @param element
+     * @param options
+     * @returns {{constructed: Element, options: *}}
+     * @constructor
+     */
+    var Constructor = function(element, options) {
+        if(!(typeof options === "object")) options = {};
+
+        /** ́‚¬́š©́ž ́˜µ́…˜ ́´ˆê¸°í™” */
+        options.addFont = options.addFont || null;
+        options.videoX = options.videoX || 560;
+        options.videoY = options.videoY || 315;
+        options.imageSize = options.imageSize || '350px';
+        options.height = /^\d+/.test(options.height)?  (/^\d+$/.test(options.height)? options.height+"px": options.height): element.clientHeight+"px";
+        options.width = /^\d+/.test(options.width)?  (/^\d+$/.test(options.width)? options.width+"px": options.width): (/%|auto/.test(element.style.width)? element.style.width: element.clientWidth+"px");
+        /** 툴바 버튼 ë³´́´ê¸° ́„¤́ • */
+        options.showFont = options.showFont !== undefined? options.showFont: true;
+        options.showFormats = options.showFormats !== undefined? options.showFormats: true;
+        options.showBold = options.showBold !== undefined? options.showBold: true;
+        options.showUnderline = options.showUnderline !== undefined? options.showUnderline: true;
+        options.showItalic = options.showItalic !== undefined? options.showItalic: true;
+        options.showStrike = options.showStrike !== undefined? options.showStrike: true;
+        options.showFontColor = options.showFontColor !== undefined? options.showFontColor: true;
+        options.showHiliteColor = options.showHiliteColor !== undefined? options.showHiliteColor: true;
+        options.showInOutDent = options.showInOutDent !== undefined? options.showInOutDent: true;
+        options.showAlign = options.showAlign !== undefined? options.showAlign: true;
+        options.showList = options.showList !== undefined? options.showList: true;
+        options.showLine = options.showLine !== undefined? options.showLine: true;
+        options.showTable = options.showTable !== undefined? options.showTable: true;
+        options.showLink = options.showLink !== undefined? options.showLink: true;
+        options.showImage = options.showImage !== undefined? options.showImage: true;
+        options.showVideo = options.showVideo !== undefined? options.showVideo: true;
+        options.showFullScreen = options.showFullScreen !== undefined? options.showFullScreen: true;
+        options.showCodeView = options.showCodeView !== undefined? options.showCodeView: true;
+
+        /** ́µœ́ƒ́œ„ div */
+        var top_div = document.createElement("DIV");
+        top_div.className = "sun-editor";
+        top_div.style.width = options.width;
+        /** relative div */
+        var relative = document.createElement("DIV");
+        relative.className = "sun-editor-container";
+
+		/** 툴바 */
+        var tool_bar = document.createElement("DIV");
+        tool_bar.className = "sun-editor-id-toolbar";
+        tool_bar.innerHTML = createEditor(options).toolBar();
+
+		/** ́—ë””í„° */
+        var editor_div = document.createElement("DIV");
+        editor_div.className = "sun-editor-id-editorArea";
+        editor_div.style.height = options.height;
+        /** iframe */
+        var iframe = document.createElement("IFRAME");
+        iframe.allowFullscreen = true;
+        iframe.frameBorder = 0;
+        iframe.className = "input_editor sun-editor-id-wysiwyg";
+        iframe.style.display = "block";
+        /** textarea */
+        var textarea = document.createElement("TEXTAREA");
+        textarea.className = "input_editor html sun-editor-id-source";
+        textarea.style.display = "none";
+
+		/** 리́‚¬́´́¦ˆë°” */
+        var resize_bar = document.createElement("DIV");
+        resize_bar.className = "sun-editor-id-resizeBar";
+
+		/** 다́´́–¼ë¡œê·¸ */
+        var dialog_div = document.createElement("DIV");
+        dialog_div.className = "sun-editor-id-dialogBox";
+        dialog_div.innerHTML = createEditor(options).dialogBox();
+
+        /** ́´ë¯¸́§€ ́¡°́ ˆ div */
+        var resize_img = document.createElement("DIV");
+        resize_img.className = "modal-image-resize";
+        resize_img.innerHTML = createEditor(options).imgDiv();
+        /** ́´ë¯¸́§€ ́¡°́ ˆ 버튼 */
+        var resize_img_button = document.createElement("DIV");
+        resize_img_button.className = "image-resize-btn";
+        resize_img_button.innerHTML = createEditor(options).imgBtn();
+
+        /** 로딩 ë°•́Š¤ */
+        var loding_box = document.createElement("DIV");
+        loding_box.className = "sun-editor-id-loding";
+        loding_box.innerHTML = "<div class=\"ico-loding\"></div>";
+
+        /** resize 동́ž‘́‹œ background */
+        var resize_back = document.createElement("DIV");
+        resize_back.className = "sun-editor-id-resize-background";
+
+        /** ́‚¬́š©́ž ́˜µ́…˜ ê°’ 넣기 */
+        dialog_div.getElementsByClassName('sun-editor-id-video-x')[0].value = options.videoX;
+        dialog_div.getElementsByClassName('sun-editor-id-video-y')[0].value = options.videoY;
+
+		/** append */
+        editor_div.appendChild(iframe);
+        editor_div.appendChild(textarea);
+        relative.appendChild(tool_bar);
+        relative.appendChild(editor_div);
+        relative.appendChild(resize_bar);
+        relative.appendChild(dialog_div);
+        relative.appendChild(resize_back);
+        relative.appendChild(resize_img);
+        relative.appendChild(resize_img_button);
+        relative.appendChild(loding_box);
+        top_div.appendChild(relative);
+
+        return {
+        	constructed : {
+                _top : top_div,
+				_toolBar : tool_bar,
+				_editorArea : editor_div,
+				_resizeBar : resize_bar,
+				_dialog : dialog_div,
+                _loding : loding_box,
+                _resizeImg : resize_img,
+                _resizeImgBtn : resize_img_button,
+                _resizeBack : resize_back
+			},
+			options : options
+        };
+    };
+
+    /**
+	 * option and module define
+     * @param cons
+     * @param options
+     * @returns {...}
+     * @constructor
+     */
+    var Context = function(element, cons, options) {
+        /** 내부 ́˜µ́…˜ê°’ ́´ˆê¸°í™” */
+        options._originCssText = cons._top.style.cssText;
+        options._innerHeight = cons._editorArea.clientHeight;
+
+        setTimeout(function(){
+            cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0].contentWindow.document.head.innerHTML = ''+
+                '<meta charset=\"utf-8\">' +
+                '<style type=\"text/css\">' +
+                '   body {margin:15px; word-break:break-all; overflow:auto; font-family:sans-serif;} p {margin:0; padding:0;} blockquote {margin-top:0; margin-bottom:0; margin-right:0;}' +
+                '   table {table-layout:fixed; border:1px solid rgb(204, 204, 204); width:100%; max-width:100%; margin-bottom:20px; background-color:transparent; border-spacing:0px; border-collapse:collapse;}'+
+                '   table tr {border:1px solid #ccc;}'+
+                '   table tr td {border:1px solid #ccc; padding:8px;}'+
+                '</style>';
+            cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0].contentWindow.document.body.setAttribute("contenteditable", true);
+            if(element.value.length > 0) {
+                cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0].contentWindow.document.body.innerHTML = '<p>'+element.value+'</p>';
+            } else {
+                cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0].contentWindow.document.body.innerHTML = '<p>&#65279</p>';
+            }
+        }, 0);
+
+        return {
+            argument : {
+                _copySelection : null,
+                _selectionNode : null,
+                _imageFileSrc : null,
+                _imageElement : null,
+                _imageElement_w : 0,
+                _imageElement_h : 0,
+                _imageElement_l : 0,
+                _imageElement_t : 0,
+                _imageResize_parent_t : 0,
+                _imageResize_parent_l : 0,
+                _wysiwygActive : true,
+                _isFullScreen : false,
+                _innerHeight_fullScreen : 0,
+                _tableXY : [],
+                _resizeClientY : 0,
+                _originCssText : options._originCssText,
+                _innerHeight : options._innerHeight,
+                _windowHeight : window.innerHeight
+			},
+			element : {
+                textElement: element,
+                topArea: cons._top,
+                resizebar: cons._resizeBar,
+                editorArea: cons._editorArea,
+                wysiwygWindow: cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0].contentWindow,
+                wysiwygElement: cons._editorArea.getElementsByClassName('sun-editor-id-wysiwyg')[0],
+                source: cons._editorArea.getElementsByClassName('sun-editor-id-source')[0],
+                loding : cons._loding,
+                imageResizeDiv : cons._resizeImg,
+                imageResizeController : cons._resizeImg.getElementsByClassName('sun-editor-img-controller')[0],
+                imageResizeDisplay : cons._resizeImg.getElementsByClassName('sun-editor-id-img-display')[0],
+                imageResizeBtn : cons._resizeImgBtn,
+                resizeBackground : cons._resizeBack
+            },
+			tool : {
+				bar : cons._toolBar,
+				barHeight : cons._toolBar.offsetHeight,
+				cover : cons._toolBar.getElementsByClassName('sun-editor-id-toolbar-cover')[0],
+				bold : cons._toolBar.getElementsByClassName('sun-editor-id-bold')[0],
+				underline : cons._toolBar.getElementsByClassName('sun-editor-id-underline')[0],
+				italic : cons._toolBar.getElementsByClassName('sun-editor-id-italic')[0],
+				strike : cons._toolBar.getElementsByClassName('sun-editor-id-strike')[0],
+				tablePicker : cons._toolBar.getElementsByClassName('sun-editor-id-table-picker')[0],
+				tableHighlight : cons._toolBar.getElementsByClassName('sun-editor-id-table-highlighted')[0],
+				tableUnHighlight : cons._toolBar.getElementsByClassName('sun-editor-id-table-unhighlighted')[0],
+				tableDisplay : cons._toolBar.getElementsByClassName('sun-editor-table-display')[0],
+				fontFamily : cons._toolBar.getElementsByClassName('sun-editor-font-family')[0],
+				default_fontFamily : cons._toolBar.getElementsByClassName('sun-editor-font-family')[0].textContent,
+				list_fontFamily : cons._toolBar.getElementsByClassName('sun-editor-list-font-family')[0],
+				list_fontFamily_add : cons._toolBar.getElementsByClassName('sun-editor-list-font-family-add')[0]
+			},
+			dialog : {
+                modalArea : cons._dialog,
+                back : cons._dialog.getElementsByClassName('sun-editor-id-dialog-back')[0],
+                modal : cons._dialog.getElementsByClassName('sun-editor-id-dialog-modal')[0],
+                forms : cons._dialog.getElementsByTagName('FORM'),
+				link : cons._dialog.getElementsByClassName('sun-editor-id-dialog-link')[0],
+				linkText : cons._dialog.getElementsByClassName('sun-editor-id-linkurl')[0],
+				linkAnchorText : cons._dialog.getElementsByClassName('sun-editor-id-linktext')[0],
+				image : cons._dialog.getElementsByClassName('sun-editor-id-dialog-image')[0],
+				imgInputFile : cons._dialog.getElementsByClassName('sun-editor-id-image-file')[0],
+				imgInputUrl : cons._dialog.getElementsByClassName('sun-editor-id-image-url')[0],
+				video : cons._dialog.getElementsByClassName('sun-editor-id-dialog-video')[0],
+				videoInputUrl : cons._dialog.getElementsByClassName('sun-editor-id-video-url')[0],
+				video_x : cons._dialog.getElementsByClassName('sun-editor-id-video-x')[0],
+				video_y : cons._dialog.getElementsByClassName('sun-editor-id-video-y')[0]
+			},
+			user : {
+                videoX : options.videoX,
+                videoY : options.videoY,
+                imageSize : options.imageSize
+            }
+		}
+    };
+
+    /**
+     * create Suneditor
+     * @param elementId
+     * @param options
+     * @returns {core}
+     */
+    SUNEDITOR.create = function (elementId, options) {
+        var element = document.getElementById(elementId);
+
+        if(element === null || element === undefined) {
+            alert('Suneditor creation failed :\n\rThe element for that id was not found');
+            return null;
+        }
+
+        var cons = Constructor(element, options);
+
+        /** 형́ œ 노드로 ́ƒ́„± 후 ́ˆ¨ê¹€ */
+        if(typeof element.nextElementSibling === 'object') {
+            element.parentNode.insertBefore(cons.constructed._top, element.nextElementSibling);
+        } else {
+            element.parentNode.appendChild(cons.constructed._top);
+        }
+
+        element.style.display = "none";
+
+        return new core(Context(element, cons.constructed, cons.options));
+    };
+
+})();
+`;
+
+// Styles for SunEditor — extracted from suneditor.html
+// Do NOT edit directly. Source: design-system/temp/suneditor.html
+const SUNEDITOR_CSS = `
+@CHARSET "UTF-8";
+
+/* ë©”́¸ */
+.sun-editor {width:auto; height:auto; border:1px solid #dadada; background-color:#FFF; z-index:10000;}
+.sun-editor th, .sun-editor td, .sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {font-size:14px; font-family:sans-serif; line-height:1.5; color:#111;}
+.sun-editor body, .sun-editor div, .sun-editor dl, .sun-editor dt, .sun-editor dd, .sun-editor ul, .sun-editor ol, .sun-editor li,
+.sun-editor h1, .sun-editor h2, .sun-editor h3, .sun-editor h4, .sun-editor h5, .sun-editor h6, .sun-editor pre, .sun-editor code, .sun-editor form, .sun-editor fieldset,
+.sun-editor legend, .sun-editor textarea, .sun-editor p, .sun-editor blockquote, .sun-editor th, .sun-editor td, .sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {margin:0; padding:0; border:0; color:#000 !important;}
+.sun-editor dl, .sun-editor ul, .sun-editor ol, .sun-editor menu, .sun-editor li {list-style: none !important;}
+.sun-editor hr {margin:6px 0 6px 0 !important;}
+.sun-editor textarea {resize:none !important; border:0 !important;}
+.sun-editor button {border:0 none; background-color:transparent; touch-action:manipulation; cursor:pointer;}
+.sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {vertical-align: middle;}
+.sun-editor button .txt {display: block; margin-top: 0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+
+.sun-editor .btn_align .img_editor {display: inline-block; width:14px; height:13px; margin:-1px 10px 0 0; vertical-align:middle; text-indent:-9999px;}
+.sun-editor .layer_line .img_editor {display: inline-block; width:138px; height:1px; margin:-1px 10px 0 0; vertical-align:middle; text-indent:-9999px;}
+.sun-editor .screen_out {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}
+
+/* ́»¨í…Œ́´ë„ˆ */
+.sun-editor .sun-editor-container {position:relative; width:100%; height:100%;}
+
+/* 툴바 */
+.sun-editor .sun-editor-id-toolbar-cover {position:absolute; display:none; font-size:36px; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:#fefefe; opacity:.5; filter:alpha(opacity=50); cursor:not-allowed; z-index:9;}
+.sun-editor .sun-editor-id-toolbar {overflow:visible; position:relative; height:auto; font-size:0pt; padding:3px 3px 3px 0px; background-color:#fafafa; border-bottom:1px solid #dadada; z-index:9;}
+
+.sun-editor .sun-editor-id-toolbar .tool_module {display:inline-block;}
+.sun-editor .sun-editor-id-toolbar .editor_tool {float: left;height: 32px;margin:5px 0 5px 5px;}
+.sun-editor .sun-editor-id-toolbar .editor_tool li {position:relative; float:left;}
+
+.sun-editor .sun-editor-id-toolbar .layer_editor {display: none; position:absolute; top:34px; left:1px; z-index:1; border:1px solid #bababa; border-radius:2px; background-color:#fff; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, .5); box-shadow:0 3px 9px rgba(0, 0, 0, .5); outline:0 none;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .write_place .inp_txt {float:left; width:100%; height:23px; margin-top:0; font-size:12px; text-indent:6px; border:0 none; outline:0 none;}
+.sun-editor .sun-editor-id-toolbar .layer_editor button {overflow: hidden; width:100%;}
+.sun-editor .sun-editor-id-toolbar .layer_editor button:hover, .sun-editor .editor_tool .layer_editor button:focus {background-color:#f4b124; border-color:#ffebc1; outline:0 none;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_family {left:0; width:156px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_family .default {border-bottom:1px solid #CCC;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_family_add {left:0; width:160px; border-top:1px solid #CCC;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list {left:0; width:180px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .btn_edit {height:auto; padding:2px 10px 5px; line-height:100%;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size18 {padding:1px 10px 6px}
+.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size24 {padding:3px 10px 11px; line-height:24px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size36 {padding:4px 10px 15px; line-height:36px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.layer_list {left:0; width:42px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.layer_line {left:0; width:158px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.write_place {overflow:hidden; float:left; position:relative; height:25px; border:1px solid #dadada;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.layer_color {left:0;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.pallet_bgcolor {width:196px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor {width:180px; height:126px; padding:10px 6px 0 10px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor li {float:left; position:relative; width:16px; height:16px; margin:0 4px 4px 0;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.more_palette {display:none; width:176px; margin:0 10px; padding:8px 0 6px; border-top:1px solid #f3f3f3;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor button {display:block; overflow:hidden; width:16px; height:16px; border-radius:2px; vertical-align:top; text-indent:-9999px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .bg_check {display:none; position:absolute; top:1px; left:1px; width:12px; height:12px; border:1px solid #fff; border-radius:1px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor .bg_btnframe {display:none; position:absolute; top:0; left:0; width:14px; height:14px; border:1px solid #000; border-radius:2px; opacity:.2; filter:alpha(opacity=20);}
+.sun-editor .sun-editor-id-toolbar .layer_editor.box_codeinp {float:left; height:28px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.more_palette .box_bgcolor {width:24px; margin-right:2px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.view_bgcolor {float:left; width:16px; height:16px; padding:3px; border:1px solid #d7d7d7;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.view_bgcolor .inner_bgcolor {width:16px; height:16px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor.inner_bgcolor {display:block; overflow:hidden; width:15px; height:15px; margin:0 auto; text-indent:-9999px;}
+
+.sun-editor .sun-editor-id-toolbar .layer_color {display: none;}
+.sun-editor .sun-editor-id-toolbar .layer_align {left:9px; width:98px;}
+
+.sun-editor .sun-editor-id-toolbar .list_editor {overflow:hidden; width:100%; padding:6px 0;}
+.sun-editor .sun-editor-id-toolbar .list_editor li:first-child {padding-top:0;}
+.sun-editor .sun-editor-id-toolbar .list_editor li {padding-top:5px; width:100%;}
+.sun-editor .sun-editor-id-toolbar .font_size_list li {padding:0px; width:100%;}
+
+.sun-editor .sun-editor-id-toolbar .btn_editor {overflow:hidden; float:left; width:32px; height:32px; border:1px solid #ccc; margin-left:2px; border-radius:2px; font-size:12px; line-height:27px; background-color:#FFF;}
+.sun-editor .sun-editor-id-toolbar .btn_editor.on {border-color:#f4b124; background-color:#ffebc1; -webkit-box-shadow: inset 0 3px 5px #f4b124; box-shadow: inset 0 3px 5px #f4b124;}
+.sun-editor .sun-editor-id-toolbar .btn_editor:hover, .sun-editor .sun-editor-id-toolbar .btn_editor:focus {background-color: #ffebc1; border-color: #f4b124; outline: 0 none;}
+
+.sun-editor .sun-editor-id-toolbar .btn_edit {width:100%; height:28px; padding:0 14px; margin-left:0; font-size:12px; line-height:22px; text-indent:0; text-decoration:none; text-align:left;}
+.sun-editor .sun-editor-id-toolbar .btn_font {width:80px; text-align:left; text-indent:10px;}
+.sun-editor .sun-editor-id-toolbar .btn_size {width:75px; text-align:left; text-indent:7px;}
+.sun-editor .sun-editor-id-toolbar .btn_line {padding:0 5px 0 5px;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .btn_color.checked_color .bg_check {display:block;}
+.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .btn_color.checked_color {border:1px solid #000;}
+
+.sun-editor .sun-editor-id-toolbar .ico_more {position:absolute; top:14px; right:10px; width:7px; height:7px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/br_down_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_bold {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_bold_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_underline {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_underline_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_italic {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_italic_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_strike {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_strokethrough_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_fcolor {width:16px; height:16px; margin:0 auto; margin-bottom: 5px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pencil_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .color_font {overflow: hidden; position:absolute; top:24px; left:9px; width:19px; height:3px; text-indent:-9999px;}
+.sun-editor .sun-editor-id-toolbar .ico_fcolor_w {width:16px; height:16px; margin:0 auto; margin-bottom: 5px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/fill_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_align_l {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_left_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_align_r {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_right_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_align_c {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_center_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_align_f {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_just_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_list {display: inline-block; width:17px; height:17px;}
+.sun-editor .sun-editor-id-toolbar .ico_list_num {display:block; margin:0 auto;background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/list_num_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_list_square {background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/list_bullets_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_indnet {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/indent_increase_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_outdent {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/indent_decrease_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_indent {background-position:-220px -160px;}
+.sun-editor .sun-editor-id-toolbar .ico_line {position:absolute; top:10px; left:9px; width:14px; height:13px; background-position:-190px 0;}
+.sun-editor .sun-editor-id-toolbar .ico_table {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/3x3_grid_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_url {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/link_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_picture {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/picture_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_video {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/movie_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_full_screen_e {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/expand_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_full_screen_i {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/import_icon&48.png') no-repeat; background-size:100%;}
+.sun-editor .sun-editor-id-toolbar .ico_html {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/brackets_icon&48.png') no-repeat; background-size:100%;}
+
+.sun-editor .sun-editor-id-toolbar .img_line1 {height:2px; background-position:0 -30px;}
+.sun-editor .sun-editor-id-toolbar .img_line2 {height:3px; background-position:0 -35px;}
+.sun-editor .sun-editor-id-toolbar .img_line3 {height:6px; background-position:0 -40px;}
+
+.sun-editor .sun-editor-id-toolbar .editor_link {padding:8px 5px 12px 15px;}
+.sun-editor .sun-editor-id-toolbar .editor_link .write_place {height:79px; border:0; overflow:hidden; float:left; position:relative;}
+.sun-editor .sun-editor-id-toolbar .editor_link .write_place .lab_url {position:absolute;top:0;left:0;width:228px;height:23px;font-size:12px;line-height:24px;color:#999; cursor:text;}
+.sun-editor .sun-editor-id-toolbar .editor_link .write_place .inp_txt {height:23px; font-size:12px; font-family:Verdana; line-height:24px; text-indent:0px; margin-top:8px; border:1px solid #CCC}
+.sun-editor .sun-editor-id-toolbar .editor_link .btn_apply_url {float:right; width:35px; height:69px;}
+
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_bgcolor {width:196px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor {width:100%; height:126px; padding:10px 6px 0 10px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor li {float:left; position:relative; width:16px; height:16px; margin:0 4px 4px 0;}
+.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor button {display:block; overflow:hidden; width:16px; height:16px; border-radius:2px; vertical-align:top; text-indent:-9999px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor button.color_white {display:block; overflow:hidden; width:16px; height:16px; border:1px solid #d3d3d3; vertical-align:top; text-indent:-9999px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor .bg_btnframe {display:none; position:absolute; top:0; left:0; width:14px; height:14px; border:1px solid #000; border-radius:2px; opacity:.2; filter:alpha(opacity=20);}
+
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text {width:156px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor {position:relative; z-index:1; width:158px; height:25px; border-radius:2px; border-bottom:0 none; margin: -1px 0 0 -1px;}
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor .emph_txtbgcolor {display:block; width:147px; height:25px; padding-left:11px; font-size:12px; line-height:24px; color:#fff; -webkit-transition-property:background-color,color; -webkit-transition-duration:.2s; transition-property:background-color,color; transition-duration:.2s;}
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor .bg_frame {position:absolute; top:0; left:0; width:156px; height:24px; border:1px solid #000; border-bottom:0 none; opacity:.1; filter:alpha(opacity=10); -webkit-transition:opacity .2s; -webkit-transition:opacity .2s;}
+.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .list_color {width:140px; height:44px; margin:8px 6px 0 10px; padding:0; border-top:0;}
+
+/* ́—ë””í„° ́˜́—­ */
+.sun-editor  .sun-editor-id-editorArea {width:100%;}
+.sun-editor  .sun-editor-id-editorArea .input_editor {width:100%; height:100%; background-color:#FFF;}
+.sun-editor  .sun-editor-id-editorArea .input_editor.html {/*padding:8px;*/ outline-style:none;}
+
+/* 리́‚¬́´́¦ˆ ë°” */
+.sun-editor .sun-editor-id-resizeBar {width:100%; height:10px; border-top:1px solid #dadada; background-color:#fafafa; cursor:ns-resize;}
+.sun-editor .sun-editor-id-resize-background {position:absolute; display:none; top:0; left:0; width:100%; height:100%; z-index:10000;}
+
+/* 다́´́–¼ë¡œê·¸ */
+.sun-editor .sun-editor-id-dialogBox {position:absolute; display:none; top:0; left:0; width:100%; height:100%; z-index:9999;}
+.sun-editor .sun-editor-id-dialogBox label, .sun-editor .sun-editor-id-dialogBox input, .sun-editor .sun-editor-id-dialogBox button {font-size:14px; line-height:1.5; color:#111; margin:0;}
+.sun-editor .sun-editor-id-dialogBox .modal-dialog-background {position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#222; opacity:0.5; z-index:10;}
+
+/* 다́´́–¼ë¡œê·¸ - modal */
+.sun-editor .modal-dialog {position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:11;}
+.sun-editor .modal-dialog .modal-content {position:relative; width:500px; margin:8px auto; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #999; border:1px solid rgba(0, 0, 0, .2); border-radius:6px; outline:0; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, .5); box-shadow:0 3px 9px rgba(0, 0, 0, .5); z-index:11;}
+@media screen and (max-width: 509px) {.sun-editor .modal-dialog .modal-content {width:100%;} }
+.sun-editor .modal-dialog .modal-header {padding:15px 15px 5px 15px; border-bottom:1px solid #e5e5e5;}
+.sun-editor .modal-dialog button.close {-webkit-appearance:none; padding:0; cursor:pointer; background:transparent; border:0;}
+.sun-editor .modal-dialog .close {float:right; font-size:21px; font-weight:bold; line-height:1; color:#000; text-shadow:0 1px 0 #fff; filter:alpha(opacity=100); opacity: 1;}
+.sun-editor .modal-dialog .close:hover, .sun-editor .modal-dialog .close:focus {color:#f4b124 !important;}
+.sun-editor .modal-dialog .modal-body {position:relative; padding:15px;}
+.sun-editor .modal-dialog .form-group {margin-bottom:15px;}
+.sun-editor .modal-dialog .form-size .size-text {width:100%;}
+.sun-editor .modal-dialog .form-size .size-text .size-w {width:70px; text-align:center;}
+.sun-editor .modal-dialog .form-size .size-text .size-h {width:70px; text-align:center;}
+.sun-editor .modal-dialog .form-size .size-x {margin:0 8px 0 8px;}
+.sun-editor .modal-dialog .form-size-control {display:inline-block; width:70px; height:34px; /*padding:6px 12px;*/ font-size:14px; line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
+.sun-editor .modal-dialog .modal-content label {display:inline-block; max-width:100%; margin-bottom:5px; font-weight:bold;}
+.sun-editor .modal-dialog .form-control {display:block; width:100%; height:34px; /*padding:6px 12px;*/ font-size:14px; line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
+.sun-editor .modal-dialog .modal-footer {padding:10px 15px 0px 15px; text-align:right; border-top:1px solid #e5e5e5;}
+.sun-editor .modal-dialog .btn-primary {color:#fff; background-color:#f4b124; border-color:#f4b124;}
+.sun-editor .modal-dialog .modal-content .btn {display:inline-block; padding:6px 12px; margin-bottom:0; font-size:14px; font-weight:normal; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:1px solid transparent; border-radius:4px;}
+.sun-editor .modal-dialog .modal-content .btn:hover, .sun-editor .modal-dialog .modal-content .btn:focus {background-color: #f4a500;}
+.sun-editor .modal-dialog .modal-content input:focus {border-color:#f4b124; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 177, 36, .6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 177, 36, .6);}
+
+/* 로딩 ë°•́Š¤ */
+.sun-editor .sun-editor-id-loding {position:absolute; display:none; width:100%; height:100%; top:0px; left:0px; background-color:#191f26; background-image:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/loding.jpg'); background-repeat:no-repeat; background-position:center; background-size:auto auto; opacity:.7; filter:alpha(opacity=70); z-index:9999;}
+.sun-editor .sun-editor-id-loding .ico-loding {display:none;}
+
+/* í…Œ́´ë¸” ́„ 택 */
+.sun-editor .table-content {position:absolute; top:34px; left:1px; z-index:11; padding:5px; float:left; padding:5px 0; margin:2px 0 0; font-size:14px; text-align:left; list-style:none; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, .15); border-radius:4px; -webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175); box-shadow:0 6px 12px rgba(0, 0, 0, .175);}
+.sun-editor .table-data-form {font-size:18px; padding:0 5px;}
+.sun-editor .table-picker {position:absolute!important; z-index:3; font-size:18px; width:10em; height:10em; cursor:pointer;}
+.sun-editor .table-highlighted {position:absolute!important; z-index:2; font-size:18px; width:1em; height:1em; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pixel_sun.png') repeat;}
+.sun-editor .table-unhighlighted {position:relative!important; z-index:1; font-size:18px; width:5em; height:5em; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pixel_white.png') repeat;}
+.sun-editor .table-display {padding-left:5px;}
+
+/* ́´ë¯¸́§€ 크기 ́¡°́ ˆ */
+.sun-editor .modal-image-resize {position:absolute; display:none; background-color:black; opacity:0.3; z-index:8;}
+.sun-editor .modal-image-resize .image-resize-dot {position:absolute; width:7px; height:7px; border:1px solid black;}
+.sun-editor .modal-image-resize .tl {top:-5px; left:-5px; border-right:0; border-bottom:0;}
+.sun-editor .modal-image-resize .tr {top:-5px; right:-5px; border-bottom:0; border-left:none;}
+.sun-editor .modal-image-resize .bl {bottom:-5px; left:-5px; border-top:0; border-right:0;}
+.sun-editor .modal-image-resize .br-controller {right:-5px; bottom:-5px; background-color:#F00; cursor:se-resize;}
+.sun-editor .modal-image-resize .image-size-display {position:absolute;	right:0; bottom:0; padding:5px; margin:5px; font-size:12px; color:white; background-color:black; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-opacity:.7; -khtml-opacity:.7; -moz-opacity:.7; opacity:.7;}
+
+/* ́´ë¯¸́§€ 크기 ́¡°́ ˆ 버튼 */
+.sun-editor .image-resize-btn {position:absolute; display:none; top:0; left:0; margin-top:-50px !important; z-index:12; display:none; max-width:310px; padding:1px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:1.42857143; text-align:left; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; word-wrap:normal; white-space:normal; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, .2); border-radius:6px; -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .2); box-shadow:0 5px 10px rgba(0, 0, 0, .2); line-break:auto;}
+.sun-editor .image-resize-btn .btn-group {position:relative; display:inline-block; vertical-align:middle; padding:5px 5px 5px 0;}
+.sun-editor .image-resize-btn .btn-group button {position:relative; float:left; border-top-right-radius:0; border-bottom-right-radius:0; margin:0 0 0 2px !important; padding:5px 10px !important; font-size:12px !important; line-height:1.5 !important; border:1px solid #222 !important; border-radius:3px !important; color:#333; background-color:#fff !important; border-color:#ccc !important; display:inline-block; font-size:14px !important; font-weight:normal; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
+/*.sun-editor .image-resize-btn .btn-group.remove {width:40px; height:33px; padding:0 10px 0 0 !important;}*/
+.sun-editor .image-resize-btn .btn-group.remove button {width:100%; height:100%;}
+.sun-editor .image-resize-btn .btn-group.remove button .image_remove {font-weight:bold;}
+.sun-editor .image-resize-btn button:hover, .sun-editor .image-resize-btn button:focus {background-color:#ffebc1 !important; border-color:#f4b124 !important; outline:0 none !important;}
+`;
+
+const DEFAULT_CONFIG = {
+    height: '400px',
+    showFont: true,
+    showFormats: true,
+    showBold: true,
+    showUnderline: true,
+    showItalic: true,
+    showStrike: true,
+    showFontColor: true,
+    showHiliteColor: true,
+    showInOutDent: true,
+    showAlign: true,
+    showList: true,
+    showLine: true,
+    showTable: true,
+    showLink: true,
+    showImage: true,
+    showVideo: true,
+    showFullScreen: true,
+    showCodeView: true,
+    videoX: 560,
+    videoY: 315,
+    imageSize: '350px',
+};
+
+class MatchaTextEditorComponent {
+    set value(v) { this.writeValue(v); }
+    get disabledAttr() {
+        return this._disabled ? '' : null;
+    }
+    constructor(_ngZone) {
+        this._ngZone = _ngZone;
+        this.editorId = `matcha-text-editor-${Math.random().toString(36).substr(2, 9)}`;
+        this.config = { ...DEFAULT_CONFIG };
+        this.contentChange = new EventEmitter();
+        this._editor = null;
+        this._pendingValue = '';
+        this._isSettingValue = false;
+        this._disabled = false;
+        this._observer = null;
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    ngAfterViewInit() {
+        this._ngZone.runOutsideAngular(() => {
+            this._injectSunEditor();
+            this._initEditor();
+        });
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    // ControlValueAccessor
+    writeValue(value) {
+        const v = value || '';
+        this._isSettingValue = true;
+        if (this._editor) {
+            this._editor.setContent(v);
+        }
+        else {
+            this._pendingValue = v;
+        }
+        setTimeout(() => { this._isSettingValue = false; }, 0);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        if (this._editor) {
+            isDisabled ? this._editor.disabled() : this._editor.enabled();
+        }
+    }
+    // Private
+    _injectSunEditor() {
+        if (!document.getElementById('suneditor-style')) {
+            const style = document.createElement('style');
+            style.id = 'suneditor-style';
+            style.textContent = SUNEDITOR_CSS;
+            document.head.appendChild(style);
+        }
+        if (!document.getElementById('suneditor-script')) {
+            const script = document.createElement('script');
+            script.id = 'suneditor-script';
+            script.textContent = SUNEDITOR_JS;
+            document.head.appendChild(script);
+        }
+    }
+    _initEditor() {
+        const SUNEDITOR = window.SUNEDITOR;
+        if (!SUNEDITOR)
+            return;
+        const mergedConfig = { ...DEFAULT_CONFIG, ...this.config };
+        this._editor = SUNEDITOR.create(this.editorId, mergedConfig);
+        if (this._pendingValue) {
+            this._editor.setContent(this._pendingValue);
+            this._pendingValue = '';
+        }
+        if (this._disabled) {
+            this._editor.disabled();
+        }
+        setTimeout(() => this._attachObserver(), 100);
+    }
+    _attachObserver() {
+        const container = document.getElementById(this.editorId)?.parentElement;
+        const iframe = container?.querySelector('iframe.input_editor');
+        const iframeBody = iframe?.contentWindow?.document?.body;
+        if (!iframeBody)
+            return;
+        this._observer = new MutationObserver(() => {
+            if (this._isSettingValue)
+                return;
+            this._ngZone.run(() => {
+                const content = this._editor.getContent();
+                this._onChange(content);
+                this.contentChange.emit(content);
+            });
+        });
+        this._observer.observe(iframeBody, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        iframeBody.addEventListener('blur', () => {
+            this._ngZone.run(() => this._onTouched());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTextEditorComponent, isStandalone: false, selector: "matcha-text-editor", inputs: { value: "value", config: "config" }, outputs: { contentChange: "contentChange" }, host: { properties: { "attr.disabled": "this.disabledAttr" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MatchaTextEditorComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<textarea [id]=\"editorId\" style=\"width:100%;\"></textarea>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-text-editor', standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MatchaTextEditorComponent),
+                            multi: true,
+                        },
+                    ], template: "<textarea [id]=\"editorId\" style=\"width:100%;\"></textarea>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { value: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], contentChange: [{
+                type: Output
+            }], disabledAttr: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }] } });
+
+class MatchaTextEditorModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorModule, declarations: [MatchaTextEditorComponent], imports: [CommonModule, ReactiveFormsModule], exports: [MatchaTextEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorModule, imports: [CommonModule, ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTextEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MatchaTextEditorComponent],
+                    imports: [CommonModule, ReactiveFormsModule],
+                    exports: [MatchaTextEditorComponent],
+                }]
+        }] });
+
 class MatchaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
@@ -14591,7 +16816,8 @@ class MatchaComponentsModule {
             MatchaChipModule,
             MatchaMenuModule,
             MatchaListModule,
-            MatchaSnackBarModule], exports: [MatchaAccordionModule,
+            MatchaSnackBarModule,
+            MatchaTextEditorModule], exports: [MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -14635,7 +16861,8 @@ class MatchaComponentsModule {
             MatchaChipModule,
             MatchaMenuModule,
             MatchaListModule,
-            MatchaSnackBarModule] }); }
+            MatchaSnackBarModule,
+            MatchaTextEditorModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -14682,7 +16909,8 @@ class MatchaComponentsModule {
             MatchaChipModule,
             MatchaMenuModule,
             MatchaListModule,
-            MatchaSnackBarModule, MatchaAccordionModule,
+            MatchaSnackBarModule,
+            MatchaTextEditorModule, MatchaAccordionModule,
             MatchaAutocompleteModule,
             MatchaOptionModule,
             MatchaPanelModule,
@@ -14726,7 +16954,8 @@ class MatchaComponentsModule {
             MatchaChipModule,
             MatchaMenuModule,
             MatchaListModule,
-            MatchaSnackBarModule] }); }
+            MatchaSnackBarModule,
+            MatchaTextEditorModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
@@ -14779,7 +17008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaChipModule,
                         MatchaMenuModule,
                         MatchaListModule,
-                        MatchaSnackBarModule
+                        MatchaSnackBarModule,
+                        MatchaTextEditorModule
                     ],
                     exports: [MatchaAccordionModule,
                         MatchaAutocompleteModule,
@@ -14825,7 +17055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatchaChipModule,
                         MatchaMenuModule,
                         MatchaListModule,
-                        MatchaSnackBarModule
+                        MatchaSnackBarModule,
+                        MatchaTextEditorModule
                     ],
                 }]
         }] });
@@ -15439,5 +17670,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, DEFAULT_CONFIG, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map