Integrating Yahoo! UI Widgets with Backbase: Rich Text Editor

One of the great advantages of Backbase is that it easily integrates with third-party widgets. In this example, we will demonstrate how you can combine Backbase widgets with the Yahoo! UI widget library. In particular, we will implement the Yahoo! Rich Text Editor inside a Backbase-enabled application.

Live Example

Integrating Yahoo! Rich Text Editor with Backbase

The first requirement for having Yahoo! widgets work inside any web application is to include the <script> which loads the Yahoo! UI widget library:

<head>

        <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>

        <!-- Skin CSS file -->

        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css" />

        <!-- Utility Dependencies -->

        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js" />

        <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js" />

        <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->

        <script src="http://yui.yahooapis.com/2.3.1/build/container/container-core-min.js" />

        <script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js" />

        <script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js" />

        <!-- Source file for Rich Text Editor-->

        <script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js" />

</head>

The next step is to define a textarea, which will be transformed into the YUI! Rich Text Editor. We do this by adding a handler to the textarea, which will call the Rich Text Editor constructor upon placement in the DOM tree. We need to set the DOMReady property to true; otherwise, the control will not render.

<b:tabBox xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" height="550px">

     <b:tab label="Edit Code">

          <textarea name="msgpost" id="msgpost" cols="50" rows="10">

               <strong>Your</strong> HTML <em>code</em> goes here.

               <br />

               This text will be pre-loaded in the editor when it is rendered.

          </textarea>

          <e:handler event="DOMNodeInsertedIntoDocument" type="text/javascript">

               bb.html.addClass(document.body, 'yui-skin-sam');

               window.myEditor = new YAHOO.widget.Editor(document.getElementById('msgpost'), {

                    height: '300px',

                    width: '522px',

                    dompath: true, //Turns on the bar at the bottom

                    animate: true //Animates the opening, closing and moving of Editor windows

               });

               window.myEditor.DOMReady = true;

               window.myEditor.render();

          </e:handler>

     </b:tab>

     <b:tab label="View Code">

     </b:tab>

</b:tabBox>

Finally, we add a select handler on the second tab. Upon selection, it will retrieve the current content of the Rich Text Editor and render this as its innerHTML.

<e:handler xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" event="select" type="text/javascript">

     this.viewGate.innerHTML = window.myEditor.getEditorHTML();

</e:handler>

Download

You can download a zipped version of the example provided on this page to try it out for yourself.

Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.

Additional Resources

For more information on integrating other third-party widgets with Backbase, refer to the following documentation:

Client Framework