asp.net tinymce 에디터 설치,설정 이미지 업로드 구현

무료에디터로는 fckeditor와 아들격인 ckeditor를 줄창 잘 써왔다. 그런데 이게 상업적인 용도는 대금을 지불하는 방식으로 라이센스가 바꿨다. 아 이제 버그 다 잡고 쓸만하니깐 유료가 된 셈이다. 이제동안 써 온 노하우(?)가 있는데 정말 아쉽다.

그러나 언제나 무료 라이센스는 있는 법 tinymce가 있었다. 전에 한번 프로젝트에서 쓸 기회가 있었는데 그 당시 버전이 버그가 있었나 해서 않 써왔다가  이번에 다시 깔아 쓰니 웹표준도 철저히 지켰고 아주 참신하고 괜찮아 졌다고 할까. 근데 초기 설정은 약간 많은 편 ckeditor에 비해 약간 어수선하고 정리가 않 된 느낌은 있다.(라이센스는 LGPL)

에디터에 아이콘은 ckeditor보다 나은거 같다. 그러나 이것도 쓰다보면 만만치 않게 버그가 나오리라 본다. 사용자 정의 옵션을 주거나 한글화 시키는 부분은 오히려 ckeditor보다 더 뛰어나다. 로딩속도는 약간 떨어지는거 같다.

다운로드 : http://www.tinymce.com/download/download.php
랭귀지 팩 : http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1

설치버전은 3.4.6 젤 위에 기본버전과 랭귀지 팩도 받는다.

설치
받은 파일 압축을 풀면 examples와 jscripts 두 개의 폴더가 나온다. 예제폴더와 jscripts폴더 않 의 tiny_mce는 에디터파일 일단 tiny_mce폴더를 웹사이트 임의의 공간에 복사한다. 웹 에디터 폴더라 볼 수 있다. 받은 랭귀지 팩 파일 압축을 풀어 같은 폴더 끼리 덮어 쒸운다. langs, plugins themes 세 폴더가 덮어 쒸어 질꺼다. 일단 설치는 완료

설정
tinymce는 ckeditor이나 fckeditor처럼 각각의 웹 언어로 된 설정 파일이 없다. 일일이 폼에 자바스크립터를 설정 불러와 써야한다. 상단에 head에 에디터 자바스크립 파일 인클루드<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>넣는다.

자바스크립터 부분

tinyMCE.init({ 
        language:"ko",
        mode: "exact",
        elements: "<%=TxtContent.ClientID%>",

        // 엔터시 br 버그있음 개행시 커서는 넘어가나 마우스포인터가 남아있다
        force_br_newlines: true,
        force_p_newlines: false,
        theme: "advanced",
        //skin: "o2k7",
        //skin_variant: "silver",
        plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
        theme_advanced_path: false,

        //IE에서 한글입력 문제 해결을 위해서
        forced_root_block: false,
        //에디터 너비 높이 설정
        height: "330",
        width: "790",

        //에디터 버튼 예제 full.html을 보고 전부사용해두 되고 사용할꺼만 골라 쓰면 된다.
        theme_advanced_buttons1: "formatselect,fontselect,fontsizeselect,bold,italic,underline,strikethrough,forecolor,backcolor,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,|,blockquote,link,unlink,charmap,search",
        theme_advanced_buttons2: "tablecontrols,|,imgUp,code",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false,

        // example 폴더 css에 있는 css파일을 갖다 쓴다.
        // 에디터 폼않에 스타일을 설정하는 파일이다. 
        content_css: "/tiny_mce/commons/css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",

        // Style formats
        style_formats: [
             { title: 'Bold text', inline: 'b' },
             { title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
             { title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
             { title: 'Example 1', inline: 'span', classes: 'example1' },
             { title: 'Example 2', inline: 'span', classes: 'example2' },
             { title: 'Table styles' },
             { title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}],

        //에디터에 사용할 폰트 지정 
        theme_advanced_fonts: "굴림=굴림;굴림체=굴림체;궁서=궁서;궁서체=궁서체;돋움=돋움;돋움체=돋움체;바탕=바탕;바탕체=바탕체;Arial=Arial; Comic Sans MS='Comic Sans MS';Courier New='Courier New';Tahoma=Tahoma;Times New Roman='Times New Roman';Verdana=Verdana",

        // Replace values for the template plugin
        template_replace_values: {
            username: "Some User",
            staffid: "991234"
        },

        setup : function(ed) {
            // 이미지 업로드 창
            ed.addButton('imgUp', {
                title : '이미지넣기',
                image: '/tiny_mce/commons/img/image.gif',
                onclick : function() {
                    winOpen(400, 300, "/tiny_mce/commons/ImgPop.aspx", "imgPop");
                }
            });

            // 수정시 에디터에 값넣기 setContent않에
            ed.onLoadContent.add(function (ed, o) {
                ed.focus();
                tinyMCE.activeEditor.setContent("");
            });
        }  
    
    });

    /* 원하는 사이즈로 팝업열기 */
    function winOpen(w, h, url, winName) {
        var x = (screen.width - w) / 2 - 10;
        var y = (screen.height - h) / 2 - 10;
        var exp = "width=" + w + ", height=" + h + ", top=" + y + ",left=" + x +
    ", status=yes, resizable=no, toolbar=no, scrollbars=no ";
        var wopen = window.open(url, winName, exp);
        wopen.focus();
        x = null, y = null, exp = null, wopen = null;
    }

    /* 공백 검사 */
    function isNull(s) {
        if (s.replace(/(^\s*)|(\s*$)/g, "") && s != null) {
            return false;
        } else {
            return true;
        }
    }

    /* 입력검사 */
    function checkEdit() {
        if (isNull(document.getElementById("<%=TxtSubject.ClientID%>").value) == true) {
            alert("제목을 입력하세요!!");
            document.getElementById("<%=TxtSubject.ClientID%>").focus();
            return false;
        }

        if (isNull(tinyMCE.get("<%=TxtContent.ClientID%>").getContent()) == true) {
            alert("내용을 입력하세요!!");
            tinyMCE.get("<%=TxtContent.ClientID%>").focus();
            return false;
        }

        return true;
    }

html부분

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TxtSubject" runat="server" Width="576px"></asp:TextBox>
    </div>
<div>
        <asp:TextBox ID="TxtContent" runat="server" Rows="15" Columns="80" 
              TextMode="MultiLine"></asp:TextBox>
    </div>
<asp:Button ID="ButSubmit" runat="server" Text="확인" OnClientClick="return checkEdit();" 
        onclick="ButSubmit_Click" />
</form>

일단 이렇게 하고 실행시켜 보라. 이쁘게 뜨지 않는가? 근데 약간 이상한 부분이 있다.
웬지 한글이 어색하고 그런 느낌? 그렇다 역쉬 양키들이 만든거라 한글폰트와 사이즈 설정이 않되어 있다. 자바스크립터 설정부분에 지정한 content.css와 themes/advanced/skins/보면 각 폴더에 dialog.css가 있다.(dialog.css는 설정에서 쓰는 스킨을 수정해야함)
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; 이 부분을 돋음,굴림,바탕
폰트사이즈 12px를 기본으로 바꾸주어야 한다.(대부분 기본 폰트사이즈는 10px맞추어 줘 있음 한글은 12px이상으로 해야 깨지지 않음 스타일에 폰트사이즈는 2px씩 올려주면 됨)에디터로 열고 바꾸기 한번 쭉 바꿔주던가 한다.
이렇게 수정 후 다시 실행해 보면 한글도 아주 이쁘게 들어가 있다. 이로서 한글화 작업및 웹에디터 설정은 끝났다. 다음은 이미지 업로드 부분이다.

tinymce도 ckeditor가 마찬가지로 이미지및 파일 업로드는 유료 라이센스이다. ckeditor는 다르게 사용자 정의로 이미지 업로드 구현하는거를 편하게 해놓았다. 위에 설정에 보면 간단하게 아이콘파일 지정과 팝업 파일 경로만 지정하면 에디터 내에서 이쁘게 팝업을 띄운다.

ImgPop.aspx

<form enctype="multipart/form-data" id="ImgUpFrm" method="post" runat="server">
    <div>
        이미지파일 (.gif, .jpg, .png) 만 업로드 가능합니다.<p>
        <asp:fileupload id="Fu1" runat="server">
        </asp:fileupload></p><p>
        정렬 : 
        <asp:radiobuttonlist id="RblAlign" runat="server" width="223px">
            <asp:listitem value="left">왼쪽</asp:listitem>
            <asp:listitem selected="True" value="center">가운데</asp:listitem>
            <asp:listitem value="right">오른쪽</asp:listitem>
        </asp:radiobuttonlist>      
    </p><p></p></div>
    <asp:button id="BtnUpload" onclick="BtnUpload_Click" onclientclick="return checkImg()" runat="server" text="업로드">
    <asp:button id="BtnClose" onclientclick="window.close();" runat="server" text="취소">
    </asp:button></asp:button>
</form>

ImgPop.aspx.cs

protected void BtnUpload_Click(object sender, EventArgs e)
    {
        const string SavePath = "D:\\uploadTest\\";
        const string WebPath = "/imgUp/";

        if (Fu1.HasFile)
        {
            string FileName = Server.HtmlEncode(Fu1.FileName);
            string Extension = System.IO.Path.GetExtension(FileName);

            // 확장자 검사
            if ((Extension == ".jpg") || (Extension == ".gif") ||
                (Extension == ".jpeg") || (Extension == ".png"))
            {
                // 파일 저장
                Fu1.SaveAs(SavePath + FileName);

                // 이미지 가로,세로
                System.Drawing.Size ImgSize = 
                    System.Drawing.Image.FromFile(SavePath + FileName).Size;
                int ImgWidth = ImgSize.Width;
                int ImgHeight = ImgSize.Height;

                // 이미지 태그 작성
                string TagStyle = "width: " + ImgWidth + "px; height: " +
                                    ImgHeight + "px; ";
                if (RblAlign.SelectedValue != "center")
                {
                    TagStyle += "float: " + RblAlign.SelectedValue + ";"; 
                }
                string TagContent = 
                        string.Format("",
                                        WebPath + FileName,
                                        TagStyle,
                                        FileName);
                
                // api호출하여 이미지 태그 인서트
                ScriptManager.RegisterStartupScript(this, this.GetType(), "",
                "window.opener.tinyMCE.execCommand('mceInsertContent', false, '" 
                + TagContent + "'); window.close();", true);
            }
            else
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "",
                "alert('이미지파일(gif,jpg,png)만 업로드 가능합니다!!');", true);
            }
        }
        else
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "",
                "alert('업로드 할 파일을 선택해 주세요!!');", true);
        }
    }

소스를 설명하자면 이미지 업로드 후 tinymce의 api를 이용하여 간단하게 업로드된 이미지 태그만
에디터내에 삽입한다. 이 부분 examples예제를 보면 간단하게 api를 이용하는 방법이 나와있다.

아까 설정에 주석에두 나와있듯이 개행시 br태그(커서가 사라짐)로 되는부분이 버그가 있다. 버그 히스토리에도 보면 고쳤다고 나와있는데 혹시 그 부분이 걸리면 예전 버전을 써 보시기 바란다. 그 부분을 주석으로 막으면 p태그로 되는데 그냥 쓰셔두 상관은 없다. 개행 간격이 넗다고 느끼시는 분은 스타일에서 content.css에서 p태그의 간격을 0으로 하시면 된다. (이 에디터도 여타의 에디터와 같이 개행설정을 하지 않으면 엔터시 p태그 shfit+엔터는 br태그이다.) 써 보니 오히려 ckeditor보다 좋은거 같다. 약간 잘잘한 설정이 많기는 하지만 어짜피 한번만 하면 끝이다. 커스텀한 설정으로 에디터에 버튼이나 api이용하면 상용에디터 못지 않게 꾸밀 수 있는 기능이 많이 존재한다.

ps : 자바스크립터 인클루드 하는거가 빠졌네요. 내용에 다시 수정되었음.
안정버젼이 3.3.x버젼이라구 하네요. 다운로드 페이지에 있습니다. 그리고 br시 커서버그는 여전합니다.(크롬에서는 기본글꼴이 나눔고딕으로 되어있었는데..다시 굴림으로 바꾸니 없어지네요.사파리,파폭,ie8은 잘나옵니다. 유독 ie9만 그렇군요 호환성보기를 누르면 제대로 나옵니다. ie9에 문제 일수두 있겠군요)

ps1 : 3.5.8 버젼에서 br버그 사라졌네요..