Integrated the CKEditor

#7 and #8: The class CMS_EDITOR generates javascript code that replaces a textarea with a wysiwyg editor. Only a few methods have to be implemented by the subclasses, for example by CMD_EDITOR_CKEDITOR. The class CMS_FORM_TEXTAREA extends WSF_FORM_TEXTAREA with features to include the javascript from CMS_EDITOR. The most complex usage is shown in CMS_NODE_TYPE_WEBFORM_MANAGER, where the textarea is only replaced if "full_html" is selected as the desired body format. This works dynamically on the browser side as soon as the user selects another format.

modules/node/handler/cms_node_type_webform_manager.e

@@ -15,9 +15,10 @@ feature -- Forms ...
 		local
 			ti: WSF_FORM_TEXT_INPUT
 			fset: WSF_FORM_FIELD_SET
-			ta, sum: WSF_FORM_TEXTAREA
+			ta, sum: CMS_FORM_TEXTAREA
 			tselect: WSF_FORM_SELECT
 			opt: WSF_FORM_SELECT_OPTION
+			full_format: FULL_HTML_CONTENT_FORMAT
 		do
 			create ti.make ("title")
 			ti.set_label ("Title")
@@ -30,10 +31,18 @@ feature -- Forms ...
 
 			f.extend_html_text ("<br/>")
 
+			-- Select field has to be initialized before textareas are replaced, because they depend on the selection of the field
+			create tselect.make ("format")
+			tselect.set_label ("Body's format")
+			tselect.set_is_required (True)
+
+
+			create full_format.default_create
 			-- Main Content
 			create ta.make ("body")
 			ta.set_rows (10)
 			ta.set_cols (70)
+			ta.show_as_editor_if_selected (tselect, full_format.name)
 			if a_node /= Void then
 				ta.set_text_value (a_node.content)
 			end
@@ -45,6 +54,8 @@ feature -- Forms ...
 			create sum.make ("summary")
 			sum.set_rows (10)
 			sum.set_cols (70)
+			-- if full_html is selected
+			sum.show_as_editor_if_selected (tselect, full_format.name)
 			if a_node /= Void then
 				sum.set_text_value (a_node.summary)
 			end
@@ -58,14 +69,12 @@ feature -- Forms ...
 			-- Add summary
 			fset.extend (sum)
 			fset.extend_html_text("<br />")
-			
+
 			-- Add content (body)
 			fset.extend (ta)
 			fset.extend_html_text ("<br/>")
 
-			create tselect.make ("format")
-			tselect.set_label ("Body's format")
-			tselect.set_is_required (True)
+
 			across
 				 content_type.available_formats as c
 			loop

src/kernel/form/cms_editor.e

@@ -0,0 +1,108 @@
+note
+	description: "Class to import a WYSIWIG editor using javascript code"
+	author: "Dario B<>sch <daboesch@student.ethz.ch"
+	date: "$Date$"
+	revision: "$Revision$"
+
+deferred class
+	CMS_EDITOR
+
+feature -- Initialisation
+	load_assets : STRING
+			-- Loads all assest needed to show the editor
+		deferred
+		end
+
+feature -- Javascript
+
+	javascript_replace_textarea (a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- Javascript code that replaces a textarea with the editor. The editor instance should be saved in editor_variable
+		deferred
+		end
+
+	javascript_restore_textarea (a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- Javascript code that restores a textarea
+		deferred
+		end
+
+	javascript_textarea_to_editor(a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- Javascript code to display the textarea as a WYSIWIG editor as soon as the document is loaded
+		local
+			l_code : STRING
+		do
+			Result := javascript_ready(javascript_replace_textarea (a_textarea))
+		end
+
+	javascript_textarea_to_editor_if_selected (a_textarea : WSF_FORM_TEXTAREA; a_select_field : WSF_FORM_SELECT; a_value : STRING) : STRING
+			-- Javascript code to display the textarea as a WYSIWIG editor if a_select_field has a_value
+		local
+			initial_replace_code, on_select_replace_code : STRING
+		do
+			-- Javascript that replaces the textarea if a_value is selected at load time
+			initial_replace_code := javascript_ready(javascript_if_selected(a_select_field, a_value, javascript_replace_textarea(a_textarea)))
+
+			-- Javascript code that replaces the textarea as soon as value is selected at a_select_field
+			on_select_replace_code := javascript_ready(
+										javascript_init_editor_variable(a_textarea) +
+										javascript_on_select(a_select_field, a_value,
+											-- If a_value is selected, replace textarea
+											javascript_replace_textarea(a_textarea),
+
+											-- Otherwise restore it
+											javascript_restore_textarea(a_textarea)
+										)
+									)
+
+			Result := initial_replace_code + " " + on_select_replace_code
+		end
+
+	javascript_init_editor_variable(a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- Returns the javascript code that initializes a local variable to store the editor instance
+		do
+			Result := "var " + editor_variable(a_textarea) + "; "
+		end
+
+
+
+	javascript_if_selected(a_select_field : WSF_FORM_SELECT; a_value : STRING; a_code : STRING) : STRING
+			-- Javascript that executes a_code if a_value is selected at a_select_field
+		do
+			Result := "if($('#" + field_id(a_select_field) + "').val() == %"" + a_value + "%"){ " + a_code + " }"
+		end
+
+	javascript_ready (a_code : STRING) : STRING
+			-- Wraps the given javascript code with a ready statement, such that it's executed when the document has loaded
+		do
+			Result := "$(function() { " + a_code + " });"
+		end
+
+	javascript_on_select (a_select_field : WSF_FORM_SELECT; a_value : STRING; a_then : STRING; a_else : STRING) : STRING
+			-- Javascript code that executes a_then if at the given select_field the given string value is selected, otherwise it executes a_else
+		do
+			Result := "$('#" + field_id(a_select_field) + "').change(function(){" +
+					javascript_if_selected(a_select_field, a_value, a_then) +
+				"else{" +
+					a_else +
+				"}" +
+			"});"
+		end
+
+feature -- Helper
+
+	field_id(a_select_field : WSF_FORM_SELECT) : STRING
+			-- Returns the id of the given field
+		do
+			if attached a_select_field.css_id  as a_id then
+				Result := a_id
+			else
+				Result := a_select_field.name + "-select"
+			end
+		end
+
+	editor_variable (a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- Returns the variable name that stores the editor instance of the given textarea
+		do
+			Result := "editor_" + a_textarea.name
+		end
+
+end

src/kernel/form/cms_editor_ckeditor.e

@@ -0,0 +1,37 @@
+note
+	description: "Summary description for {CMS_EDITOR_CKEDITOR}."
+	author: ""
+	date: "$Date$"
+	revision: "$Revision$"
+
+class
+	CMS_EDITOR_CKEDITOR
+
+inherit
+	CMS_EDITOR
+
+feature -- Initialisation
+
+	load_assets : STRING
+			-- <Precursor>
+		do
+			Result := "<script src=%"//cdn.ckeditor.com/4.4.7/standard/ckeditor.js%"></script>"
+		end
+
+feature -- Javascript
+
+	javascript_replace_textarea (a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- <Precursor>
+		do
+			-- Replaces the textarea with an editor instance. Save the instance in a variable
+			Result := editor_variable(a_textarea) + " = CKEDITOR.replace( '" + a_textarea.name + "' );"
+		end
+
+	javascript_restore_textarea (a_textarea : WSF_FORM_TEXTAREA) : STRING
+			-- <Precursor>
+		do
+			-- Replaces the textarea with an editor instance. Save the instance in a variable
+			Result := "if (" + editor_variable(a_textarea) + " != undefined) " + editor_variable(a_textarea) + ".destroy();"
+		end
+
+end

src/kernel/form/cms_form_textarea.e

@@ -0,0 +1,82 @@
+note
+	description: "Extends the WSF form textarea with features to add a WYSIWIG editor."
+	author: "Dario B<>sch <daboesch@student.ethz.ch"
+	date: "$Date: 2015-05-23 16:02:55 +0100 (Sat, 23 May 2015) $"
+	revision: "$Revision: 96616 $"
+
+class
+	CMS_FORM_TEXTAREA
+
+inherit
+	WSF_FORM_TEXTAREA
+		redefine
+			make,
+			append_item_to_html
+		end
+
+	CMS_EDITOR_CKEDITOR
+
+create
+	make
+
+feature -- Initialisation
+
+make (a_name: like name)
+		-- <Precursor>
+	do
+		precursor(a_name)
+
+		-- By default we don't replace the textarea by an editor
+		editor := False;
+	end
+
+feature -- Access
+
+	editor : BOOLEAN
+		-- True if the textarea should be replaced by the editor. Default is false.
+
+	format_field : detachable WSF_FORM_SELECT
+		-- Selection field for the format on that it depends, if the editor is shown or not.
+
+	condition_value : detachable STRING
+
+feature -- Editor
+
+	show_as_editor
+			-- The textarea will be replaced by a wysiwyg editor
+		do
+			editor := True
+		end
+
+	show_as_editor_if_selected (a_select_field : WSF_FORM_SELECT; a_value : STRING)
+			-- Replaces the textarea only if a_select_field has a_value (or the value gets selected)
+		do
+			editor := True
+			format_field := a_select_field
+			condition_value := a_value
+		end
+
+feature -- Conversion
+
+
+	append_item_to_html (a_theme: WSF_THEME; a_html: STRING_8)
+		do
+			-- Add javascript to replace textarea with editor
+			precursor(a_theme, a_html)
+			if editor then
+				a_html.append (load_assets)
+				a_html.append ("<script type=%"text/javascript%">");
+				if attached format_field as l_field and then attached condition_value as l_value then
+					a_html.append (javascript_textarea_to_editor_if_selected(current, l_field, l_value))
+				else
+					a_html.append (javascript_textarea_to_editor(current))
+				end
+				a_html.append ("</script>")
+			end
+		end
+
+feature -- Javascript Output
+
+	javascript_show_editor_on_full_html_select : STRING = ""
+
+end