Skip to content

Integration with CKEditor (jQuery UI dialog mode) Varian 2 (change url)

Jump to bottom Edit New page
biziclop edited this page Jan 3, 2019 · 4 revisions

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>
Add a custom sidebar
Clone this wiki locally