[javascript] ckeditor 에디터

1. 다운로드 : http://ckeditor.com/

2. 설정

<script type="text/javascript" src="../../../common/js/ckeditor/ckeditor.js"></script> 
<script type="text/javascript">
 
    function check_form(form) {
        
        if (CKEDITOR.instances.ctnt.getData() == "") { 
            alert("내용을 입력해주세요");
            CKEDITOR.instances.ctnt.focus();
            return false; 
        } 
    return true;
 
    }
 
</script>
 
<tr>
    <th>내용</th>
    <td>
        <textarea class="ckeditor"></textarea>
    </td>
</tr>

3. 환경설정

config.js 파일 편집

CKEDITOR.editorConfig = function( config ) {
    
    config.toolbarGroups = [        
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },            
        { name: 'colors' },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },        
        { name: 'insert' },
        { name: 'styles' }    
        
    ];
    
    config.filebrowserUploadUrl = '/common/js/ckeditor/imageUpload/upload.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '/common/js/ckeditor/imageUpload/upload.aspx?command=QuickUpload&type=Images';
    
    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Flash,Iframe';
    config.removeDialogTabs = 'link:advanced';
    config.height = '450px';
};
 
CKEDITOR.on( 'dialogDefinition', function( ev ){
 
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    
    if ( dialogName == 'image' ){
        
        dialogDefinition.removeContents( 'Link' );    //링크 탭 제거
        dialogDefinition.removeContents( 'advanced' );  //상세정보 탭 제거
        
        var infoTab = dialogDefinition.getContents( 'info' );  //info탭을 제거하면 이미지 업로드가 안된다.
        
        infoTab.remove( 'txtHSpace'); //info 탭 내에 불필요한 엘레멘트들 제거
        infoTab.remove( 'txtVSpace');
        infoTab.remove( 'txtBorder');
        infoTab.remove( 'txtWidth');
        infoTab.remove( 'txtHeight');
        infoTab.remove( 'ratioLock');
        
    }
});

4. 이미지 첨부

imageUpload/upload.aspx

using System;
using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class common_js_ckeditor_imageUpload_upload:System.Web.UI.Page {
    
    protected void Page_Load( object sender, EventArgs e ) {
 
        if( !Page.IsPostBack ) {
 
            Upload();
 
        }
 
    }
 
    private string RandomFileName() {
 
        return Path.GetRandomFileName().Replace( ".", "" );
 
 
    }
 
    private void Upload() {
 
        string dir = FileManager_e.FileRoot_test + @"test\upfile" + @"\___editor_image\";
        
        //에디터 이미지 물리경로에 폴더 경로 추가
        string folder = Cvt.String( Request.QueryString["CKEditorFuncNum"] );
        dir += folder + @"\";
 
        //에디터 이미지 물리경로에 년.월 추가
        string yyyyMM = DateTime.Now.ToString( "yyyyMM" );
        dir += yyyyMM + @"\";
 
        //에디터 이미지 논리 경로
        string SiteSrc = "http://test";
        string src = SiteSrc + "/___editor_image/" + folder + "/" + yyyyMM + "/";
 
        string filename = string.Empty;                            //파일명
        string random_filename = string.Empty;            //랜덤 파일명
        int size = 0;                                                                //파일 사이즈
        
        //파일명 재 생산
        filename = Request.Files[0].FileName;
        string hat = FileManager.GetExt( filename );
        random_filename = RandomFileName() + "." + hat;
        size = Request.Files[0].ContentLength;
 
        //파일 업로드
        FileManager.Upload( dir, Request.Files[0], random_filename );
        
        Response.Write( "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction ("
         + Request.QueryString["CKEditorFuncNum"] + ", '" + src + random_filename + "','업로드 완료');</script>" );
    }
 
}
 

text = text.replaceAll("&", "&");
text = text.replaceAll("&lt;", "<");
text = text.replaceAll("&gt;", ">");
text = text.replaceAll("&quot;", "'");    
text = text.replaceAll("&nbsp;", "<br>");