-------------------------------------------------------------------------- ---------------- How to use the Rich Text Plugin in AXEL ---------------- -------------------------------------------------------------------------- COMPATIBILITY: Tested on: - Firefox (3.5) - Opera (10) - Chromium - Safari - Internet Explorer (7, 8) Summary =======
Rich text plugin syntax in templates ====================================
Declaration ~~~~~~~~~~~ Base usage is <xt:use types="richtext" label="mylabel">Some default content</xt:use>. "Some default content" could either be plain text or HTML styled content. Allowed tags are : <p> <br/> <span> However, the current implementation supports vintage-html styling tags (<b>, <u> and <i>). They are converted at serialization time in the target language. Please note that the <xt:use> element is converted by the template's transformation process into a <div>. This means that such a declaration : <p><xt:use types="richtext" label="mylabel">Some default content</xt:use></p> would lead to something like <p><div>... which is illegal and would make narrow-minded browsers (IE if you haven't guessed) fail.
Parameters ~~~~~~~~~~ You can use param="key1=value1;key2=value2..." to define some lens parameters. Supported parameters: * display="block|single|inline" (default: block) The layout parameter controls how the editor's handle is rendered, and how the editor should behave on carriage returns. layout="block" : The editor appears as a block (a div) and allows multiple paragraph as editable data layout="single" : the editor appears as a block but does not accepts paragraphs. Carriage return yields line breaks instead layout="inline" : the editor is inlined as a span in a paragraph. A return stroke ends the current edition process (still to be implemented) * lens parameters
Styling ~~~~~~~ The editor's handle bears the .xtt-editable class name. It is recommended to apply specific CSS rules in order to distinct the editable areas from the non-editable ones. The lens bears the folowing classes in its class attribute : .xtt-lens, .xtt-lensstyle and .xtt.editing. You should avoid any modification of the xtt-lens class, as it implements rules for the correct placement of the lens. However, the lens is stylable through the .xtt-lensstyle and .xtt-editing classes. The .xtt-lensstyle customize the appearence of the lenses (the colors, for instance). The .xtt-editing class is used to superseed the rules of xtt-repeat-unset in case of optional parts of the template. This class should reproduce the "normal" text appearence rules. For instance, if all your text is blue, this rule must be rewritten to match this. In future the editor's handle will support a custom class name given through the "class" parameter of the <xt:use> element. In meantime, you could encompass the <xt:use> element within a div bearing the styling you want.
Rich text plugin serialization's results ======================================== The rich text editor aims at producing HTML styled text. however, no two browsers could agree on *how* the text is styled. Thus, the choice was made to follow a coding close to the firefox one's, as Firefox tends to follow specifications quite well. Styling is therefore done using the style attribute of (possibly imbricated) <span> elements. In order to avoid mixed content in the serialization's results, mixed content is put into a span element without any styling.
Packaging and deployment ========================
Source files ~~~~~~~~~~~~ The rich text plugin editor is defined in src/plugins/richtext.js; It depends on the lens device declared in scr/plugins/lensdevice.js. Thus, the lens device must be included in any packaging form *before* richtext.js. Thus, if you include these 2 javascript files individually into your application, you must do it in the following order: <script type="text/javascript" src="src/plugins/lensdevice.js"></script> <script type="text/javascript" src="src/plugins/richtext.js"></script>
Style sheets ~~~~~~~~~~~~ None at the moment