{"id":1485,"date":"2014-06-06T00:06:59","date_gmt":"2014-06-05T22:06:59","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1485"},"modified":"2014-06-06T00:16:11","modified_gmt":"2014-06-05T22:16:11","slug":"xpages-angular-js-accessing-rich-text-1","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1485","title":{"rendered":"XPages & Angular.js: Accessing Rich Text (1)"},"content":{"rendered":"

If you want to access Rich Text with Angular.js, an easy way to get the content is to use a XPage as handler and grab the content of a XspInputRichText<\/em> component. The component does all required steps automatically (f.e. it detaches all embedded images to disc and cleans up the temporary files later) and returns the complete HTML of the Rich Text item.<\/p>\n

For the conversion I have created a small java helper class:<\/p>\n

package ch.hasselba.xpages.util;\r\n\r\nimport javax.faces.context.FacesContext;\r\nimport javax.faces.el.ValueBinding;\r\n\r\nimport com.ibm.xsp.component.xp.XspInputRichText;\r\nimport com.ibm.xsp.http.IMimeMultipart;\r\n\r\n\/**\r\n\u00a0* Utility class for accessing RichText items\r\n\u00a0* \r\n\u00a0* @author Sven Hasselbach\r\n\u00a0* @version 1.3\r\n\u00a0*\/\r\npublic class RTItemUtil {\r\n\r\n\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0 * \r\n\u00a0\u00a0 \u00a0 * @param dsName\r\n\u00a0\u00a0 \u00a0 *\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 the name of the datasource to use\r\n\u00a0\u00a0 \u00a0 * @param rtFieldName\r\n\u00a0\u00a0 \u00a0 *\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 the name of the richtext item\r\n\u00a0\u00a0 \u00a0 * @return String with the HTML\r\n\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0public static String getHTML(final String dsName, final String rtFieldName) {\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ get current FacesContext\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0FacesContext fc = FacesContext.getCurrentInstance();\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ create a value binding for the datasource\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0String expr = \"#{\" + dsName + \".\" + rtFieldName + \"}\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0ValueBinding vb = fc.getApplication().createValueBinding(expr);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ create a rich text components\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0XspInputRichText uiCmp = new XspInputRichText();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0uiCmp.setValueBinding(\"value\", vb);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0Object value = uiCmp.getValue();\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ get the value of the component as HTML\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0String strHtml = null;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (value != null) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (value instanceof IMimeMultipart) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0IMimeMultipart mime = (IMimeMultipart) value;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0strHtml = mime.getHTML();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0strHtml = value.toString();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return strHtml;\r\n\u00a0\u00a0 \u00a0}<\/code><\/pre>\n
What does the method getHTML<\/em> do? First, the datasource is accessed by creating a new value binding. Then a new\u00a0XspInputRichText<\/em> component is created on the fly which does the magic: All attachments are detachted into the temporary xsppers<\/em> folder, and linked into the generated HTML code of the Rich Text item.<\/p>\n
This is the XPage with the name „getrtdata<\/em>“ which is our handle:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\" rendered=\"false\">\r\n\r\n\u00a0\u00a0 \u00a0<xp:this.data>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:dominoDocument var=\"documentRTItem\" \/>\r\n\u00a0\u00a0 \u00a0<\/xp:this.data>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<xp:this.afterRenderResponse>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[#{javascript:\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0importPackage( ch.hasselba.xpages.util );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var res = facesContext.getExternalContext().getResponse();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0res.setContentType(\"text\/html\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0res.setCharacterEncoding( \"UTF-8\" );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var writer = res.getWriter();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var rtUtil = new ch.hasselba.xpages.util.RTItemUtil();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var strHtml = rtUtil.getHTML( \"documentRTItem\", \"Body\" );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 writer.write( strHtml );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 writer.flush();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 facesContext.responseComplete();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }]]>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:this.afterRenderResponse>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n<\/xp:view><\/code><\/pre>\n
The datasource on the this XPage is accessed by URL parameters from our Angular.js application. The method getHTML<\/em> from the utility class is called with the name of the datasource and the name of the rich text item we want to access.<\/p>\n
Now let’s have a look at our Angular.js application. To make it a litlle bit more complicated, the data from the Rich Text item will be loaded into a CKEditor:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n\u00a0\u00a0 \u00a0<head>\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0 <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<script type='text\/javascript' src=\"jquery-1.8.3.js\"><\/script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<script type='text\/javascript' src=\"http:\/\/ckeditor.com\/apps\/ckeditor\/4.4.1\/ckeditor.js\"><\/script> \u00a0\r\n\u00a0\u00a0 \u00a0<\/head>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<body data-ng-app=\"myApp\" data-ng-controller=\"CKEditiorCtrl\">\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <textarea data-ck-editor data-ng-model=\"ckEditor.value\"><\/textarea>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <br>\r\n\u00a0\u00a0 \u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <button ng-click=\"loadData( '49573FE44017DA9FC1257CEC0035CBCC' )\">load data<\/button>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<script type='text\/javascript' src=\"angular.js\"><\/script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<script type='text\/javascript' src=\"app.js\"><\/script>\r\n\u00a0\u00a0 \u00a0<\/body>\r\n\u00a0\u00a0 \u00a0\r\n<\/html><\/code><\/pre>\n
The resources of the previous article<\/a> are used in this example. The lastest version of CKEditor is used, and the whole application logic is contained in the file app.js<\/em>.<\/p>\n
When opening the application in the browser, a fresh and empty CKEditor instance will be instantiated:<\/p>\n
\"\"<\/p>\n
When clicking the button „load data<\/em>„, the XPage is loaded in the background. In the Firebug console the response of the request contains the HTML markup, including the pathes to the detached attachments:<\/p>\n
\"\"Then the CKEditor is updated with the HTML code, and displays the content of the Rich Text item:<\/p>\n
\"\"<\/p>\n
How does the app.js<\/em> looks like?<\/p>\n
var myApp = angular.module('myApp',[]);\r\n\r\n\/**\r\n\u00a0* the data service to load the RTItem data\r\n\u00a0*\/\r\nmyApp.service('dataService', function($http) {\r\n\u00a0\u00a0 \u00a0delete $http.defaults.headers.common['X-Requested-With'];\r\n\u00a0\u00a0 \u00a0this.getData = function( id ) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return $http({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0method: 'GET',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0url: 'getrtdata.xsp',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 params: {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0documentId: id,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0action: 'openDocument'}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0}\r\n});\r\n\r\n\/**\r\n\u00a0* the directive\r\n\u00a0*\/\r\nmyApp.directive('ckEditor', [function () {\r\n\u00a0\u00a0\u00a0 return {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 require: '?ngModel',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 link: function ($scope, elm, attr, ngModel) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var ck = CKEDITOR.replace(elm[0]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ngModel.$render = function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ck.setData(ngModel.$modelValue);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 };\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 };\r\n}])\r\n\r\n\/**\r\n * the controller\r\n *\/\r\nmyApp.controller('CKEditiorCtrl', function($scope, dataService) {\r\n\u00a0\u00a0 \u00a0$scope.dataservice = dataService;\r\n\u00a0\u00a0 \u00a0$scope.ckEditor = { value: null };\r\n\u00a0\u00a0 \u00a0$scope.loadData = function( unid ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$scope.dataservice.getData( unid ).then(\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function(dataResponse) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$scope.ckEditor.value = dataResponse.data;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n});<\/pre>\n
The service dataService<\/em> is the interface to the XPages backend: The method getData<\/em> makes the HTTP request with the $http<\/em> service of Angular.js. The two parameters are the document UNID and the action to perform, and are used to control the datasource of the XPage.<\/p>\n
This service is bound to the controller, and is called by the loadData<\/em> method as soon as the button is clicked. It sets the value of the ckEditor<\/em> binding with the resulting data from the request. (Btw. if you have a look at the HTML of the button you will see that the used document UNID is hardcoded in this example).<\/p>\n
But what is the directive for?<\/p>\n
 <textarea data-ck-editor data-ng-model=\"ckEditor.value\"><\/textarea><\/code><\/pre>\n
The directive is a „link“ between Angular.js and the code of the CKEditor: The data-ck-editor<\/em> attribute of the textarea is the key to our directive and is searched by Angular.js when the application is initialized. When a matching directive is found, the method link<\/em> is called, with the parent DOM element as parameter. This DOM element is now replaced by a CKEditor instance. The data-ng-model<\/em> attribute binds the data of the CKEditor to the defined value of our controller, the $scope.ckEditor.value<\/em>. This allows to update the content of the CKEditor instance.<\/p>\n
That’s it!<\/p>\n","protected":false},"excerpt":{"rendered":"
If you want to access Rich Text with Angular.js, an easy way to get the content is to use a XPage as handler and grab the content of a XspInputRichText component. The component does all required steps automatically (f.e. it … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,50],"tags":[99,7,77,31,4,5,12,3],"class_list":["post-1485","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-angular-js","tag-angular-js","tag-domino","tag-html","tag-java","tag-js","tag-ssjs","tag-web","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1485"}],"version-history":[{"count":12,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1485\/revisions"}],"predecessor-version":[{"id":1524,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1485\/revisions\/1524"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}