Using the Quill editor in XPages

If you're after a simple WYSIWYG HTML editor to add to your XPages apps, take a look at Quill. Quill is a flexible and powerful open-source HTML editor built for compatibility and extensibility that can easily be integrated in XPages applications as a replacement to the built-in RichText editor, if all you're after is the HTML output.

Add the resources

To add the Quill editor, you can either use it directly from a CDN or add the JS file and stylesheet to the nsf database (e.g WebContent) and serve from there. In this example, we'll use the cdn and include it in our XPages resources.

<xp:this.resources>

    <!-- temporary redefine define.amd object  (Dojo AMD loader) -->
    <xp:script clientSide="true" type="text/javascript">
        <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
    </xp:script>

    <!-- Include the Quill library -->
    <xp:script src="https://cdn.quilljs.com/1.3.6/quill.js" clientSide="true"></xp:script>

    <!-- Include stylesheet -->
    <xp:styleSheet href="https://cdn.quilljs.com/1.3.6/quill.snow.css"></xp:styleSheet>

    <!-- restore define.amd object (Dojo AMD loader) -->
    <xp:script clientSide="true">
        <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
    </xp:script>

</xp:this.resources>

Note that here we're temporarily disabling the Dojo AMD loader so it doesn't interfere with loading the Quill library (see snippet on OpenNTF).

Show the editor

Create a new div on the page to show the editor

<!-- Create the editor container -->
<div id="editor">
    <p>Hello World!</p>     
</div>

Add a script block to invoke the Quill editor with the 'Snow' theme

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value>
        <![CDATA[
            var quill = new Quill('#editor', {
                 theme: 'snow'
              });
          ]]>
      </xp:this.value>
</xp:scriptBlock>

This should invoke the Quill editor along with some default text and toolbar when previewed.

Getting the editor data

To get the HTML (and plain text) from the editor, add a button on the XPage with the following code on the Click event of the button that runs Client-side Javascript. This gets the HTML and plain text in the Quill editor and sets the values of the hidden fields, which are bound to viewScope variables, input and html.

// get editor value
var input = quill.getText();
var html = quill.root.innerHTML;

// set hidden fields bound to viewScope vars
// e.g inputHidden1 is bound to viewScope.input, inputHidden2 is bound to viewScope.html
XSP.getElementById("#{id:inputHidden1}").value = input;
XSP.getElementById("#{id:inputHidden2}").value = html;

Add the two hidden text input fields on the page, e.g.

<xp:inputHidden id="inputHidden1"
    value="#{viewScope.input}">
</xp:inputHidden>

<xp:inputHidden id="inputHidden2"
    value="#{viewScope.html}">
</xp:inputHidden>

The two hidden fields will have the values of the html and plain text so we have that available server-side to create new documents etc using SSJS.

Conclusion

Quill is a really nice editor when all you need is clean HTML in your XPage application, for example I use it in a forum-style application for topics, replies and comments. Also there's lots of plug-ins that extend the functionality of the Quill editor, like adding images etc which we'll dive into part 2 of these series.

Chris Bekas