Custom field type - CKEditor

womplify

I am having very hard time implementing a wysiwyg editor as a data field.
The problem is not the general "framework" of the custom field types but rather what I see as the limitation of the editor's events.

What I want to do is simple. I have an "html" field that I want to be able to edit with CKEditor, (or any such editor for that matter).

Here is what I THOUGHT I needed to do:

1. Define a new 'HTML' fieldtype
2. implement its create,get,set,enable,disable

I did that, but then I realized that the way it seems to be working is that create requires you to put the "final" html of the editor.
CKEditor, as any other such editors, start with an html "placeholder" that get replaced once the tool is initialized.
In CKEditor's case, it is done via <textarea id='myeditor'></textarea>

So.. there needs to be an initialization phase of the placeholder.
In CKEditor's case, it is done via CKEDITOR.replace('myeditor')

Sounds great so far. But.. during create, I seem to be UNABLE to do the replace, as it seems the create is designed to return the html code of the input, which is not YET created, but rather only supplies the html for the editor to later create when it is initialized.

OK.. So.. I thought to myself.. Fine. I will instantiate the placeholder only, and will initialize it just after it is rendered.
But no event in the Editor gives me that ability. I needed something right AFTER the field is created. BUT all events I for Editor are ONLY the fields are created. am I missing something

So, I thought. OK.. I will initialize it during "set". It must be already created when it is about to be set. Right? Wrong
Even during set, the dom does not yet contain the 'myeditor' element. So how can I initialize it? When?

Am I missing something?

womplify

Post removed, after discovering that there are existing plugins that don't work as well

womplify

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

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

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

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

:) :)
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

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

Great. Works.