diff --git a/modules/editor/components/colorpicker_text/colorpicker_bg.class.php b/modules/editor/components/colorpicker_text/colorpicker_bg.class.php
new file mode 100644
index 000000000..1fb564219
--- /dev/null
+++ b/modules/editor/components/colorpicker_text/colorpicker_bg.class.php
@@ -0,0 +1,53 @@
+<?php
+    /**
+     * @class  colorpicker_text
+     * @author zero (zero@nzeo.com)
+     * @brief  에디터에서 url링크하는 기능 제공. 단순 팝업.
+     **/
+
+    class colorpicker_text extends EditorHandler { 
+
+        // upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
+        var $upload_target_srl = 0;
+        var $component_path = '';
+
+        /**
+         * @brief upload_target_srl과 컴포넌트의 경로를 받음
+         **/
+        function colorpicker_text($upload_target_srl, $component_path) {
+            $this->upload_target_srl = $upload_target_srl;
+            $this->component_path = $component_path;
+        }
+
+        /**
+         * @brief 에디터에서 처음 요청을 받을 경우 실행이 되는 부분이다.
+         * execute의 경우 2가지 경우가 생긴다.
+         * 직접 에디터 아래의 component area로 삽입할 html 코드를 만드는 것과 popup 윈도우를 띄우는 것인데
+         * popup윈도우를 띄울 경우는 getPopupContent() 이라는 method가 실행이 되니 구현하여 놓아야 한다
+         **/
+        function execute() {
+
+            $url = sprintf('./?module=editor&act=dispPopup&target_srl=%s&component=colorpicker_text', $this->upload_target_srl);
+            
+            $this->add('tpl', '');
+            $this->add('open_window', 'Y');
+            $this->add('popup_url', $url);
+        }
+
+        /**
+         * @brief popup window요청시 다시 call이 될 method. popup window에 출력할 내용을 추가하면 된다
+         **/
+        function getPopupContent() {
+            // 템플릿을 미리 컴파일해서 컴파일된 소스를 return
+            $tpl_path = $this->component_path.'tpl';
+            $tpl_file = 'popup.html';
+
+            Context::set("tpl_path", $tpl_path);
+
+            require_once("./classes/template/TemplateHandler.class.php");
+            $oTemplate = new TemplateHandler();
+            return $oTemplate->compile($tpl_path, $tpl_file);
+        }
+
+    }
+?>
diff --git a/modules/editor/components/colorpicker_text/colorpicker_text.html b/modules/editor/components/colorpicker_text/colorpicker_text.html
deleted file mode 100644
index 392ec5928..000000000
--- a/modules/editor/components/colorpicker_text/colorpicker_text.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<script type='text/javascript'>
-  var color_list = new Array('000000','993300','333300','003300','003366','000080','333399','333333','800000','FF6600','808000','008000','008080','0000FF','666699','808080','FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','969696','FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','c0c0c0','FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF');
-
-  function setColor(color) {
-    var mode = "{$mode}";
-    opener.editorFocus(opener.editorPrevSrl);
-    if(mode == "ForeColor") {
-      opener.editorSetForeColor("#"+color);
-    } else {
-      opener.editorSetBackColor("#"+color);
-    }
-    opener.editorFocus(opener.editorPrevSrl);
-    self.close();
-  }
-
-  for(var i=0;i<color_list.length;i++) {
-    html += "<div style=\"float:left;background-color:#"+color_list[i]+"\"><img src=\"blank.gif\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"setColor('"+color_list[i]+"')\" \/><\/div>";
-  }
-  document.write(html);
-</script>
diff --git a/modules/editor/components/colorpicker_text/tpl/blank.gif b/modules/editor/components/colorpicker_text/tpl/blank.gif
new file mode 100644
index 000000000..35d42e808
Binary files /dev/null and b/modules/editor/components/colorpicker_text/tpl/blank.gif differ
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.css b/modules/editor/components/colorpicker_text/tpl/popup.css
new file mode 100644
index 000000000..92bcb5494
--- /dev/null
+++ b/modules/editor/components/colorpicker_text/tpl/popup.css
@@ -0,0 +1,12 @@
+img.color_icon {
+  width:15px;
+  height:15px;
+  border:1px solid #FFFFFF;
+}
+
+img.color_icon_over {
+  width:15px;
+  height:15px;
+  border:1px solid #000000;
+  cursor:pointer;
+}
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.html b/modules/editor/components/colorpicker_text/tpl/popup.html
new file mode 100644
index 000000000..1513b92ba
--- /dev/null
+++ b/modules/editor/components/colorpicker_text/tpl/popup.html
@@ -0,0 +1,6 @@
+<!--%import("popup.js")-->
+<!--%import("popup.css")-->
+<script type='text/javascript'>
+  var blank_img_src = "{$tpl_path}/blank.gif";
+  printColor();
+</script>
diff --git a/modules/editor/components/colorpicker_text/tpl/popup.js b/modules/editor/components/colorpicker_text/tpl/popup.js
new file mode 100644
index 000000000..bcf0ded5a
--- /dev/null
+++ b/modules/editor/components/colorpicker_text/tpl/popup.js
@@ -0,0 +1,16 @@
+var color_list = new Array('000000','993300','333300','003300','003366','000080','333399','333333','800000','FF6600','808000','008000','008080','0000FF','666699','808080','FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','969696','FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','c0c0c0','FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF');
+
+function setColor(color) {
+  opener.editorFocus(opener.editorPrevSrl);
+  opener.editorSetForeColor("#"+color);
+  opener.editorFocus(opener.editorPrevSrl);
+  self.close();
+}
+
+function printColor() {
+  var html = "";
+  for(var i=0;i<color_list.length;i++) {
+    html += "<div style=\"float:left;background-color:#"+color_list[i]+"\"><img src=\""+blank_img_src+"\" class=\"color_icon\" onmouseover=\"this.className='color_icon_over'\" onmouseout=\"this.className='color_icon'\" onclick=\"setColor('"+color_list[i]+"')\" alt=\"color\" \/><\/div>";
+  }
+  document.write(html);
+}