Friday 23 December 2016

How to integrate CKEditor into an Oracle JET page

First of all you need to setup up your main.js file, it should look like below.
It is assumed, that ckeditor is available in js/libs/ckeditor folder.

requirejs.config, paths:

'ckeditor': 'libs/ckeditor/ckeditor',
'ckeditor-jquery': 'libs/ckeditor/adapters/jquery'

shim:
                 'ckeditor-jquery': {
                                    deps: ['jquery', 'ckeditor']
                                }
in the require block add 'ckeditor-jquery';

in your html file add, if you add the same construct into a div element, it just does not show anything.
within textarea tag add

id="id1" data-bind="jqueryUI:{component: 'ckeditor', value: value, skin: 'moono-lisa', toolbar: 'basic', uiColor : '#9AB8F3'}"

To change the toolbar add the following within the curly brackets

To change the toolbars add the fo

toolbarGroups:  [
                                {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
                               
                            ]

And you should see






Friday 16 December 2016

How to format JSON date in Oracle JET

Let's say that you have a JSON date in the following format
"createdDate" : "2016-03-01T13:00:00-08:00"

and you need to show on your web page created with Oracle JET.
To format the above date to a human readable format use the following javascript function:

self.getFormattedDate = function (requestedDate) {
                 
                    var dateOptions = {formatStyle: 'date', dateFormat: 'long'};  
                    var dateConverter = oj.Validation.converterFactory("datetime").createConverter(dateOptions);
                    var convertedDate = oj.IntlConverterUtils.dateToLocalIso(new Date(requestedDate));

                    return dateConverter.format(convertedDate);
                };

On UI side call it as follows.

data-bind="text: getFormattedDate(createdDate)"