Replies

• womplify Posts: 30Questions: 3Answers: 0

  April 2015 edited April 2015

  Post removed, after discovering that there are existing plugins that don't work as well
• womplify Posts: 30Questions: 3Answers: 0

  April 2015 edited April 2015

  And THEN.. I saw that there is ... https://editor.datatables.net/plug-ins/field-type/editor.ckeditor

  BUT, it has the SAME problem I have.
  Maybe something broke in DataTables' Editor?

  Here is the problem...

      "create": function ( conf ) {
          var that = this;
          var id = Editor.safeId( conf.id );
          conf._input = $('<div><textarea id="'+id+'"></textarea></div>');
  
          // CKEditor needs to be initialised on each open call
          this.on( 'onOpen.ckEditInit-'+id, function () {
  //#### DEBUGGUNG ####
  console.log("Exists " +id+ "?.. " + $('#'+id).length);
  //###################
              if ( $('#'+id).length ) {
                  conf._editor = CKEDITOR.replace( id );
  

  prints out Exists DTE_Field_Body?.. 0

  So it is the same problem.
  The actual HTML element that SHOULD be created by returning: conf._input = $('<div><textarea id="'+id+'"></textarea></div>'); does NOT get created, until it is too late, apparently. The plugin doesn't work.
• womplify Posts: 30Questions: 3Answers: 0

  April 2015

  the exact same problem with https://editor.datatables.net/plug-ins/field-type/editor.tinymce
  It also doesn't work, and for the same reason.
• allan Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  Hi,

  Are you able to give me a link to your page please? The TinyMCE and CKEditor plug-ins should work for Editor (I've just tried them and they do appear to work okay).

  The biggest problem with the WYSIWYG plug-ins is that because of how they work, they need to be initialised when the form is displayed, and then again every time it is displayed after that. Its ugly, but that appears to be how these two, at least, work.

  Allan
• womplify Posts: 30Questions: 3Answers: 0

  April 2015 edited April 2015

  Hi Allan.
  While my page is on a dev server which is not accessible outside, here is a codepen URL of a test scenario.

  http://codepen.io/anon/pen/dPBrjM

  I'm getting to the conclusion that it has to do with the use of the bootstrap extension of dataTables.
  I'm saying this because, when removing the editor.bootstrap js (<script type="text/javascript" language="javascript" src="https://www.dropbox.com/s/p2hxerv4dfvjm9y/dataTables.editor.bootstrap.js?dl=1"></script>) file, it works
• womplify Posts: 30Questions: 3Answers: 0

  April 2015

  :) :)
  I have narrowed it even further!

  The problem is because the fade effect in here...

      "init": function ( dte ) {
          self._dom.content = $(
              '<div class="modal fade">'+
                  '<div class="modal-dialog">'+
                      '<div class="modal-content"/>'+
                  '</div>'+
              '</div>'
          );
  

  When changing the '<div class="modal fade">' to '<div class="modal">' the problem "goes away". However, it would be most advisable not to change that, because this is indeed the default bootstrap behavior.
  I am assuming the best way to resolve that while keeping the bootstrap flow, is to call the onOpen only after bootstrap has initialized the dialog's content. I have no idea how though. I am relatively a novice here.
  Allan, can you help with that? :(
• allan Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  Hi,

  Just been digging into this a bit more - thanks for pointing out that you are using Bootstrap, that clears things up!

  The problem was that the element was not attached to the DOM when the open event was being triggered. The result is that the event listener the CKEditor plug-in adds to initialise itself can't find the element! I had expected Bootstrap to add the element synchronously, but that doesn't appear to be the case.

  The fix, fortunately, is actually very simple. In the editor.bootstrap.js file that you found the init function, above, in also contains an open function.

  This block of code in the open function:

          $(self._dom.content)
              .one('shown', function () {
                  if ( callback ) {
                      callback();
                  }
              })
              .one('hidden', function () {
                  self._shown = false;
              })
              .modal( {
                  "backdrop": "static"
              }
          );
  

  should be replaced with:

          $(self._dom.content)
              .one('shown', function () {
                  if ( callback ) {
                      callback();
                  }
              })
              .one('hidden', function () {
                  self._shown = false;
              })
              .appendTo( 'body' )
              .modal( {
                  "backdrop": "static"
              }
          );
  

  And that will allow the WYSIWYG Editor to initialise correctly!

  Thanks for letting me know about this and flagging it up. I'll ensure that the fix is in the next release.

  Regards,
  Allan
• womplify Posts: 30Questions: 3Answers: 0

  April 2015

  Great. Works.