Studio-42-elFinder

mirror of https://github.com/Studio-42/elFinder synced 2026-06-08 12:37:09 +00:00
Table of Contents
Example for CKEditor to use the elFinder file manager in jQuery UI dialog with possibility of changing url for connector elFinder
Example for CKEditor to use the elFinder file manager in jQuery UI dialog with possibility of changing url for connector elFinder

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<!-- jQuery and jQuery UI (REQUIRED) -->
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<!-- elFinder JS (REQUIRED) -->
	<script src="./js/elfinder.min.js"></script>

	<!-- CKEditor JS (REQUIRED) -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.2/ckeditor.js"></script>

	<script type="text/javascript">
		
(function(){
		var elfNode, elfInstance, dialogName,
      elfUrlMap = { // Your variants connector's URL
        image : './php/connector.image.php',
        flash : './php/connector.flash.php',
        files : './php/connector.files.php',
        link  : './php/connector.files.php',
        fb    : './php/connector.files.php',
      },
			elfDirHashMap = { // Dialog name / elFinder holder hash Map
				image : '',
				flash : '',
				files : '',
				link  : ''
			};
      
      			var getLang = function() {
				try {
					var full_lng;
					var loct = window.location.search;
					var locm;
					if (loct && (locm = loct.match(/lang=([a-zA-Z_-]+)/))) {
						full_lng = locm[1];
					} else {
						full_lng = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
					}
					var lng = full_lng.substr(0,2);
					if (lng == 'ja') lng = 'jp';
					else if (lng == 'pt') lng = 'pt_BR';
					else if (lng == 'zh') lng = (full_lng.substr(0,5) == 'zh-TW')? 'zh_TW' : 'zh_CN';

					if (lng != 'en') {
						var script_tag		= document.createElement("script");
						script_tag.type		= "text/javascript";
						script_tag.src		= "./js/i18n/elfinder."+lng+".js";
						script_tag.charset = "utf-8";
						$("head").append(script_tag);
					}

					return lng;
				} catch(e) {
					return 'en';
				}
			};

		CKEDITOR.on('dialogDefinition', function (event) { // connection manager
			var editor = event.editor;
			var dialogDefinition = event.data.definition;
			var tabCount = dialogDefinition.contents.length;
			for (var i = 0; i < tabCount; i++) { // cycle to replace the click of button "View on the server"
				var browseButton = dialogDefinition.contents[i].get('browse');

				if (browseButton !== null) {
					browseButton.hidden = false;
					browseButton.onClick = function (dialog, i) {

						dialogName = CKEDITOR.dialog.getCurrent()._.name;

							elfNode = $('<div \>');
							elfNode.dialog({
								modal: true,
								width: '80%',
								title: 'Server File Manager',
								create: function (event, ui) {
									var startPathHash = (elfDirHashMap[dialogName] && elfDirHashMap[dialogName])? elfDirHashMap[dialogName] : '';
                  
                  var elfUrlReal = (elfUrlMap[dialogName] && elfUrlMap[dialogName])? elfUrlMap[dialogName] : elfUrlMap['fb'];
                                      
                                                                        // elFinder configure
									elfInstance = $(this).elfinder({
										startPathHash: startPathHash,
										useBrowserHistory: false,
										resizable: false,
										width: '100%',
										url: elfUrlReal,
                    lang: getLang(),
                    ui: ['toolbar', 'tree', 'path', 'stat'],
                    uiOptions : {
                      toolbar : [
                        ['home', 'up'],
                        ['reload'],
                        ["mkdir", "mkfile", "upload"],
                        ["open", "download", "getfile"],
                        ["copy", "cut", "paste"],
                        ["search"],
                        ["view"],
                      ],
                      cwd : {
                        listView : {
                          columns : ["date", "size"],
                        }
                      }
                    },
										getFileCallback: function (file) {
											var url = file.url;
											var dialog = CKEDITOR.dialog.getCurrent();
											if (dialogName == 'image') {
												var urlObj = 'txtUrl'
											} else if (dialogName == 'flash') {
												var urlObj = 'src'
											} else if (dialogName == 'files' || dialogName == 'link') {
												var urlObj = 'url'
											} else {
												return;
											}
											dialog.setValueOf(dialog._.currentTabId, urlObj, url);
											elfNode.dialog('destroy');
											elfInstance.disable();
										}
									}).elfinder('instance');
								},
								open: function() {
									elfNode.find('div.elfinder-toolbar input').blur();
									setTimeout(function(){
										elfInstance.enable();
									}, 100);
								},
								resizeStop: function() {
									elfNode.trigger('resize');
								}
							}).parent().css({'zIndex':'12000'});
					} 
				} 

		    } 
		});
})();


	</script>
</head>
<body>
    <h1>CKEditor + elFinder Integration (jQuery dialog version)</h1>
    <form method="post">
        <textarea id="mytextarea"></textarea>
    </form>
    <script>
   		CKEDITOR.replace('mytextarea', {
    		filebrowserBrowseUrl: '#'
		});
    </script>
</body>
</html>