Création d'une intégration d'éditeur HTML personnalisée

Le JSP est divisé en trois parties distinctes. La première est un simple fragment de code permettant d'extraire le nom de la zone d'éditeur. La deuxième partie définit l'implémentation de l'objet ibm.wcm.ui.html.HTMLEditor personnalisé. L'élément ibm.sample.Editor définit un constructeur permettant de capturer le dijit en vue de gérer et d'implémenter les méthodes nécessaires à l'intégration avec l'interface de création. Enfin, le dijit est défini et une instance de ibm.sample.Editor est créée.

<%--
/* Sample HTML Editor */
--%>
 
<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.HTMLEditorBean" %><portletAPI:init /><%
    HTMLEditorBean editor = (HTMLEditorBean) request.getAttribute("EditorBean");    

    // The name of the editor corresponds to the ID of the text area field that will be rendered within the authoring form
    String docId = editor.getName();   
%>

<script>
   dojo.declare("ibm.sample.Editor", [ibm.wcm.ui.html.HTMLEditor], {

      /** Hold a reference to the text area we enriched. */
      theTextArea: null,

      /** Simple overloaded constructor that will dynamically enrich the target text area with a dojo dijit text area. */
      constructor: function(editorId, textArea) {
         this.inherited(arguments);                
         this.theTextArea = textArea;

         textArea.startup();         

         this.showToolbar(true);
      },

      /** This method is called by the HTML/RTF field dialogs. For example when the user has selected a tag to insert into the field. */
      insertMarkupAtCursor: function(markup){ 
         // Do cross browser text insertion
         if (document.selection && (!this.theTextArea.textbox.selectionStart || this.theTextArea.textbox.selectionStart === null))
         {
            // Handle IE, which defines document.selection
            this.theTextArea.focus();
            var textRange = document.selection.createRange();
            textRange.text = markup;
         }
         else if (this.theTextArea.textbox.selectionStart || this.theTextArea.textbox.selectionStart == '0')
         {
            // Handle Mozilla, Opera, which define document.selectionStart
            // Create the new text for the text field. createRange() isn't supported by these browsers
            var startPos = this.theTextArea.textbox.selectionStart;
            var endPos = this.theTextArea.textbox.selectionEnd;
            var scrollTop = this.theTextArea.textbox.scrollTop;
            this.setMarkup(this.theTextArea.value.substring(0, startPos) + markup + this.theTextArea.value.substring(endPos, this.theTextArea.value.length));
            
            // Restore the cursor and scroll position which were lost by replacing the text field's text
            this.theTextArea.focus();
         }
      },

      /** This method is called when a user triggers the import markup action of the field. */
      setMarkup: function(markup){ 
         this.theTextArea.set("value", markup);
      },

      /** This method is called whenever the authoring interface requires the current value of the field such as when the export markup button is clicked in edit mode. */
      getMarkup: function(){ 
         return this.theTextArea.value;
      },
      
      /** This method will be called when the user submits the form to the server. This gives the integration an opportunity to update the text area field with the value that should be committed on the server. */
      notifySubmit: function() {         
         // As we are enriching the text area being submitted, the value
         // is already up to date and we do not need to do anything
      }
   });

   require(["dijit/form/Textarea", "dojo/domReady!"], function(Textarea){
      var textArea = new Textarea({name: '<%= docId %>', style: "width:100%;max-width:910px;min-height:200px;_height:200px;"}, '<%= docId %>');    
      new ibm.sample.Editor('<%= docId %>', textArea);   
   });

</script>