new ckeditor

New ckeditor

ckeditor/plugins/ckawesome/dialogs/ckawesome.css

@@ -0,0 +1,5 @@
+div.cke_dialog_ui_input_select, .cke_dialog_ui_input_select{ width: 100%; }
+.select2-drop, .select2-dropdown, .select2-container{ z-index: 100000 !important; }
+.select2-dropdown{ 	margin-left: 8px; }
+.select2-chosen{ margin-top: 7px; }
+.select2-results__option span{ color: #000; font-size: 12px !important; font-family: Arial; display:block; white-space: nowrap; overflow:hidden; }

ckeditor/plugins/ckawesome/dialogs/ckawesome.js

@@ -0,0 +1,148 @@
+
+CKEDITOR.dialog.add('ckawesomeDialog', function( editor ) {
+	function getCKAwesomeIcons(selectList ){
+	     var result = [];
+	     var scriptUrl = editor.fontawesomePath;
+
+	     $.ajax({
+	        url: scriptUrl,
+	        type: 'get',
+	        dataType: 'html',
+	        async: false,
+	        success: function(response) {
+	        	var excludeStyles = [".fa.",".fa",".fa-lg",".fa-2x",".fa-3x",".fa-4x",".fa-5x",".fa-fw",".fa-ul",".fa-ul>",".fa-li",".fa-border",".fa-pull-left",".fa-pull-right",".fa-spin",".fa-pulse",".fa-rotate-90",".fa-rotate-180",".fa-rotate-270",".fa-flip-horizontal",".fa-flip-vertical",".fa-stack",".fa-stack-1x",".fa-stack-2x",".fa-inverse"];
+	        	var regxstyles = new RegExp(/\.[a-zA-Z_][\w-_]*[^\.\s\{#:\,;]/,"g" );
+	        	var styles = response.match(regxstyles);
+	        	styles.sort();
+	        	$.each(styles, function( index, value ) {
+	        		var xstart=value.substring(0, 3).substring(1);
+	        		if (xstart != 'fa' || excludeStyles.indexOf(value) > 0){ return; }
+	        		value = value.substring(1);
+	        		selectList.add(value, value);
+	        	})
+
+	        },
+	        error: function (jqXHR, exception) {
+	            alert("Error loading Font Awesome css: \n" + scriptUrl);
+	        },
+	     });
+	}
+
+	function getSelectionOptions(selectList, start, inc, many){
+	    var result = [];
+	    var val = start;
+
+	    result.push(start);
+
+	    many = many > 0 ? many : 5;
+	    for(var i = 0; i < many; i++){
+	    	val += inc;
+	    	result.push(val);
+	    }
+
+	    $.each(result, function( index, value ) {
+	   		selectList.add(value, value);
+	   	})
+	}
+
+	function formatCKAwesome (icon) {
+	  if (!icon.id) { return icon.text; }
+	  var text = icon.text.replace(/fa-|\.|\-/gi, " ");
+	  var icon = $('<span class="ckawesome_options"><i class="fa ' + icon.element.value + ' fa-fw"></i> ' + text + "</span>");
+	  return icon;
+	};
+
+    return {
+        title: 'Insert CKAwesome',
+        minWidth: 200,
+        minHeight: 200,
+
+        contents: [
+            {
+                id: 'options',
+                label: 'Basic Settings',
+                elements: [
+                    {
+					    type: 'select',
+					    id: 'ckawesomebox',
+					    label: 'Select font Awesome',
+					    validate: CKEDITOR.dialog.validate.notEmpty( "Font Awesome field cannot be empty." ),
+					    items: [[ editor.lang.common.notSet, '' ]],
+					    onLoad: function () {
+						   	getCKAwesomeIcons(this);
+						   	var selectbx = $('#' + this.getInputElement().getAttribute('id'));
+						   	$(selectbx).select2({ width: "100%", templateResult: formatCKAwesome, templateSelection: formatCKAwesome});
+					    },
+					    onShow: function(){
+					    	var selectbx = $('#' + this.getInputElement().getAttribute('id'));
+					    	$(selectbx).val('').trigger('change') ;
+					    }
+                    },
+                    {
+                        type: 'select',
+                        id: 'textsize',
+                        label: 'Select  size',
+                        items: [[ editor.lang.common.notSet, '' ]],
+                        onLoad: function (widget) {
+                        	getSelectionOptions(this, 8, 1, 42);
+                        }
+                    },
+                    {
+                        type: "hbox",
+                        padding: 0,
+                        widths: ["80%", "20%"],
+                        children: [
+                            {
+                                id: 'fontcolor',
+                                type: 'text',
+                                label: 'Select color',
+                                onChange: function( element ) {
+                                	var idEl = $('#' +this.getInputElement().getAttribute('id'));
+                                	idEl.css("background-color", idEl.val());
+                                },
+                                onKeyUp: function( element ) {
+                                	var idEl = $('#' + this.getInputElement().getAttribute('id'));
+                                	idEl.css("background-color", idEl.val());
+                                },
+        					    onShow: function(){
+        					    	var idEl = $('#' + this.getInputElement().getAttribute('id'));
+                                	idEl.css("background-color", "");
+        					    }
+                            },
+                            {
+                                type: "button",
+                                id: "fontcolorChooser",
+                                "class": "colorChooser",
+                                label: "Color",
+                                style: "margin-left: 8px",
+                                onLoad: function () {
+                                    this.getElement().getParent().setStyle("vertical-align", "bottom")
+                                },
+                                onClick: function () {
+                                    editor.getColorFromDialog(function (color) {
+                                        color && this.getDialog().getContentElement("options", "fontcolor").setValue( color );
+                                        this.focus()
+                                    }, this)
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+        ],
+        onOk: function() {
+            var dialog = this;
+
+            var cka = editor.document.createElement( 'span' );
+            var cka_size = dialog.getValueOf( 'options', 'textsize' );
+            var cka_color = dialog.getValueOf( 'options', 'fontcolor' );
+            var cka_class = "fa fa-fw " + dialog.getValueOf( 'options', 'ckawesomebox' );
+            var cka_style = ( cka_size != '' ? 'font-size: '+cka_size+'px;' : '' ) + ( cka_color != '' ? 'color: '+cka_color+';' : '' ) ;
+
+            cka.setAttribute( 'class', cka_class );
+            if ( cka_style ) cka.setAttribute( 'style', cka_style );
+
+            editor.insertElement( cka );
+        }
+    };
+});

ckeditor/plugins/ckawesome/plugin.js

@@ -0,0 +1,33 @@
+/**
+ *   CKAwesome
+ *   =========
+ *   http://blackdevelop.com/io/ckawesome/
+ *
+ *   Copyright (C) 2017 by Blackdevelop.com
+ *   Licence under GNU GPL v3.
+ */
+
+CKEDITOR.on('instanceReady',function () { CKEDITOR.document.appendStyleSheet(CKEDITOR.plugins.getPath('ckawesome') + 'resources/select2/select2.full.min.css');   });
+CKEDITOR.on('instanceReady',function () { CKEDITOR.document.appendStyleSheet(CKEDITOR.plugins.getPath('ckawesome') + 'dialogs/ckawesome.css');   });
+CKEDITOR.scriptLoader.load(CKEDITOR.plugins.getPath('ckawesome') + 'resources/select2/select2.full.min.js');
+CKEDITOR.dtd.$removeEmpty.span = 0;
+CKEDITOR.plugins.add('ckawesome', {
+    requires: 'colordialog',
+    icons: 'ckawesome',
+
+    init: function(editor) {
+    	var config = editor.config;
+    	editor.fontawesomePath = config.fontawesomePath ? config.fontawesomePath : CKEDITOR.plugins.getPath('ckawesome') + 'fontawesome/css/font-awesome.min.css';
+
+    	CKEDITOR.document.appendStyleSheet(editor.fontawesomePath);
+    	editor.addContentsCss(editor.fontawesomePath);
+
+        CKEDITOR.dialog.add('ckawesomeDialog', this.path + 'dialogs/ckawesome.js');
+        editor.addCommand( 'ckawesome', new CKEDITOR.dialogCommand( 'ckawesomeDialog', { allowedContent: 'span[class,style]{color,font-size}(*);' }));
+        editor.ui.addButton( 'ckawesome', {
+              label: 'Insert CKAwesome',
+              command: 'ckawesome',
+              toolbar: 'insert',
+        });
+    }
+});