How do you get CKEditor 5 to work with Datatables?

rmeetin

Datatables 1.10

Description of problem:
Thanks to the plugin for ckeditor 4 we got that working. Now we're moving up to CK5. I found the plugin:

https://editor.datatables.net/plug-ins/field-type/editor.ckeditor5#Javascript

Downloaded it and uploaded to my server (renamed it to reduce confusion but no other change. I added it as an external javascript file along with the ck5 file:

    <script src='ckeditor5/datatables+ckeditor5.js'></script>
    <script type='text/javascript' src='ckeditor5/build/ckeditor.js' comment='ckeditor 5'></script>

In the html I change the textarea from ckeditor (for ckeditor4) to ckeditorClassic:

        {
          label: 'Answer/Info:',
          type: 'ckeditorClassic',
          id: 'textarea',
          name: 'faq.answer'
        }

However when the page loads it loads a blank table.

Can you give us any pointers on why it's failing?

colin

Are you seeing any console errors in the browser? And are you able to link to your page so we can take a look?

Colin

rmeetin

My developer said the error he sees is:

``ckType undefined

I set up a demo on my devel server:

https://www.dottedi.xyz/demo/bin/faq2.php

If you wish to compare with the ckeditor 4 version see:

https://www.dottedi.xyz/demo/bin/faq.php

kthorngren

Looks like the initialization is failing at this line in the plugin code:

Its looking for ClassicEditor in window but its not there. Which is causing ckType to be undefined causing the jquery-3.3.1.js:3827 Uncaught TypeError: Cannot read property 'create' of undefined in this line:
ckType.create( conf._input[0], conf.opts )

I suspect the problem is you are loading the plugin before CKEditor. Try reversing these tow lines:

  <script src='ckeditor5/datatables+ckeditor5.js'></script> <!-- the ckeditor 5 plugin I think -->
  <script type='text/javascript' src='ckeditor5/build/ckeditor.js' comment='ckeditor 5'></script>

Kevin

rmeetin

Reversing the sequence gets the table to load however the Answer field which should load the editor only loads as simple input field.

I checked for errors and the undefined error is gone but I see these two:

    This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. faq2.php

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/

I cleared cache.

allan

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. faq2.php

This one can safely be ignored - it is a CSS warning. DataTables Core still supports IE6 (at least for now), so there are a few hacks in the stylesheet, such as that.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/

Are you using $.ajax with async: false somewhere on your page? DataTables doesn't do that by default, so it must be coming from somewhere else.

Allan

koniahin

Aside from the ajax line in the html file , not that I know of.

<

script type="text/javascript" language="javascript" class="init">
var editor;

      $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
          ajax: 'controllers/faq2.php',
          table: '#datatable',
          fields: [
            {
              label: 'Order:',
              name: 'faq.rowOrder',

allan

Thanks! And sorry I missed the links to your page above. The console message says:

Asynchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/
 ckeditor.js:5

So its coming from CKEditor. You'd need to check with their support team to see what can be done about it.

Allan

rmeetin

I passed this thread along to my contractor - I'm not sure what he did but he was able to get CKE5 working within DataTables without consulting CKE support/forum.

CK5 has a lot of advantages in general over CK4 however some learning curve and some gotchas we haven't solved yet. For instance outside of DataTables there is a sticky (fixed) toolbar function - great for long pages. Within DT it doesn't work off the shelf.