2012-12-23 34 views
5

में एकीकरण ब्लूंप फ़ाइल फ़ाइल लोड करें क्या ब्लूंप फ़ाइल अपलोड (https://github.com/blueimp/jQuery-File-Upload) संपादक सीकेईडिटर (http://ckeditor.com/) के साथ एकीकृत करना संभव है ???सीकेडिटर

कोई संकेत?

आपको बहुत बहुत धन्यवाद!

+0

क्या आप की कोशिश की है अब तक? क्या आप हमें अपना वर्तमान कोड दिखा सकते हैं या आप उम्मीद कर रहे हैं कि कोई और आपके लिए कोड लिखता है? – AlfonsoML

उत्तर

8

अंत में मैं अपने आप को द्वारा समाधान नहीं मिला: कम से

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

:

blueimp fileupload की फ़ाइल index.php में मैं निम्नलिखित लाइनों पहले </tr> आदेश जोड़ने तालिका संपादित कर लिया है इस फाइल के अंत में, jQuery शामिल किए जाने के बाद:

<script type="text/javascript"> 

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

</script> 

मैं एक साधारण प्लगइन विकसित किया है CKeditor में उपयोग करने के लिए:

+०१२३५१६४१०६१
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 को भी संशोधित करना आवश्यक है। बटन का नाम है: "FileUpload"

तब मैं CKeditor बनाने के लिए कार्य हो:

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