Add a writing style to daisy-wiki

Overview

The WYSIWYG editor component of Daisy 1.3 provides some constraints to the styles available for formatting text. While the available styles are sufficient for typical content, there are cases where additional styles are desirable. This document describes the steps necessary to add a new style to the WYSIWYG editor, including the necessary steps to ensure it is rendered correctly in both HTML and PDF.

Procedure

To demonstrate how a style is added to the WYSIWYG editor, we are going to create 2 new styles called 'quotation' and 'highlight'.
quotation will be rendered as a variation of the fixme and warning styles in Daisy. The text will be rendered in a box that is indented from the left margin (however it will lack the icon column of the aforementioned styles). This is a paragraph style.
highlight will be rendered as a variation of the bold and italic styles. This is an inline style.

Modify WYSIWYG javascript

The first step is to modify the Daisy WYSIWYG editor.
Edit daisywiki/webapp/daisy/resources/js/daisy-edit.js

quotation

add the following where appropriated :

blocks["quotation"] = "blockquote";

This will add the style quotation to the list of available styles and also means that this style will be enclosed into blockquote tags.

highlight

add the following where appropriated :

cfg.registerButton({
        id       : "highlight",
        tooltip  : "Highlight text",
        image    : daisy.mountPoint + "/resources/skins/" + daisy.skin + "/img/highlighter.gif",
        textMode : true,
        action   : function (editor, id) {
                     editor.surroundHTML("<span class='highlight'>", "</span>");
        }
    });
cfg.toolbar = [ ["daisy-block-switcher", 
                         "separator", "highlight", "bold", "italic", "daisy-remove-format",

this will add a button in the toolbar and when clicked execute the action (which is add the span element).

This will make the button appear, but it will not have an image on it unless you place the indicated "highlighter.gif" in the img directory of the current skin.

Modify HTML Cleaner

The next step is to add the associated element to the allowed-elements section of htmlcleaner.xml

Edit daisywiki/webapp/daisy/resources/conf/htmlcleaner.xml

quotation

Add the following to the 'allowed-elements' section

<!-- quoting --> 
<element name="blockquote"> 
</element>

This will prevent the code cleaner from removing the new style when the document is saved, or someone clicks Cleanup edited HTML)

highlight

To tell Daisy to allow our <span class="highlight"> markup we need to add the following line to the <allowed-span-classes> element::

<class>highlight</class>

Modify Skin

This step will modify the look of the rendered text in the editor and in HTML

Edit daisywiki/webapp/daisy/resources/skins/default/css/docstyle.css (or whatever skin you use)
Add the following:

blockquote { 
  margin-left: 20px;
  font-style: italic;
}

span.highlight {
  background-color: yellow;
}

Modify the XSLFO stylesheet

This will ensure the PDF renders look correct

Edit: daisywiki/webapp/daisy/resources/skins/default/xslt/document-to-xslfo.xsl
Add this set of text to the file at approximately line 140 :

<xsl:template match="blockquote" priority="1"> 
<xsl:call-template name="makeSpecialPara"> 
<xsl:with-param name="name">Quotation</xsl:with-param> 
</xsl:call-template> 
</xsl:template>

<xsl:template match="span[@class='highlight']">
  <fo:inline background-color="#ffff00">
    <xsl:apply-templates/>
  </fo:inline>
</xsl:template>

That's All!

Your new styles are ready to use.

You need to restart the daisy-wiki for this to work and maybe to do ctrl+F5 in your browser or clear the cache.

TODO

• i18n for the words "quotation" and "highlight".

Good luck ! Of course, no warranty of success.
The procedure to add an inline style is based on http://issues.cocoondev.org/secure/attachment/10470/1138.html and has not been tested by me.