2012-12-23 1 views
5

Blueimp FileUpload (https://github.com/blueimp/jQuery-File-Upload) 을 편집기 CkEditor (http://ckeditor.com/)와 통합하는 것이 가능합니까 ???ckeditor에서 통합 블루 핀 파일 업로드

힌트가 있습니까?

정말 고마워요! 에서

<td> 
     <div class="btn scegli" id="chooseThis" > 
      <span class="url" style="display: none">"{%=file.url%}"</span> 
      <span>Choose</span> 
     </div> 
    </td> 

: 내가 처음 </tr> 명령을 다음 행을 추가 테이블을 편집 한

blueimp 파일 업로드의 파일의 index.php에서 : 끝에

+0

당신이 시도 무엇을 지금까지? 현재 코드를 보여줄 수 있습니까? 아니면 다른 사람이 코드를 작성하기를 기대합니까? – AlfonsoML

답변

8

은 나 자신에 의한 해결책을 발견 JQuery와 포함 후이 파일의 끝 : 나는 CKeditor에서 사용하는 간단한 플러그인을 개발했습니다

<script type="text/javascript"> 

    $(".chooseThis").live("click", function (e) { 
    parent.triggerUploadImages($(this).children('.url').html()); 
    }); 

</script> 

:

CKEDITOR.plugins.add('fileUpload', 
{ 
    init: function (editor) { 
     editor.addCommand('OpenDialog',new CKEDITOR.dialogCommand('OpenDialog')); 
     editor.ui.addButton('FileUpload', 
      { 
       label: 'Upload images', 
       command: 'OpenDialog', 
       icon: CKEDITOR.plugins.getPath('fileUpload') + 'icon.gif' 
      }); 
     editor.contextMenu.addListener(function(element){ 
      return { 'My Dialog' : CKEDITOR.TRISTATE_OFF }; 
     }); 
     CKEDITOR.dialog.add('OpenDialog', function(api){ 
      var dialogDefinition = 
      { 
       title : 'Gestisci immagini', 
       minWidth : 700, 
       minHeight : 500, 
       contents : [ 
         { 
          expand : true, 
          padding : 0, 
          elements : 
          [ 
           { 

            type : 'html', 
            html : ' <iframe src="../../includes/fileUpload/index.php" style="width:100%;height:490px" />' 
           } 
          ] 
         } 
       ], 
       buttons : [] 
      }; 
      return dialogDefinition; 
     }); 

    } 
}); 

버튼을 툴바에 추가하려면 config.js도 수정해야합니다. 그런 다음

내가 CKeditor 생성하는 기능을 가지고 "는 FileUpload": 버튼의 이름은

var editor, html = ''; 
    function createEditor() { 

       if (editor) return; 

       var config = {}; 
       editor = CKEDITOR.replace("editor", 
        { 
         extraPlugins : 'fileUpload', 
        }); 
    } 

을 그리고 이것은 트리거 관리 할 수있는 기능입니다 :

  function triggerUploadImages(url){ 
       if(editor){ 
        CKEDITOR.dialog.getCurrent().hide(); 
        editor.insertHtml('<img src='+url+' />'); 
       } 
      } 
+2

솔루션을 게시 해 주셔서 감사합니다. 이것은 내가 개발하고자하는 플러그인으로 나를 도울 수 있습니다 – Lorof

+1

당신을 환영합니다! ;) – Danilo