DataTables logo
≡

How do you get CKEditor 5 to work with Datatables?

How do you get CKEditor 5 to work with Datatables?

rmeetinrmeetin Posts: 111Questions: 29Answers: 2
in Plug-ins

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • rmeetinrmeetin Posts: 111Questions: 29Answers: 2

    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

  • kthorngrenkthorngren Posts: 22,492Questions: 26Answers: 5,169
    edited June 2020

    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

  • rmeetinrmeetin Posts: 111Questions: 29Answers: 2

    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.

  • allanallan Posts: 65,813Questions: 1Answers: 10,949 Site admin

    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

  • koniahinkoniahin Posts: 189Questions: 41Answers: 7

    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',
  • allanallan Posts: 65,813Questions: 1Answers: 10,949 Site admin
    edited June 2020 Answer ✓

    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

  • rmeetinrmeetin Posts: 111Questions: 29Answers: 2

    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.

This discussion has been closed.