Is somebody already tried to integrate elFinder into new (4b1) version of TinyMCE? It looks like previous implementation isn't working. Please post some snippets, thanks a lot.
Is somebody already tried to integrate elFinder into new (4b1) version of TinyMCE? It looks like previous implementation isn't working. Please post some snippets, thanks a lot.
Share Improve this question edited Apr 15, 2013 at 13:53 dikirill asked Apr 15, 2013 at 13:47 dikirilldikirill 1,9031 gold badge20 silver badges21 bronze badges2 Answers
Reset to default 7Ok. I found the solution:
- Create folder in plugins named elfinder.
- Download latest elFinder and put into this folder plugins/elfinder.
- Add plugin 'elfinder' to the list of plugins (tinymce.init).
- Rename js/elfinder.min.js to js/plugin.min.js
- Create file plugin.min.js in root folder of plugin (elfinder/plugin.min.js)
- Insert next text inside and save:
tinymce.PluginManager.add("elfinder", function (editor, url) {
editor.settings.file_browser_callback = function (id, value, type, win) {
$('<div />').dialogelfinder({ url: url + '/php/connector.php', mandsOptions: { getfile: { onplete: 'destroy' } }, getFileCallback: function (url) { var fieldElm = win.document.getElementById(id); fieldElm.value = editor.convertURL(url, null, true); if ("fireEvent"in fieldElm) { fieldElm.fireEvent("onchange") } else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); fieldElm.dispatchEvent(evt) } } });
}; }, ["elfinder/js"]);
I updated the Wiki, should work now when following the steps: https://github./Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x
Primary changes are that TinyMCE doesn't use the InlinePopup plugin any more, the callback is changed and instead of file_browser_callback : 'elFinderBrowser'
you have to remove the quotes:
In the TinyMCE init:
file_browser_callback : elFinderBrowser
Add the elFinderBrowser callback to your javascript:
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;
}
And finally modify/copy elfinder.html file to use the callback:
<!-- 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
top.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
// close popup window
top.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
FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>