Dynamically convert teaxtarea into ckeditor field

[bekab95]

Type of report

Feature request

Provide description of the new feature

What is the expected behavior of the proposed feature?

On any given page adding new field which contains Class ckeditor have to load ckeditor editor, but there might be any listener to call ckeditor and override only newly added field with class ckeditor Does CKEDITOR have any method in API to load new instance as new field added to the html document and not yet saved ?

Have possibility to automatically transform newly created elements in DOM to editor's instances. E.g. I'd like to set up option that all newly created elements with class .ckeditor will be replaced with actual editor instances.

https://docs.ckeditor.com/ckeditor4/latest/guide/dev_jquery.html#creating-editor-instances

May this has to work ?

var elem = $(this).find('.your_selector')
 elem.ckeditor()

[msamsel]

I'm not sure if I understand you correctly, but I suspect that you might look for method appentTo: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#method-appendTo You can also might be interested in this sample: https://cdn.ckeditor.com/4.9.2/full-all/samples/old/ajax.html

If it's not, then please provide wider description what feature would you like to see in editor. I'm not sure how to understand

to load new instance as new field added to the html document and not yet saved

what is not saved yet?

[bekab95]

@msamsel I will look appendTo Document created in Flask-Admin is saved in database and when adding new ListField in the document which has to have 3 ckeditor fields (textarea) and this ListField is not yet saved database ckeditor is not loading Dynamically

AppendTo does not work

[msamsel]

I still don't understand what you try to achieve.

CKEditor is working fully on client side and you have full control when to create, update or destroy it. CKEditor does not come with automatic database integration. Basically it transform users input into nice html. If there is something not ready on application side, but editor is already load, then you should create JS code which will update data inside editor or wait with creating editor on page until data will be ready. To update data inside already created editor you can use setData

I don't know flask, and CKEditor is fully JS library, that's why I appreciate providing examples based on (HTML + JS) only.

[bekab95]

Simply I need to attach CKEditor for new textarea wich has class ckeditor and is appeared in DOM during clicking button

[msamsel]

Hmm yeah it sounds like a new feature, we don't have any option to have working solution out of the box. I'll update a little bit your description to have better perspective on goal of this task.

[bekab95]

@msamsel Yes for any new textareas which will have class ckeditor, CKEditor has to be attached

[sabatons]

@ufo911

Why not call CKEDITOR.replace for newly added elements or create them with contenteditable attribute ( so it will activate inline CKEditor ) ?

[bekab95]

@sabatons can not catch newly added fields with class .ckeditor to use CKEDITOR.replace, if I use CKEDITOR.replaceAll it will reload all CKEditors and that is bad solution. I dont know about contenteditable attribute

[bekab95]

@msamsel

I think there may have to be a listener which will see new .ckeditor class attached to DOM and it will attach CKEditor instance on it this seems a solution I think

[bekab95]

this is my current solution for my task

    <script src="//cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.inline-field a').click(function (e) {e.preventDefault();
            var fresh = document.querySelectorAll('.fresh');
            var newfresh = fresh[fresh.length -1 ];
            var id = newfresh.querySelectorAll('.ckeditor');

            for (var i = 0; i < id.length; ++i) {
                CKEDITOR.replace(id[i]);
            }
            return false;
        });
    });
    </script>

[Comandeer]

I think that such feature should be implemented using MutationObserver to detect appearance of newly added elements. However this technique would work only in modern browsers, without support for older IEs, which could be an issue for some cases.

[bekab95]

@Comandeer

Can you change my example with MutationObserver ?

[bekab95]

Any work on this ?