-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Integration with TinyMCE 4.x
jlamer edited this page Jan 2, 2014
·
27 revisions
In the TinyMCE init code, add the following line:
file_browser_callback : elFinderBrowser
Then add the following function (change the elfinder_url
to the correct path on your system):
function elFinderBrowser (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
file: '/elfinder/elfinder.html',// use an absolute path!
title: 'elFinder 2.0',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
return false;
}
Create (or edit) elfinder.html file. Include jQuery, jQuery UI, and elFinder
<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
<script type="text/javascript">
var FileBrowserDialogue = {
init: function() {
// Here goes your code for setting your custom things onLoad.
},
mySubmit: function (URL) {
// pass selected file path to TinyMCE
parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
// close popup window
parent.tinymce.activeEditor.windowManager.close();
}
}
$().ready(function() {
var elf = $('#elfinder').elfinder({
// set your elFinder options here
url: 'php/connector.php', // connector URL
getFileCallback: function(file) { // editor callback
// actually file.url - doesnt work for me, but file does. (elfinder 2.0-rc1)
FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>