분류:: 컴퓨터/인터넷 << 인터넷/홈피

CK Editor + Codesnippet 설치 설정 삽질기


CK Editor 설치 설정 삽질기    ( CK Editor 4,5 버전)


  설치목표

    CK Editor + Codesnippet (소스 코드 하이라이트)


          ck editor-custom-설치-프러그인1.jpg



  ▶  더운받기

    1. CK Editor 풀버전를 다운 받았다

          ck editor-custom-설치1-0.jpg



  2. Codesnippet 플러그인을 다운 받았다.


          ck editor-custom-설치1-2-1.jpg

 

  설치하기

     다운받은 CK Editor 파일을 압축을 풀고 FTP로 싸이트에 올렸다.

     다운받은  Codesnippet 파일을 압축을 풀고 FTP로 Ckeditor/plugins/Codesnippet 에 올렸다.


  설정하기

     기본설정으로

      테스트하기위해 ckeditor-test.html 만들고 Ck Editor 사용 설정한다.


      <form method="post" action="write.php">
       <textarea id="editor1" name="editor1" rows="10" cols="80">

       </textarea>

    </form>

   <script type="text/javascript">

         CKEDITOR.replace( 'editor1');
   </script>


   이리하니 CK Editor 풀 에디터가 잘 나왔다.

   플러그인 을 설정할 차례다.


----------------------------------------------------------------

   이제부터가 삽질의 시작이다.


     config.js 파일을 열어 편집한다.

        CKEDITOR.editorConfig = function( config ) {
            config.language = 'ko';            //언어설정
            config.extraPlugins= 'codesnippet';
            config.codeSnippet_theme = 'monokai_sublime';

        }


   Ckeditor-test.html 도 편집 한다

    <form method="post" action="write.php">
       <textarea id="editor1" name="editor1" rows="10" cols="80">

       </textarea>

    </form>

   <script type="text/javascript">

      var config = {

        toolbar : [['Bold','Italic','Underline','Strike','-','Image','codesnippet','Table',] '/',['Font','FontSize']..,,,]];

        }

       CKEDITOR.replace( 'editor1',config);
   </script>


    codesnippet 아이콘이 안나온다 인터넷을 뒤져서 설정방법을 찾아서 설정 바꿔보이도 안된다.

     다시 다운받아 설치도 다시 해보고 설정도 바궈보고 해도 삽질은  계속된다.

     ....

     .... 대략 난감.....


    다시 다른방법으로 다운받기로 하고 CK Editor 홈피에서 플러그인을 포함한것을 받았다.

    그리고 다시설치 설정을 한다.


    아~~ 한방에 codesnippet 아이콘이 나온다

    삽질 끝~~~~.

----------------------------------------------------------------



    원인: Ck Editor 버전이 올라가면서 설정방법 일부가 바뀐 건가?

         이전방법으로 해서는 안된다.

         인터넷에 있는 설정 자료는 오래된것도 많아서 최신버전은 설정방법 일부는 안맞는다,

 
         즉 플러그인 사용하려면 플러그인 포함한 버전으로 받는다.



  플로그인 포함한 버전 다운로드 방법


           ck editor-custom-설치1-3.jpg

   1. 자신에 맞는 버전 선택

        Add-ons --> Plugins 선택

       필요한 플러그인을 (Add to my editor) 선택한다.

       선택한 플러그인이 색상과 택스트가 (Remove) 바뀐다.

       필요한것 보두 선택한다.


           ck editor-custom-설치3-1.jpg


   2. Buld my editor 아이콘 클릭(우측 중간쯤에 있다)


      여기서 다시 필요한 플러그인을 추가 하거나 뺄수있다.
              ck editor-custom-설치5.jpg


    3. 자신이 좋아하는 스킨도 선택한다.

              ck editor-custom-설치6.jpg


    4. 사용할 언어도 선택한다.

 

            ck editor-custom-설치7-1.jpg


   5.  다운로드 한다.

     그러면 플러그인이 포함된 CK Editor가 다운로드된다.

  

      압축을 풀고 서버에 올린다.

      Plogins폴더를 확인해보면 선택한 플러그인이 모두 들어있을것이다.




  기본 설정


      config.js 파일을 열어 편집한다.

        CKEDITOR.editorConfig = function( config ) {
            config.language = 'ko';            //언어설정


            config.extraPlugins= 'codesnippet';
            config.codeSnippet_theme = 'monokai_sublime';
            config.toolbarCanCollapse = true;    //툴바 접히는 기능
            config.extraPlugins= 'youtube';
            config.youtube_width = '640';
            config.youtube_height = '480';
            config.youtube_related = true;
            config.extraPlugins = 'slideshow';    //이미지를 슬라이드 기능(옵션이 더 필요함)

        }


 
    Ckeditor-test.html 도 편집 한다.

        <head> 라인도 설정한다.

        <form method="post" action="write.php">
           <textarea id="editor1" name="editor1" rows="10" cols="80">

           </textarea>

        </form>

       <script type="text/javascript">

          var config = {

            toolbar : [['Bold','Italic','Underline','Strike'],'-',

                        ['Image','CodeSnippet','Youtube','Slideshow','Flash','Table',],

                         '/',['Font','FontSize']..,..중략,...,]]

            }

           CKEDITOR.replace( 'editor1',config);
       </script>

     주의 : 아이콘명 첫자는 대문자 여야한다. 그리고 아이콘명이 중간에 대문자인것도 있다.



     'CodeSnippet','Youtube','Slideshow'  아이콘이 나타난 화면이다

     

                 ck editor-custom-설치-프러그인3.jpg



    Ckeditor 버전에 따라 플러그인 설치와 설정이 약간 다른 것인지 ?

    이전버전을 써보지 않아 모르겠다.


    결론은 플러그인 기능을 사용하려면 플러그인이 포함된 CKeditor를 다운받는다.

    이상  Ckeditor 4.5 버전 설치 설정 삽질기 였읍니다.


 

---------------------------------------------------------------

  비교 : 여러 플러그인을 포함한 버전을 다운받아 비교해보았다.

          1. ckeditor.js 파일 용량이 달라집니다.

          2. 아이콘이 하나로 생성되어 나오는데 플러그인을 포함한 아이콘이 추가되어

              하나의 그림 파일로 만들어져서 다운 받아진다.

             (그림 아이콘 파일을 Area로 표현한다) 

             그러니 추가로 플로그인만 설치해서 일반적인 방법으로 설정하면 아이콘이 안나온다.


          3. 플로그인만 다운받아 추가 설치 하는 방법이 있을것 같은데...??

             플러그인을 간단히 설치 하려면 플러그인 포함된 Ckeditor 버전을  다운 받는다.



댓 글


Name Password
내 용
싸인펜의 사진창고    인터넷 자료창고   설계자료 모음