Het maken van een aangepaste HTML-editorintegratie

De JSP bestaat uit drie afzonderlijke onderdelen. Het eerste is een eenvoudig codesnippet voor het extraheren van de naam van het editorveld. Het volgende onderdeel van de JSP definieert de implementatie van het aangepaste ibm.wcm.ui.html.HTMLEditor-object. Met ibm.sample.Editor wordt een constructor gedefinieerd voor het vastleggen van de dijit voor het beheren en implementeren van de benodigde methoden voor de integratie met de authoringinterface. Ten slotte wordt de dijit gedefinieerd en wordt een instance ibm.sample.Editor gemaakt.

<%--
/* Sample HTML Editor */
--%>
 
<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.app.ui.portlet.widget.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>