[PHP5]ckeditor ajax 이미지 다중 업로드 기능을 추가해보자(1)

1.ckeditor

https://ckeditor.com/ckeditor-4/download/

Full Package를 Download한다.(Stanard에는 글씨체,글자 크기가 없다.)

ckeditor_4.7.3_full.zip

참고

https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_installation

<textarea name="content"></textarea>

<script src="js/ckeditor/ckeditor.js"></script>

<script>

CKEDITOR.replace('content');

</script>

이렇게 하면

이렇게 만들어진다.

기본적으로 업로드 기능이 없고 추가해도 하나씩밖에 올리지 못한다.

{ name: 'paragraph', 

groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], 

items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr

Basic모드에서는 그룹을 모두 추가한상태에서 아이템을 하나씩 지우는 방식이고

Advanced모드에서는 아이템이 나열되어있다.

config.toolbarGroups에는 아이템만 추가하지 못하기 때문에 

Advanced모드를 사용해야한다.

js/ckeditor/samples/toolbarconfigurator/index.html

을 열어서 Advanced 모드에서 items를 지우고 옮겨 커스터마이징 후 에

js/ckeditor/config.js를 비우고 붙하자.

네임안에 그룹이 있고 그룹안에 아이템가 있는데,

아이템만 써도 버튼은 보인다.

CKEDITOR.editorConfig = function( config ) {
 
    config.toolbar = [
        { name: 'document', items: [ 'Source' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike'] },
        { name: 'links', items: [ 'Link', 'Unlink'] },
        { name: 'insert', items: [ 'Table' ] },
        { name: 'styles', items: [ 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        //{ items: [ 'Ajaximage'] },
        { name: 'tools', items: [ 'Maximize'] },
    ];
 
    //config.extraPlugins = 'ajaximage';
    config.extraAllowedContent = 'img[src,alt]'; // setData()에 img 허용
    config.font_defaultLabel = '맑은 고딕'; // 기본 폰트 지정
    config.font_names =  '맑은 고딕; 돋움; 바탕; 돋음; 궁서;'; // 폰트 목록
    config.fontSize_defaultLabel = '12px'; // 기본 폰트 크기 지정
    config.fontSize_sizes = '12/12px;14/14px;16/16px;'; // 폰트 크기
    config.language = "ko"; // 언어타입
    config.resize_enabled = true; // 에디터 크기 조절 사용여부
    config.enterMode = CKEDITOR.ENTER_BR; // 엔터시 <br> 
    config.shiftEnterMode = CKEDITOR.ENTER_P; // 쉬프트+엔터시 <p>
    config.toolbarCanCollapse = false; // 툴바 클릭시 접히는 여부
    config.menu_subMenuDelay = 0; // 메뉴 클릭 할 때 딜레이 값
    config.autoParagraph = false;
    config.protectedSource.push(/<\?[\s\S]*?\?>?/g);
    config.height = 400;
    //config.startupFocus = true; // 글쓰기 시작시 포커스 사용여부
};

js/ckeditor/config.js

다음편에서 빨간색부분 주석을 지워야한다.

2.jquery

https://blog.jquery.com/2012/03/21/jquery-1-7-2-released/

jquery-1.7.2.min.js

http://malsup.com/jquery/form/#download

jquery.form.min.js

js/ckeditor/adapters/jquery.js를 사용하면 jquery로 불러올 수 있다.

<script src='js/jquery-1.7.2.min.js'></script>

<script src="js/ckeditor/ckeditor.js"></script>

<script src="js/ckeditor/adapters/jquery.js"></script>

<script>

$('#content').ckeditor();

</script>

2편으로