Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2018-10-17 13:30:48
- alivato
- Member
- Registered: 2011-03-31
- Posts: 151
TinyMCE and elFinder - Arrow(select) is not active.
I downloaded TinyMCE and elFinder
TinyMCE
elFinder
In the admin site I installed the plugin Write tab customize
Write tab customize
And copied into the field the following code (domain one.com corrected).
Write tab customize -
Add javascript to write panel
Add external script
This code now works on the old site, with old versions of TXP Tinymce elFinder …
Images are loaded, but I cannot select it to insert Textpattern articles into the field.
Arrow is not active. Double click on the image – opens it in a new window.
?
<script type="text/javascript" src="http://one.com/textpattern/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#body",
theme: "modern",
file_browser_callback : elFinderBrowser,
menubar:false,
statusbar: false,
height: 300,
plugins: [
"autolink link image charmap preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | link image | print preview media fullpage | forecolor code",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
relative_urls: false
});
function elFinderBrowser (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
file: 'http://one.com/textpattern/js/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;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
//your code here
});
</script>Last edited by alivato (2018-10-17 13:35:23)
Offline
#2 2018-10-18 08:21:56
- alivato
- Member
- Registered: 2011-03-31
- Posts: 151
Re: TinyMCE and elFinder - Arrow(select) is not active.
I have connected elfinder v2.1.42
I replaced one elfinder.html file from the old version (v2.1.15)
Now everything works. (select img and add to TinyMCE)
But I would like to know why it does not work (as it is) v.2.1.42
File elfinder.html (v2.1.42) – not work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>elFinder 2.1.x source version with PHP connector</title>
<!-- Require JS (REQUIRED) -->
<!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
<script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script>
define('elFinderConfig', {
// elFinder options (REQUIRED)
// Documentation for client options:
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
defaultOpts : {
url : 'php/connector.minimal.php' // connector URL (REQUIRED)
,commandsOptions : {
edit : {
extraOptions : {
// set API key to enable Creative Cloud image editor
// see https://console.adobe.io/
creativeCloudApiKey : '',
// browsing manager URL for CKEditor, TinyMCE
// uses self location with the empty value
managerUrl : ''
}
}
,quicklook : {
// to enable CAD-Files and 3D-Models preview with sharecad.org
sharecadMimes : ['image/vnd.dwg', 'image/vnd.dxf', 'model/vnd.dwf', 'application/vnd.hp-hpgl', 'application/plt', 'application/step', 'model/iges', 'application/vnd.ms-pki.stl', 'application/sat', 'image/cgm', 'application/x-msmetafile'],
// to enable preview with Google Docs Viewer
googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/postscript', 'application/rtf'],
// to enable preview with Microsoft Office Online Viewer
// these MIME types override "googleDocsMimes"
officeOnlineMimes : ['application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation']
}
}
// bootCalback calls at before elFinder boot up
,bootCallback : function(fm, extraObj) {
/* any bind functions etc. */
fm.bind('init', function() {
// any your code
});
// for example set document.title dynamically.
var title = document.title;
fm.bind('open', function() {
var path = '',
cwd = fm.cwd();
if (cwd) {
path = fm.path(cwd.hash) || null;
}
document.title = path? path + ':' + title : title;
}).bind('destroy', function() {
document.title = title;
});
}
},
managers : {
// 'DOM Element ID': { /* elFinder options of this DOM Element */ }
'elfinder': {}
}
});
</script>
</head>
<body>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
</body>
</html>File elfinder.html (v2.1.15) – work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>elFinder 2.1.x source version with PHP connector</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<!-- Section CSS -->
<!-- jQuery UI (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<!-- elFinder CSS (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="css/elfinder.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<!-- Section JavaScript -->
<!-- jQuery and jQuery UI (REQUIRED) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<!-- elFinder JS (REQUIRED) -->
<script src="js/elfinder.min.js"></script>
<!-- GoogleDocs Quicklook plugin for GoogleDrive Volume (OPTIONAL) -->
<!--<script src="js/extras/quicklook.googledocs.js"></script>-->
<!-- elFinder translation (OPTIONAL) -->
<!--<script src="js/i18n/elfinder.ru.js"></script>-->
<!-- elFinder initialization (REQUIRED) -->
<!-- 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);
// force the TinyMCE dialog to refresh and fill in the image dimensions
var t = parent.tinymce.activeEditor.windowManager.windows[0];
t.find('#src').fire('change');
// close popup window
parent.tinymce.activeEditor.windowManager.close();
}
}
$().ready(function() {
var elf = $('#elfinder').elfinder({
// set your elFinder options here
url: 'php/connector.minimal.php', // connector URL
getFileCallback: function(file) { // editor callback
// file.url - commandsOptions.getfile.onlyURL = false (default)
// file - commandsOptions.getfile.onlyURL = true
FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>
</head>
<body>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
</body>
</html>Offline
Re: TinyMCE and elFinder - Arrow(select) is not active.
Comparing those two bits of codes shows that the javascript for the new version is handled quite differently and has different dependencies and different referenced files.
v2.1.15 uses jquery and jquery.ui and js/elfinder.min.js as the javascript file.
v2.1.42 uses require.js to asynchronously load /main.default.js so is built quite differently.
If you try the new file again, open the web inspector on that window and see if the “console” tab gives you any clues. In many cases, it will show an error, or perhaps that a file is not being loaded. That could give you an indication of where to look and debug…
TXP Builders – finely-crafted code, design and txp
Offline
#4 2018-10-18 09:59:41
- alivato
- Member
- Registered: 2011-03-31
- Posts: 151
Re: TinyMCE and elFinder - Arrow(select) is not active.
Thx, but – there is nothing(
//
Offline
Re: TinyMCE and elFinder - Arrow(select) is not active.
Sorry, I don’t really use tinymce so cannot debug myself, but it seems from googling and GitHub issues that the “select” button will only show if tinymce and elfinder are correctly hooked up so that elfinder knows what to pass back. In the past that was the getFileCallback and that seems to be working with the older version.
Maybe Integration with TinyMCE 3.x or Integration with TinyMCE 4.x helps for the newer versions?
TXP Builders – finely-crafted code, design and txp
Offline
#6 2018-10-18 11:41:00
- alivato
- Member
- Registered: 2011-03-31
- Posts: 151
Re: TinyMCE and elFinder - Arrow(select) is not active.
Unfortunately, I have not figured out how to use it yet, getFileCallback
Last edited by alivato (2018-10-18 11:42:25)
Offline