Cannot get CKEditor plugin working.

classic12 · November 2017

I have stripped the app down to the following using some json data.

Everything works until I add

"type": "ckeditor"

I get error

ReferenceError: Can't find variable: CKEDITOR.
line 46 column 40

So I add

var CKEDITOR;

and get error

TypeError: undefined is not an object (evaluating 'CKEDITOR.replace').
line 46 column 40

//version 6 adding CKEditor
//https://editor.datatables.net/plug-ins/field-type/editor.ckeditor
var editor;
var CKEDITOR;


(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';
 
 
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
 
var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;
 
 
_fieldTypes.ckeditor = {
    create: function ( conf ) {
        var that = this;
        var id = DataTable.Editor.safeId( conf.id );
 
        conf._input = $('<div><textarea id="'+id+'"></textarea></div>');
 
        // CKEditor needs to be initialised on each open call
        this.on( 'open.ckEditInit-'+id, function () {
            if ( $('#'+id).length ) {
                conf._editor = CKEDITOR.replace( id, conf.opts );
                conf._editor.on( 'instanceReady', function () {
                    // If shown in a bubble, there is a good chance we'll need to
                    // move it once CKEditor is shown, since it is large!
                    if ( conf._input.parents('div.DTE_Bubble').length ) {
                        that.bubblePosition();
                    }
                } );
 
                if ( conf._initSetVal ) {
                    conf._editor.setData( conf._initSetVal );
                    conf._initSetVal = null;
                }
                else {
                    conf._editor.setData( '' );
                }
            }
        } );
 
        // And destroyed on each close, so it can be re-initialised on reopen
        this.on( 'preClose.ckEditInit-'+id, function () {
            if ( conf._editor ) {
                conf._editor.destroy();
                conf._editor = null;
            }
        } );
 
        return conf._input;
    },
 
    get: function ( conf ) {
        if ( ! conf._editor ) {
            return conf._initSetVal;
        }
 
        return conf._editor.getData();
    },
 
    set: function ( conf, val ) {
        var id = DataTable.Editor.safeId( conf.id );
 
        // If not ready, then store the value to use when the onOpen event fires
        if ( ! conf._editor || ! $('#'+id).length ) {
            conf._initSetVal = val;
            return;
        }
        conf._editor.setData( val );
    },
 
    enable: function ( conf ) {}, // not supported in CKEditor
 
    disable: function ( conf ) {}, // not supported in CKEditor
 
    destroy: function ( conf ) {
        var id = DataTable.Editor.safeId( conf.id );
 
        this.off( 'open.ckEditInit-'+id );
        this.off( 'preClose.ckEditInit-'+id );
    }
};
 
 
}));

btnTestPHP.onclick=function(){
var data1 = [{"Name":"Tom","Position":"Upright","Salary":"5555","link":"http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"},{"Name":"Andy","Position":"Upright","Salary":"5555","link":"http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"},{"Name":"John","Position":"Upright","Salary":"5555","link":"http://www.toolfolks.com"},{"Name":"Paul","Position":"Upright","Salary":"5555","link":"http://www.toolfolks.com"}];
editor = new $.fn.dataTable.Editor( {
 "table": "#DataTable1",
 idSrc: 'Name',
 "fields": [ {
     "label": "Position",
     "name": "Position",
     "type": "ckeditor"
   }
   // additional fields...
 ]
} );
  $("#DataTable1").dataTable().fnDestroy(); 
  $('#DataTable1').empty();
  $('#DataTable1').dataTable( {
  data: data1,
  dom: "Bfrtip",
select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
            "columnDefs": [
            {
            "targets": 2,
            "data": "Salary",
            "render": function (data, type, full, meta ) 
                          {
           return '<input type="text" name="'+data+'" value = '+data+'>'
                          }
      
            },
            { 
            "targets": 3,
            "data": "link",
            "title" : "Link",
            "render": function ( data, type, row, meta ) 
                        {
            return '<img src="'+data+'" style="height:50px;width:50px;"/>'
                        }
            },
            {
            "targets": 1,
            "data": "Position"
            },
            { 
            "targets": 0,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="text" name="'+data+'" value = '+data+'>' 
                          }
            },
            { 
            "targets": 4,
            "data": "Name",
            "render": function ( data, type, row, meta ) 
                        {
            return '<input type="button"  value = click Me>' 
                          }
            }
  ]
} );


//'<img src="'+table.file( 'image', file_id ).web_path+'"/>' :
// 'rend
}

So near so bl&^%y far.

Cheers

Steve Warby

kthorngren · November 2017

Are you loading ckeditor.js from the CKEditor site?

Kevin

classic12 · November 2017

I have downloaded the js from this site and added it to my app.

bindrid · November 2017

what order are you loading them in?

classic12 · November 2017

I only saw one dkeditor file and added to my list ( I am using NSBASIC where you simply drag the files into the IDE)

www.toolfolks.com/surplusAdmin6CKEditor/Screen Shot 2017-11-11 at 18.23.30.png

Cheers

Steve Warbyt

bindrid · November 2017

You did not actually answer the question. The order files are included in a page matters.

classic12 · November 2017

Hi bindrid,

not sure what you are asking.

the image www.toolfolks.com/surplusAdmin6CKEditor/Screen Shot 2017-11-11 at 18.23.30.png

shows what order I have added the various css & js files into the project.

so first is
buttons.dataTables.min.js
last is
editor.ckeditor.js

the ide swaps the '.' for '_' ias a descriptor.

I am on the right track here of what you are after.

Cheers

Steve Warby

kthorngren · November 2017

I get error

ReferenceError: Can't find variable: CKEDITOR.
line 46 column 40

So I add

var CKEDITOR;

and get error

TypeError: undefined is not an object (evaluating 'CKEDITOR.replace').
line 46 column 40

You may want to remove var CKEDITOR;. This is referencing CKEDITOR in ckeditor.js you downlaoded from the CKEditor site.

Kevin

classic12 · November 2017

I have removed that line.

and still get the error

kthorngren · November 2017

Without seeing it its hard to say. Is the plugin code running before ckeditor.js is loaded? It should run after ckeditor.js is loaded.

Kevin

classic12 · November 2017

Order of js & css.

buttons.dataTables.min.css
buttons.html5.min.js
buttons.print.min.js
dataTables.buttons.min.js
dataTables.editor.js
dataTables.min.css
dataTables.responsive.js
editor.dataTables.min.css
jquery.jgrowl.min.css
jquery.jgrowl.min.js
responsive.dataTables.css
buttons.dataTables.css
select.dataTables.min.css
dataTables.select.min.js
editor.ckeditor.js

Any prefered order here?

Cheers

Steve Warby

classic12 · November 2017

I have found the issue.

I started again with the Tinymce plugin and it states I need the https://cdn.tinymce.com/4/tinymce.min.js

So I presume I need a file from CKEditor. But it doesn't state that in the docs.

Don't forget everything is new and overwhelming for us newbies....

Any way now all added and I am now getting this error now

ckeditor.js
TypeError: undefined is not an object (evaluating 'c[a].dir=c.rtl[a]?"rtl":"ltr"').
line 248 column 50

I found this question

https://stackoverflow.com/questions/35255708/ckeditor-not-working-on-mac-chrome-and-mac-safari

And it states setting the language with config.defaultLanguage = 'en';

I checked the ckeditor.js and it has defaultLanguage:"en" already in it.

Getting closer.....

Cheers

Steve Warby

classic12 · November 2017

I carried on with TinyMCE and I get the editor to popup with an enlarged area but nothing to edit.
The 2 normal fields I can edit ok.

http://toolfolks.com/surplusAdmin6TinyMCS/

Cheers

Steve Warby.

classic12 · November 2017

No difference if I swap the order of the 2 js files in either case.

kthorngren · November 2017

So I presume I need a file from CKEditor. But it doesn't state that in the docs.

At the top of the ckeditor plugin docs it states this with a link:

WYSIWYG editor

Requires: CKEditor
Use the CKEditor WYSIWYG input control in Editor to allow easy creation of complex HTML content in Editor.

Which is what I was asking in this question:

Are you loading ckeditor.js from the CKEditor site?

You will need it here:

.....
dataTables.select.min.js
ckeditor.js   <<<< this is downloaded or use CD from CKEditor site
editor.ckeditor.js

I would probably go with version 4 but you can try 5:
https://ckeditor.com/ckeditor-4/download/

Don't forget everything is new and overwhelming for us newbies....

We've all been there. There is much to learn. Much of this is still new to me but I've learned a lot participating in this site

Kevin

classic12 · November 2017

I have the download
and in the order above.

error:

ckeditor.js
TypeError: undefined is not an object (evaluating 'c[a].dir=c.rtl[a]?"rtl":"ltr"').
line 248 column 50

http://toolfolks.com/surplusAdmin6CKEditor/

I'll try version 5

classic12 · November 2017

Version 5 gives error:

editor.ckeditor.js
ReferenceError: Can't find variable: CKEDITOR.
line 67 column 40

classic12 · November 2017

I have just tried to implement the CKEditor into NSBAsic ( my IDE) as per the instructions and I'm getting the same error.

ckeditor.js
TypeError: undefined is not an object (evaluating 'c[a].dir=c.rtl[a]?"rtl":"ltr"').
line 248 column 50

So maybe something to do with NSBAsic ???

classic12 · November 2017

On a server I get a different error

ckeditor.js Uncaught TypeError: Cannot set property 'dir' of undefined. line 248 column 54

Any ideas on this?

Live sample http://toolfolks.com/Project1/

line 258 50 is {c[a].dir=c.rtl[a]?"rtl":"ltr";b(a,c[a])};this[a]?d():CKEDIT‌OR.scriptLoader.load‌(CKEDITOR.getUrl("la‌ng/"+a+".js"),d,this‌)},detect:function(a‌,d){var b=this.languages;d=d||navigator.userLanguage||navigator.lang‌uage||a;var c=d.toLowerCase().match(/([a-z]+)(?:-([a-z]+))?/),e=c[1],c=c‌[2];b[e+"-"+c]?e=e+"‌-"+c:b[e]||(e=null);‌CKEDITOR.lang.detect‌=e?function(){return e}

kthorngren · November 2017

Not familiar with NSBasic but have you seen this?
https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_basepath

Have you tried using the CDN path instead of locally?

Kevin

classic12 · November 2017

Thanks Kevin,

Works

So theres something amiss somewhere.

allan · November 2017

Its possible the plug-in doesn't work with the new CKEditor v5, I haven't checked that yet. Perhaps you could try using v4 for the moment while I do look into that.

Allan

classic12 · November 2017

I am presuming it is a NSBasic issue as I can get the CKEditor & the TinyMCE editor working by adding

<script src="//cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xxxx"></script>

From searching around I think its to do with paths...

allan · November 2017

Other than your own threads, I'm afraid I've never heard of NSBasic before. It might need to get in touch with them directly.

Allan

classic12 · November 2017

I have posted there.

I'll keep you informed.

Cannot get CKEditor plugin working.

Cannot get CKEditor plugin working.

Answers

Howdy, Stranger!

Categories

DataTables

Cannot get CKEditor plugin working.

Cannot get CKEditor plugin working.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables