I am trying to create my own file browser so that I can select an image from my file and send it to the tinymce image link field, but I can no longer find any additional information on how I can do this.
This is the code to open a new popup at the top of the image insert / edit,
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; },
This is where I am stuck - how can I select an image from my file manager and send it to the image link in the insert / edit popup?
Below is all my code,
$(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; }); });
test site .
Or do you know some good file manager plugin that works with tinymce?