1 Initial Problem

1.1 Current Implementation

1.1.1 Data Structure

The ILIAS page editor stores its content as well defined structured XML. A DTD defines the structure of this XML. For example for ILIAS 5.1 this DTD can found under xml/ilias_pg_5_1.dtd.

<PageObject Language="-" Active="1" ActivationStart="" ActivationEnd="" ShowActivationInfo="0">
	<PageContent PCID="10ca998ef04e4f895c924179c2ec7eee">
		<Paragraph Language="de" Characteristic="Headline1">A simple headline</Paragraph>
	</PageContent>
	<PageContent PCID="14c041cec5f80af745f289f59ef3db84">
		<Section Characteristic="Mnemonic" PCID="f5c7c5a0d7aaa82ccc1bc65939a1144a">
			<PageContent PCID="302fd2c4c8688d7d442bd1532e0794ad">
				<Paragraph Language="de" Characteristic="Standard">A paragraph element within a section element.</Paragraph>	
			</PageContent>
		</Section>
	</PageContent>
	<PageContent PCID="14667e4a5d45d02db1b8dda14fe0c408">
		<Section Characteristic="Block" ActiveFrom="1479164400" ActiveTo="1480287600" PCID="1a4a87c709bcd58c76f508b0bef1c93a">
			<PageContent PCID="3ed442e8a3b290147e789f54aa1a5fcd">
				<Paragraph Language="de" Characteristic="Standard">Hallo Welt!</Paragraph>
			</PageContent>
		</Section>
	</PageContent>
	<PageContent PCID="0cc8f9d85de615a2628beb0ead122d1a">
		<ContentInclude ContentType="mep" ContentId="4" InstId="9472"/>
	</PageContent>
	<PageContent PCID="c50184ff180db428c30e010b4df1498a">
		<Paragraph Language="de" Characteristic="Standard">A link to <IntLink Target="il_9472_git_1" Type="GlossaryItem" TargetFrame="Glossary">a glossary</IntLink>.</Paragraph>
	</PageContent>
	<PageContent PCID="4aa8fec855f57b016a7bd7791baad81f">
		<Question QRef="il_9472_qst_1"/>
	</PageContent>
	<PageContent PCID="90f54108760218747fa7b41238cbfe10">
		<Tabs Type="VerticalAccordion" Template="VerticalAccordion" Behavior="AllClosed" HorizontalAlign="Center">
			<Tab PCID="65b84ef07e79cdac2a03a40d619cb87b">
				<PageContent PCID="1d9b3425fcc37de6d074de3137bc1009"><Paragraph Language="de" Characteristic="Standard">Some content in here...</Paragraph></PageContent>
				<TabCaption>Header 1</TabCaption>
			</Tab>
			<Tab PCID="37e7281a97339d30f12618dee31922e4">
				<PageContent PCID="023842ef786b10310d1a2e12d742d12b">
					<MediaObject>
						<MediaAlias OriginId="il_9472_mob_1099"/><MediaAliasItem Purpose="Standard">
							<Layout HorizontalAlign="Left"/>
						</MediaAliasItem>
					</MediaObject>
				</PageContent>
				<TabCaption>Header 2</TabCaption>
			</Tab>
		</Tabs>
	</PageContent>
</PageObject>

The XML is now being transformed into HTML using an XSLT (transformation processing). The result looks (simplified) like this:

<div class="ilc_page_cont_PageContainer">
	[...]
	<h1 class="ilc_Paragraph ilc_heading1_Headline1"><!--PageTocPH-->A simple headline</h1>
	<div class="ilc_section_Mnemonic">
		<div class="ilc_Paragraph ilc_text_block_Standard">A paragraph element within a section element.
		</div>
	</div>
	<div ><a class="small" id="ilPageShowAdvContent"
													   style="display:none; text-align:right;" href="#"><span>Vertiefungswissen anzeigen</span><span>Vertiefungswissen verbergen</span></a>
		<div class="ilc_Paragraph ilc_text_block_MyClass">Hello World of Snippets!</div>
		<div  style="clear:both;"></div>
	</div>
	<div class="ilc_Paragraph ilc_text_block_Standard">A link to <a class="ilc_link_GlossaryLink"
																	href="ilias.php?ref_id=66&amp;from_page=3&amp;frame=right_top&amp;obj_id=1&amp;obj_type=GlossaryItem&amp;cmd=glossary&amp;cmdClass=illmpresentationgui&amp;cmdNode=jg&amp;baseClass=ilLMPresentationGUI"
																	target="right_top"
																	onclick="return il.LearningModule.showContentFrame(event, 'right_top');"
																	id="il__git_1_3_1">a glossary</a>.
	</div>
	<div  class="ilc_question_Standard">
		<form onsubmit="return false;">
			<div id="container1" class="ilc_question_SingleChoice">
				<div class="ilc_qtitle_Title question id" id="1">What is right?</div>
				<span class="ilc_answers answers">
	<div class="ilc_qanswer_Answer"><input class="order" name="answers1" value="1" type="radio"> <span
			class="answertext">Wrong</span></div>
	</span><span class="ilc_answers answers">
	<div class="ilc_qanswer_Answer"><input class="order" name="answers1" value="0" type="radio"> <span
			class="answertext">Right</span></div>
	</span>
				<div id="feedback1" style="display:none"></div>
				<input class="ilc_qsubmit_Submit" id="button1" onclick="ilias.questions.checkAnswers(1)"
					   value="Auswerten" type="button">
			</div>
			<script>
				function renderILQuestion1() {
					ilias.questions.shuffle(questions[1]);
					jQuery('div#container1').autoRender(questions[1]);
 
				}
				renderILQuestion1();
			</script>
		</form>
	</div>
	<div>
		<div class="ilc_va_cntr_VAccordCntr" id="ilc_accordion_3_1">
			<div class="ilc_va_icntr_VAccordICntr">
				<div class="il_VAccordionToggleDef">
					<div class="ilc_va_ihead_VAccordIHead" style="">
						<div class="ilc_va_ihead_VAccordIHeadCap">Header 1</div>
					</div>
				</div>
				<div class="il_VAccordionContentDef ilAccHideContent">
					<div class="ilc_va_icont_VAccordICont" style="">
						<div class="ilc_Paragraph ilc_text_block_Standard">Some content in here...</div>
 
					</div>
				</div>
			</div>
			<div class="ilc_va_icntr_VAccordICntr">
				<div class="il_VAccordionToggleDef">
					<div class="ilc_va_ihead_VAccordIHead" style="">
						<div class="ilc_va_ihead_VAccordIHeadCap">Header 2</div>
					</div>
				</div>
				<div class="il_VAccordionContentDef ilAccHideContent">
					<div class="ilc_va_icont_VAccordICont" style="">
						<div style="clear:both;" align="left">
							<table class="ilc_media_cont_MediaContainer" style="margin-left: 0px;">
								<tbody>
								<tr>
									<td class="ilc_Mob" width="738"><img
											src="./data/ilias51x/mobs/mm_1099/BergHasel.jpeg" width="738"
											height="605" border="0"></td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">                    $(function () {
			il.Accordion.add({
				id: 'ilc_accordion_3_1',
				toggle_class: 'il_VAccordionToggleDef',
				toggle_act_class: 'il_VAccordionToggleActiveDef',
				content_class: 'il_VAccordionContentDef',
				width: null,
				height: null,
				orientation: 'vertical',
				behaviour: 'AllClosed',
				save_url: '',
				active_head_class: 'ilc_va_iheada_VAccordIHeadActive',
				int_id: '',
				multi: false
			});
		});
		</script>
	</div>
</div>

1.1.2 Separation of Content Structure and Style

When editing authors cannot directly assign style attributes (e.g. font color, font size, ...) to the content. The editor provides only the possibility to assign style classes to text or content elements. A separate CSS editor allows to define the styles for these classes. The main reasons are:

• The separation of content style allows to attribute style classes with a title that says something about the semantics / meaning of this style class. For example a section could use the style class "Further Reading" or "Advanced Content". This gives authors a guide when to use this style.
• The use of style classes allows to apply styles consistently. This consistency greatly improves the learnability for the reader. It will be easy to understand what a certain style means and identify corresponding elements quickly in the content.
• The use of style classes centralizes style decisions in the style sheet. This greatly improves maintainability of the style, since it allows to make consistent changes in one place. If styles are directly assigned to the content on each page separately, it will need much more effort to make changes consistently.
• The style sheets also work as an inventory of styles. If style attributes could be applied directly to content it would be impossible to get an overview which kind of style attributes are used at all (e.g. in a learning module). Only the style editor allows to develop and implement a global (or local) style guide at all.
• The centralisation of the style decision also allows to put design decision into the hand of professional designers will result in a general better quality of the applied styles.

1.1.3 How editing works

Initially the whole editor used HTML forms and BB-Code like syntax for text elements. Like today the whole editing page is devided into blocks, each block represents a content element of different types (e.g. text paragraph, sections, file lists, ...). Blocks can be moved around (today using JS and drag/drop), but if the content of a block should be edited (e.g. a text paragraph) a switch into the "editing view" of a single block is necessary.

• Most blocks still use simple HTML forms in a separate view to edit the attributes of the block.
• Editing of text blocks is using an instance of the TinyMCE editor in the background. Since TinyMCE is an HTML editor a transformation from the HTML output of TinyMCE to our XML is needed. Since the output of HTML editors like TinyMCE depends to a certain extent on the browser, this is already an error-prone task. Even if things have been improved in the past.

1.2 Current Issues/Problems

Killing, Alexander [alex], 15 Sep 2016: Everyone is invited to list her or his issues with the current editor. I know that the requirements are quite diverse.

• All paragraphs are handled separately. It requires a lot of clicking to write down heading-text-sequences.
• Bugs mainly due to browser/Tiny behaviour, e.g. when editing nested lists.
• Annoying editing of tables, especially large tables.
• Adding images or youtube videos uses a quite complex form/workflow.

2 Conceptual Summary

In general we do not want to break the already available content. This means we keep the underlying well-defined-XML structure for the page editor including a semantic content attribution approach and a separation of semantic content structure and style. There are currently two approaches when it comes to content editing in web browsers. Using the contentEditable feature of browsers or providing a complete editing environment on top of the DOM.

2.1 Using a contentEditable based solution

The most popular wysiwyg HTML editors make use of contentEditable attribute for elements which activates the browser support for editing element. The underlying problem is the very different support of browsers for this feature, differences in resulting markup, selection/cursor handling, and so on. This results in difficulties when mapping the different results to a well-defined document structure.

2.2 Using a DOM Manipulating based solution

This approach catches all events fired by the user (pressing buttons, pasting content, ...) before the browser executes them. Instead of the browser own-written-Javascript now applies the necessary changes to the DOM directly. Google Docs does this (its editor is not open source).

• Brief intro how google docs works
• Talk of the proseMirror developer on editor evolution

2.3 Alternatives

2.3.1 TinyMCE

• Inline Editing
• Premium features, e.g. Paste From Word
• Non-Editable Plugin (May allow at least partially implementing the behaviour of CK Editor widgets, documentation says "editable in noneditable" is not supported. This example seems to work at least in current Firefox version.)

2.3.2 CKEditor

CKEditor

•  Google Trends, TinyMCE vs. CKEditor
• Widget Support

2.3.3 ProseMirror

ProseMirror uses the contenteditabl feature for cursor and selection handling only. All other events are catched and executed by its own code.

• currently beta (15 Sep 2016)
• reliable content structure results
• provides historical position mapping (interesting, e.g. when it comes to annotate selections)
• collaboration support (handles conflicts when multiple users are editing the same content)

• support for widgets or at least non-editable areas
• flexibility in the definition of the target document structure

2.4 Related Feature Requests

Several existing feature requests are related to or dependent from the further decision about the technical basis of the ILIAS Page Editor. These requests are listed below:

• Linking in ILIAS Editor
• Add comments to single text-/media elements

3 Status

• Scheduled for: Not scheduled yet
• Funding: [[Required]
• Maintainer: Alexander Killing, LEIFOS
• Implementation of the feature is done by (company, developer)
• Contract settled: No
• Tested by / status: (name, e-mail), (status information set after implementation)

4 Additional Information

Contact the following persons if you want to know more about this feature, its implementation or funding:

• Information about concept: Alexander Killing, LEIFOS
• Information about funding: (name, e-mail)
• Information about implementation: (name, e-mail)

5 Discussion

6 Implementation

...