2013-07-30 12 views
7

Sto cercando di creare il mio browser di file in modo da poter selezionare l'immagine dal mio file gestirlo e inviarlo campo di collegamento dell'immagine di tinymce, ma non riesco a trovare ulteriori informazioni altrove su come posso ottenere questo.tinymce 4: come creare il proprio file manager?

Questo è il codice per aprire un nuovo pop-up sopra l'immagine di inserimento/modifica,

file_browser_callback: function(field_name, url, type, win) { 

    //tinymce.activeEditor.windowManager.close(); 
    //console.log(field_name); 

    tinymce.activeEditor.windowManager.open({ 
     title: 'Browse Image', 
     file: "yourbrowser.php?field=" + field_name + "&url=" + url, 
     width: 450, 
     height: 305, 
     resizable : "no", 
     inline : "yes", 
     close_previous : "no", 
     buttons: [{ 
      text: 'Insert', 
      classes: 'widget btn primary first abs-layout-item', 
      disabled: true, 
      onclick: 'close' 
     }, { 
      text: 'Close', 
      onclick: 'close', 
      window : win, 
      input : field_name 
     }] 
    }); 

    return false; 
}, 

Questo è dove ho attaccato - come posso selezionare un'immagine dal mio gestore di file e inviarlo al collegamento immagine in inserimento/modifica popup immagine?

Di seguito tutto il mio codice finora,

$(document).ready(function(){ 

     $('.button').click(function(){ 

      // @reference: http://www.tinymce.com/wiki.php/api4:method.tinymce.remove# 
      if(tinyMCE.editors.length > 0) { 

       // Remove all editors bound to textareas 
       //tinymce.remove('textarea'); 

       // Remove all editors 
       tinymce.remove(); 
      } 

      $('.content').load('full.html', function() { 

       if(tinyMCE.editors.length == 0) { 

        tinymce.init({ 
         //selector: "textarea", 
         mode : "textareas", 
         editor_selector : "mce-customised", 
         editor_deselector : "not-editor", 
         theme: "modern", 
         plugins: [ 
          "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
          "searchreplace wordcount visualblocks visualchars code fullscreen", 
          "insertdatetime media nonbreaking save table contextmenu directionality", 
          "emoticons template paste textcolor" 
         ], 
         toolbar1: "insertfile undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
         toolbar2: "print preview media | forecolor backcolor emoticons", 
         image_advtab: true, 

         file_browser_callback: function(field_name, url, type, win) { 

          //tinymce.activeEditor.windowManager.close(); 
          //console.log(field_name); 

          tinymce.activeEditor.windowManager.open({ 
           title: 'Browse Image', 
           file: "yourbrowser.php?field=" + field_name + "&url=" + url, 
           width: 450, 
           height: 305, 
           resizable : "no", 
           inline : "yes", 
           close_previous : "no", 
           buttons: [{ 
            text: 'Insert', 
            classes: 'widget btn primary first abs-layout-item', 
            disabled: true, 
            onclick: 'close' 
           }, { 
            text: 'Close', 
            onclick: 'close', 
            window : win, 
            input : field_name 
           }] 
          }); 

          return false; 
         }, 


         // Specifying an Absolute Image Path 
         document_base_url : "http://localhost/test/2013/js/tinymce/tinymce_4.0.2/", 
         relative_urls : false, 
         remove_script_host : false, 


         image_list: "image_list.php", 
         link_list: "link_list.php" 
        }); 

        $('.button-submit').submit_form(); 
       } 

      }); 

      return false; 
     }); 

    }); 

Il test site.

Oppure, conosci qualche buon plugin di gestione dei file che funziona con tinymce?

+0

Avete dato un'occhiata a http://www.tinymce.com/wiki.php/TinyMCE3x:How -to_implement_a_custom_file_browser dovrebbe dare alcuni spunti. – RMK

+0

grazie. visto e testato quello, è per TinyMCE 3.x. sto lavorando su TinyMCE 4 .... – laukok

risposta