[javascript] javascript ckeditor 파일업로드

[javascript] javascript ckeditor 파일업로드

우선 아래처럼 CKeditor 를 사용하기위해 script를 로드합니다!

<script src="//cdn.ckeditor.com/4.11.4/full-all/ckeditor.js"></script>

그리고 나서

<textarea name="text_content" id="text_content" rows="10">
    "본문내용"
</textarea>

<script type="text/javascript">
    CKEDITOR.config.allowedContent = true;
    CKEDITOR.filebrowserUploadMethod = 'form';
    CKEDITOR.replace("text_content",{
    height:"300"
    ,filebrowserImageUploadUrl: '파일업로드 작업을 할 URL 혹은 파일 경로 ex)./aaa.php 이런식으로 '
    ,toolbar:
        [
            { name: 'document',    items : [ 'Source' ] },
            { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript' ] },
            { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
            { name: 'links',       items : [ 'Link','Unlink' ] },
            { name: 'insert',      items : [ 'Image','Table' ] },
            '/',
            { name: 'styles',          items : [ 'Font', 'FontSize' ] },
            { name: 'colors',          items : [ 'TextColor', 'BGColor' ] }
        ]
    });
</script>

여기서 중요한점!
업로드 하는중에 잘못된 서버 응답이라는 에러가 나오면
이미지 업로드를 실행할 파일 URL 이 잘못되었거나!

{"filename" : "파일명", "uploaded" : 1, "url":"파일이 업로든 된 경로"}

처리 후 리턴값을 위처럼 json 구조로 리턴을 해주시면 해결이 됩니다!
버전마다 차이가 있을 수 있으니 참고들 하세요!!

 

CKeditor 공식 홈페이지 : https://ckeditor.com/

CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor

공식 홈페이지에 가면 CKeditor config option 들 부터 상세하게 조정할 수 있으니!

확인해보세요!