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






5 comments:

  1. I did the same steps but the ckeditor is not showing up on my page.

    View page:


    < textarea class="ckeditor1" name = "editor1" id="ckeditorid1" data-bind="jqueryUI:{component: 'ckeditor', value: value, skin: 'moono-lisa', toolbar: 'basic', uiColor : '#9AB8F3'}">
    Configure the Readme Template
    < /textarea>

    in the view model, i have tried adding the following code too;
    define(
    [ 'ojs/ojcore', 'knockout', 'jquery', 'scripts/util','ckeditor-jquery', 'ojs/ojchart',
    'ojs/ojselectcombobox', 'ojs/ojradioset', 'ojs/ojrouter',
    'ojs/ojinputtext', 'ojs/ojinputnumber', 'ojs/ojtable',
    'ojs/ojarraytabledatasource', 'ojs/ojknockout-validation' ],
    function(oj, ko, $, util) {
    ...

    ReplyDelete
  2. Fromm where do we get the data bind component ckeditor under juqeryUI?

    ReplyDelete
  3. nevermind - i figured out the issue in my code - it is working now

    ReplyDelete
  4. can u please provide a sample application

    ReplyDelete
  5. I got ckeditor folder inside libs and js file
    also included ckeditor in the viewModel define

    still getting

    Component ckeditor is not found

    ReplyDelete