Skip to content

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

Jump to bottom Edit New page
Vladimir edited this page Mar 30, 2017 · 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, elfInsrance, dialogName,
				elfUrl = './php/connector.minimal.php',
        elfUrlMap = {
					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 = {
					image : 'l1_Lw',
					flash : 'l1_Lw',
					files : 'l1_Lw',
					link  : 'l1_Lw',
					fb    : 'l1_Lw'
				},
				customData = {};
			
			var getShowImgSize = function(url, callback) {
				var ret = {};
				$('<img/>').attr('src', url).on('load', function() {
					var w = this.naturalWidth,
						h = this.naturalHeight,
						s = 400;
					if (w > s || h > s) {
						if (w > h) {
							h = h * (s / w);
							w = s;
						} else {
							w = w * (s / h);
							h = s;
						}
					}
					callback({width: w, height: h});
				});
			};

			CKEDITOR.on('dialogDefinition', function (event) {
				var editor = event.editor,
					dialogDefinition = event.data.definition,
					tabCount = dialogDefinition.contents.length,
					browseButton, uploadButton, submitButton, inputId;
				
				for (var i = 0; i < tabCount; i++) {
					browseButton = dialogDefinition.contents[i].get('browse');
					uploadButton = dialogDefinition.contents[i].get('upload');
					submitButton = dialogDefinition.contents[i].get('uploadButton');

					if (browseButton !== null) {
						browseButton.hidden = false;
						browseButton.onClick = function (dialog, i) {
							dialogName = CKEDITOR.dialog.getCurrent()._.name;


                elfNode.dialog({
                  autoOpen: true,
                  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
                    elfInsrance = $(this).elfinder({
                      startPathHash: startPathHash,
                      useBrowserHistory: false,
                      resizable: false,
                      width: '100%',
                      url: elfUrlReal,
                      lang: 'uk',
                      ui: ['toolbar', 'tree', 'path', 'stat'],
                      uiOptions : {
                        toolbar : [
        //                   ["back", "forward"],
                          ['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('close');
                        elfInsrance.disable();
                      }
                    }).elfinder('instance');
                  },
                  open: function() {
                    elfNode.find('div.elfinder-toolbar input').blur();
                    setTimeout(function(){
                      elfInsrance.enable();
                    }, 100);
                  },
                  resizeStop: function() {
                    elfNode.trigger('resize');
                  }
                }).parent().css({'zIndex':'11000'});

						} 
					} 
					
					if (uploadButton !== null && submitButton !== null) {
						uploadButton.hidden = false;
						submitButton.hidden = false;
						uploadButton.onChange = function() {
							inputId = this.domId;
						}
						submitButton.onClick = function(e) {
							dialogName = CKEDITOR.dialog.getCurrent()._.name;

							var target = elfDirHashMap[dialogName]? elfDirHashMap[dialogName] : elfDirHashMap['fb'],
								name = $('#'+inputId),
								input = name.find('iframe').contents().find('form').find('input:file'),
								error = function(err) {
									alert(elfInsrance.i18n(err).replace('<br>', '\n'));
								};
							
							if (input.val()) {
								var fd = new FormData();
								fd.append('cmd', 'upload');
								fd.append('overwrite', 0);
								fd.append('target', target);
								$.each(customData, function(key, val) {
									fd.append(key, val);
								});
								fd.append('upload[]', input[0].files[0]);
								$.ajax({
									url: editor.config.filebrowserUploadUrl,
									type: "POST",
									data: fd,
									processData: false,
									contentType: false,
									dataType: 'json'
								})
								.done(function( data ) {
									if (data.added && data.added[0]) {
										var url = data.added[0].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.selectPage('info');
										dialog.setValueOf('info', urlObj, url);
										if (dialogName == 'image') {
											getShowImgSize(url, function(size) {
												dialog.setValueOf('info', 'txtWidth', size.width);
												dialog.setValueOf('info', 'txtHeight', size.height);
												dialog.preview.$.style.width = size.width+'px';
												dialog.preview.$.style.height = size.height+'px';
											});
										}
									} else {
										error(data.error || data.warning || 'errUploadFile');
									}
								})
								.fail(function() {
									error('errUploadFile');
								})
								.always(function() {
									input.val('');
								});
							}
							return false;
						}
					}

				} 
			});

			CKEDITOR.on('instanceReady', function(e) {
				elfNode = $('<div>');

        var cke = e.editor;

				cke.on('fileUploadRequest', function(e){
					var fileLoader = e.data.fileLoader,
						formData = new FormData(),
						xhr = fileLoader.xhr;
					xhr.open('POST', fileLoader.uploadUrl, true );
					formData.append('cmd', 'upload' );
					formData.append('target', elfDirHashMap.image);
					formData.append('upload[]', fileLoader.file, fileLoader.fileName );
					fileLoader.xhr.send( formData );
				});
				
				cke.on('fileUploadResponse', function(e){
					elfInsrance.exec('reload');
					e.stop();
					var data = e.data,
						res = JSON.parse(data.fileLoader.xhr.responseText);
					if (!res.added || res.added.length < 1) {
						data.message = 'Can not upload.';
						e.cancel();
					} else {
						var file	 = res.added[0];
						if (file.url && file.url != '1') {
							data.url = file.url;
						} else {
							data.url = elfInsrance.options.url + ((elfInsrance.options.url.indexOf('?') === -1)? '?' : '&') + 'cmd=file&target=' + file.hash;
						}
					}
				});
			});

		})();

	</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