Forum OpenACS Development: WYSIWYG, XoWiki, and Semantic markup

One of the things that disturbs me about WYSIWIG editors is the source code that results after a few edits: messy non-semantic html. This is a disadvantage if you want content that can be programatically manipulated (simple example can be found in the wikipedia: makes it easy to add a "edit this section" button that makes manipulating the content of large documents much easier.

What has been the experience with the WYSIWYG editor included in OpenACS now (e.g. the one that Gustaf is using in XoWiki)? Can we get it to work with the options we have already (plain,enhanced,html,wysiwyg dropdown)? Should we add some kind of scheduled procedure that finds bad markup? Other ideas?

Posted by Gustaf Neumann on
The semantics of such editors is pretty much limited. i am not sure, up to which degree the bold button of a classic wiki editor is more or less semantic than the bold button of xinha. Try to make a table in wiki-syntax...

Section editing can be implemented with xinha and other editors as well. If you don't want to allow a user to make print smaller or to change the font, well it is certainly easier to get rid of these buttons than to implement it.

We use xinha in our learn@wu system since two years for all rich text editing, our users are very satisfied with it. xinha is integrated with openacs, a site admin can easily switch between the rich text editors (maybe, we should make it a package parameter). The current semantics for rich text fields in oacs is either using a rich text editor (set by the parameter UseHtmlAreaForRichtextP) or use the format drop down box (enhanced text ... HTML). The setup of xowiki at is in some respects non-standard, has UseHtmlAreaForRichtextP deavtivated, but wants allows it for xowiki. So, dave did a small change to xowiki to force it to use the rich text editor, but i did not want to incorporate this change in xowiki (when a site admin wishes no rich text editor, xowiki should not enforce it). On updates of xowiki on, it happens, that the change is lost, and users see the plain HTML text....(like now).

what do you mean by "bad markup"?

xinha has certainly some disadvantages over some other editors. it is relatively slow, it has an overwhelming toolbar. the developers are working on these issues. look at the xinha site, there is an active development going on. On the positive side, xinha has a very nice plugin-model (with this we did the oacs file selector plugin) with many optional plugins. xinha is mostly bug free. I am considering ways on doing semantic markup with xinha (e.g. mark a region and make it a side-bar), or having some symbol for the includelets, when one clicks on it, the parameters can be specified, etc... but don't hold your breath, this won't happen soon.

Posted by Gustaf Neumann on
Here is a small example to show, how to use XoWiki for providing a semantic markup and a simpler toolbar. The screen shot below shows a multiple choice exercise with a problem description, some correct and incorrect answers and an explanation text.

This can be coded in HTML by using classes, like for example in the following:

<p class="problem_text">
Welche Aussagen zu dem ARIS-Architekturmodell sind (ist) richtig?</p>

<li class="correct_choice">ARIS ist ein von August-Wilhelm Scheer entwickeltes Integrationskonzept, das aus einer ganzheitlichen Betrachtung von Geschäftsprozessen abgeleitet wird. Die Komplexität wird durch die Partitionierung (Sichten) und die Beschreibung auf drei unterschiedlichen Abstraktionsniveaus (Schichten)
reduziert. </li>


Xinha comes with a plugin called stylist, which uses as input CSS style declarations (e.g. a style file) and constructs from the CSS selectors a panel on the right side of the editor window which can be used to mark/unmark text entities. The neat part is that stylist is context sensitive, which means that it does only propose markup entries where this is allowed depending on the CSS file.
It the example, one can only mark correct/incorrect answers via list items. Here is a part of the the CSS file:
p.problem_text {
font: 12px 'Lucida Grande', Verdana, Arial, sans-serif;
color: #222222;
li.correct_choice {
font: 12px 'Lucida Grande', Verdana, Arial, sans-serif;
color: #006600;
list-style: none;
background: url(/resources/xowiki/examples/check_richtig.png) center left no-repeat;
padding-left: 30px;
li.incorrect_choice {...}
Note that the toolbar of the Xinha editor in the above screen shot is significantly reduced from the default. The full example is described in and included in the CVS.

For installing it, be aware of the dependencies described in
Furthermore, one has to add class to the allowed attributes for user supplied input (AllowedAttribute in kernel parameters).

This example shows that it is quite easy to provide semantic markup with xinha. traditional wiki style markups don't allow this.