Index: lams_central/web/ckeditor/README.md
===================================================================
diff -u -r0a58bb94d485d341c67ff32fbc77a32fc3862cfa -rd75aa60ad73a727da704c060d9edb23d9996221b
--- lams_central/web/ckeditor/README.md	(.../README.md)	(revision 0a58bb94d485d341c67ff32fbc77a32fc3862cfa)
+++ lams_central/web/ckeditor/README.md	(.../README.md)	(revision d75aa60ad73a727da704c060d9edb23d9996221b)
@@ -1,39 +1,167 @@
 CKEditor 4
 ==========
 
-Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 http://ckeditor.com - See LICENSE.md for license information.
 
-CKEditor is a text editor to be used inside web pages. It's not a replacement
-for desktop text editors like Word or OpenOffice, but a component to be used as
-part of web applications and websites.
+## Installation
 
-## Documentation
+1. Go to https://ckeditor.com/cke4/builder. Select Full. Upload /lams_central/web/ckeditor/build-config.js
 
-The full editor documentation is available online at the following address:
-http://docs.ckeditor.com
+2. Download CKEditor
 
-## Installation
+3. Copy plugins developed by LAMS from the old instance of CKEditor
+/ckeditor/plugins/jlatexmath
+/ckeditor/plugins/bootstrapTabs
+/ckeditor/plugins/kaltura
+/ckeditor/plugins/bootsnippets
 
-Installing CKEditor is an easy task. Just follow these simple steps:
+4. Apply all customizations listed below in ## LAMS Customizations
 
- 1. **Download** the latest version from the CKEditor website:
-    http://ckeditor.com. You should have already completed this step, but be
-    sure you have the very latest version.
- 2. **Extract** (decompress) the downloaded file into the root of your website.
 
-**Note:** CKEditor is by default installed in the `ckeditor` folder. You can
-place the files in whichever you want though.
+## LAMS Customizations
 
-## Checking Your Installation
+1. In order to make Preview feature available in inline mode, Preview plugin needed to be tweaked. To achieve it the next command
+"a.elementMode!=CKEDITOR.ELEMENT_MODE_INLINE&&(" .. ")" was removed from the ckeditor.js; precisely from that line:
+CKEDITOR.plugins.add("preview",{init:function(a){a.elementMode!=CKEDITOR.ELEMENT_MODE_INLINE&&(h=this.path,a.addCommand
 
-The editor comes with a few sample pages that can be used to verify that
-installation proceeded properly. Take a look at the `samples` directory.
+(As in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=3f3b286c8daddd86677d64fcd08366c33fbfd927)
 
-To test your installation, just call the following page at your website:
+2. Emojione button.
+When adding Emojione plugin as integrated one, its icon gets incorporated into icons.png incorrectly (the size of the icon is much bigger than 16 px) that's why it doesn't get displayed at all. 
+So we need to tweak editor.css and replace CSS rule for .cke_button__emojione_icon with the following:
+.cke_button__emojione_icon {background: url(../../plugins/emojione/icons/emojione.png?t=dee79e2) no-repeat 0 0 !important; background-size: 100% !important;}
+Also do not delete /ckeditor/plugins/emojione/icons/emojione.png
 
-	http://<your site>/<CKEditor installation path>/samples/index.html
+(As in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=781f0147a8670550edaf7a482d85a4504f93e564)
 
-For example:
+3. Preview should show text on a white background
+Don't add class to the resulted preview body. It can be achieved by
+removing the following line from the ckeditor.js:
+,d.getAttribute("class")&&(b+='class\x3d"'+d.getAttribute("class")+'" ')
 
-	http://www.example.com/ckeditor/samples/index.html
+(As in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=f8ccd872d79996df2a3d0e8485e2c95ccbef044b)
+
+4. bootstrapTabs plugin. The "element.getAscendant"'s function that was specified on Double click and contextMenu listener methods were replaced with the following "return !( element instanceof CKEDITOR.dom.document ) && element.hasClass('bootstrap-tabs') ;". As otherwise it always false positively determined there is a tabs element in CKEditor canvas (due to LAMS header containing a tab).
+
+Modify ckeditor.js.
+	* replace 
+	return!(a instanceof CKEDITOR.dom.document)&&(a.hasClass("nav-tabs")||a.hasClass("tab-content"))
+	with the following
+	return!(a instanceof CKEDITOR.dom.document)&&a.hasClass("bootstrap-tabs")
+
+	* replace 
+	return!(a instanceof CKEDITOR.dom.document)&&("a"==a.name&&"tab"==a.attributes.role||a.hasClass("nav-tabs")||a.hasClass("tab-content"))
+	with the following
+	return!(a instanceof CKEDITOR.dom.document)&&a.hasClass("bootstrap-tabs")
+
+(Similar to https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=2fbab8924ec9cef2ab6ed231386042fc8ab17fe4)
+
+5. Modify html5audio plugin.
+Add support for double click event. Also add padding around widget to increate area where user can double click and right click when trying to open html5audio dialog.
+
+	*after
+	this.element.getChild(0).setAttribute("controlslist","nodownload"))
+	insert
+	;
+	//*LAMS* add padding around widget to increase area where user can double click and right click when trying to open html5audio dialog
+	var elementCssPadding = this.element.getStyle( 'padding').replace('px', '');
+	if ( elementCssPadding < 10) {
+		this.element.setStyle( 'padding', '10px' );
+	}
+	
+	*after 
+	CKEDITOR.dialog.add("html5audio",this.path+"dialogs/html5audio.js")
+	insert
+	;
+	b.on( 'doubleclick', function( evt ) {
+		var element = evt.data.element;
+	
+		//check if it has parent with class .lams-bootpanel
+		if ( element && b.elementPath( element ).contains( function( element ) {        
+		 	if ( element.is( 'div' ) && element.hasClass( 'ckeditor-html5-audio' )) {
+		 		return true;
+		 	}
+		})) {
+			evt.data.dialog = 'html5audio';
+		} 
+	});
+
+(Similar to https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=091a2b538d13f42a153dc5d0137ea6caffbd983b)
+
+6. Open JLatexmath dialog when clicking on its image
+After
+!a.attributes["data-cke-realelement"]
+Add
+&&!a.attributes["data-jlatexmath"]
+
+(Similar to https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=423d88c3f279da62c8802e3f9df86654a659fcb3)
+
+7. Including bootstrap tables CSS styles.
+
+Replace /lams_central/web/ckeditor/plugins/table/dialogs/table.js entirely with the following file https://code.lamsfoundation.org/fisheye/browse/~raw,r=2b9f93362e5be1cb3a8718e7f8f26bda31bd4a60/lams-github/lams_central/web/ckeditor/plugins/table/dialogs/table.js
+
+(as in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=2b9f93362e5be1cb3a8718e7f8f26bda31bd4a60)
+
+8. image2 plugin. Add 'classes' field to its dialog.
+
+	* Edit /lams_central/web/ckeditor/plugins/image2/dialogs/image2.js
+	Before
+	{type:"hbox",widths:["25%","25%","50%"]
+	Add
+	//**LAMS** the following classes chunk added by LAMS 
+	{
+	    id: 'classes',
+	    type: 'text',
+	    label: 'Classes',
+	    setup: function( widget ) {
+	    	var classesObj = widget.getClasses();
+	    	var classesNames = [];
+	    	for (var classesName in classesObj) {
+	            if (classesObj.hasOwnProperty(classesName)) {
+	            	classesNames.push(classesName);
+	            }
+	        }
+	        this.setValue( classesNames.join(',') );
+	        
+	    },
+	    commit: function( widget ) {
+	    	var oldClasses = widget.getClasses();
+	    	
+	    	//add new classes
+	    	var userEnteredClasses = this.getValue().split(',');
+	    	for (var i = 0; i < userEnteredClasses.length; i++) {
+	    		var userEnteredClass = userEnteredClasses[i];
+	    	    if (!widget.hasClass(userEnteredClass)) {
+	    	    	widget.addClass(userEnteredClass);
+	    	    }
+	    	}
+	        
+	    	//remove obsolete classes
+	        for (var oldClass in oldClasses) {
+	            if (oldClasses.hasOwnProperty(oldClass) && !userEnteredClasses.includes(oldClass)) {
+	            	widget.removeClass(oldClass);
+	            }
+	        }
+	    }
+	},
+	
+	* Edit /ckeditor/ckeditor.js
+	Replace two instances of 
+	\x3cimg alt\x3d"" src\x3d
+	With the following
+	\x3cimg class\x3d"img-responsive" alt\x3d"" src\x3d
+	
+(As in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=62a52d851ecb5878433ca8ecd5ef422375619f47)
+
+
+9. Add jqeury.js and bootstrap.min.js scripts to preview page
+After
+"\x3c/title\x3e"+CKEDITOR.tools.buildStyleHtml(a.config.contentsCss)+
+Insert the following:
+"<script type='text/javascript' src='/lams/includes/javascript/jquery.js'></script><script type='text/javascript' src='/lams/includes/javascript/bootstrap.min.js'></script>"+
+
+(As in https://code.lamsfoundation.org/fisheye/changelog/lams-github?cs=cc93c9f975e956a0f5e70032c0dbc1beb106e2fb)
+
+10. CKEditor's Upload image dialog doesn't work correctly (LDEV-4557)
+...