Load File Into Ckeditor Textarea Using Javascript

Attempting to load file(s) into CKEditor 4 textarea using input button and javascript. The files contain simple HTML code and have extensions .inc and .txt What I have works, BUT O

Solution 1:

Okay, I managed to make it work. In order to replace the text, you need to call the setData(str); method on the CKEDITORinstance, not over the DOM element. You also need to tell the editor to update ("redraw") its contents.

So:

fileChosen

function fileChosen(input, output) {
        if ( input.files && input.files[0] ) {
            readTextFile(
                input.files[0],
                function (str) {
                    output.setData(str); // We use the setData() method
                    output.updateElement(); // Then we tell the CKEditor instance to update itself
                }
            );
        }
    }

File input change

$('#files').on('change', function () {
    var result = $("#files").text();
    fileChosen(this,  CKEDITOR.instances.editor1); // We pass the CKEDITOR instance, not the DOM element
});

I also made the changes like importing jQuery before the CKEDITOR javascript file.

Check the results in this fiddle