Wysiwyg for pages module

assets/cp.scripts.js

@@ -47,7 +47,7 @@
 	try {
 		new Event('test');
 	} catch (e) {
-		// IE does not support `new Event()`
+		// IE does not support 'new Event()'
 		createEvent = function createEvent(name) {
 			var evt = document.createEvent('Event');
 			evt.initEvent(name, true, false);
@@ -390,6 +390,11 @@
 			}
 		};
 
+		function HtmlDecode(value) {
+			var doc = new DOMParser().parseFromString(value, "text/html");
+			return doc.documentElement.textContent;
+		};
+
 		function AllFormsToAjax() {
 			$('form').each(function() {
 				FormToAjax($(this));
@@ -407,7 +412,56 @@
 
 		function MakeTextAreasAutoSized() {
 			autosize($('textarea.autosize'));
-		}
+		};
+
+		function MakeTextAreasWysiwyg() {
+			$('textarea.wysiwyg').each(function() {
+				var area = $(this)[0];
+				var area_id = area.id;
+				var area_name = area.name;
+				var area_html = area.innerHTML;
+
+				$(area).wrap('<div id="' + area_id + '_wysiwyg" class="form-control wysiwyg" style="height:auto;padding:0px"></div>').remove();
+				var wysiwyg = document.getElementById(area_id + '_wysiwyg');
+
+				wysiwyg.id = area_id;
+				$(wysiwyg).append('<textarea id="' + area_id + '_wysiwyg' + '" name="' + area_name + '" style="display:none!important"></textarea>');
+
+				area = document.getElementById(area_id + '_wysiwyg');
+				area.innerHTML = area_html;
+
+				var editor = window.pell.init({
+					element: wysiwyg,
+					onChange: function(html) {
+						area.innerHTML = html;
+						if(!FormDataWasChanged) {
+							FormDataWasChanged = true;
+						}
+					},
+					defaultParagraphSeparator: 'p',
+					styleWithCSS: false,
+					actions: [
+						'bold',
+						'italic',
+						'underline'
+					],
+					classes: {
+						actionbar: 'pell-actionbar',
+						button: 'pell-button',
+						content: 'pell-content',
+						selected: 'pell-button-selected'
+					}
+				});
+				editor.onfocusin = function() {
+					$(wysiwyg).addClass('focused');
+				};
+				editor.onfocusout = function() {
+					$(wysiwyg).find('.pell-actionbar button.pell-button-selected').removeClass('pell-button-selected');
+					$(wysiwyg).removeClass('focused');
+				};
+				editor.content.innerHTML = HtmlDecode(area_html);
+			});
+		};
 
 		function Initialize() {
 			// Check if jQuery was loaded
@@ -415,6 +469,7 @@
 				AllFormsToAjax();
 				BindWindowBeforeUnload();
 				MakeTextAreasAutoSized();
+				MakeTextAreasWysiwyg();
 			} else {
 				console.log('Error: jQuery is not loaded!');
 			}

assets/cp.styles.css

@@ -411,6 +411,35 @@ ul.pagination {
 	padding-right: 0px !important;
 }
 
+/* Wysiwyg */
+textarea.form-control.wysiwyg {
+	display: none;
+}
+
+.wysiwyg .pell-actionbar {
+	padding: .2rem;
+	border-radius: .25rem .25rem 0px 0px;
+	border-bottom: 1px solid #ced4da;
+}
+
+.wysiwyg .pell-actionbar .pell-button {
+	margin-right: .2rem;
+	border-radius: .25rem;
+	background-color: #e7e7e7;
+}
+
+.wysiwyg .pell-actionbar .pell-button.pell-button-selected {
+	color: #fff;
+	background-color: #007bff;
+}
+
+div.wysiwyg.focused {
+	background-color: #fff;
+	border-color: #80bdff;
+	outline: 0;
+	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
+}
+
 /* Mobile fixes */
 @media (min-width: 992px) {
 	body.cp.cp-sidebar-right .wrap .sidebar.sidebar-right.d-lg-table-cell {

consts/consts.go

@@ -5,7 +5,7 @@ import (
 )
 
 const ServerVersion = "1.0.5"
-const AssetsVersion = "22"
+const AssetsVersion = "24"
 const AssetsPath = "assets"
 const DirIndexFile = "index.html"
 

modules/module_index.go

@@ -249,7 +249,7 @@ func (this *Modules) RegisterModule_Index() *Module {
 					Caption: "Page content",
 					Name:    "content",
 					Value:   data.A_content,
-					Classes: "autosize",
+					Classes: "wysiwyg",
 				},
 				{
 					Kind:    builder.DFKText,