Load file into CKEditor textarea using Javascript

Question

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 ONLY after using browser back/forward buttons (which a student discovered by mistake). Using the input loads file from local drive, textarea goes blank but the loaded file only appears after using browser back/forward buttons?

Here is the HTML we are using:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
<body>

        <textarea name="editor1" id="editor1" rows="10" cols="80">
            Placeholder text...
        </textarea>
        <script>
            CKEDITOR.replace( 'editor1' );
        </script>

        <input name="file" type="file" id="files" class="form-control" value="">

        <script type="text/javascript">
                function readTextFile(file, callback, encoding) {
            var reader = new FileReader();
            reader.addEventListener('load', function (e) {
                callback(this.result);
            });
            if (encoding) reader.readAsText(file, encoding);
            else reader.readAsText(file);
        }

        function fileChosen(input, output) {
            if (input.files && input.files[0]) {
                readTextFile(
                    input.files[0],
                    function (str) {
                        output.value = str;
                    }
                );
            }
        }

        $('#files').on('change', function () {
        var result = $("#files").text();
        //added this below testing
        fileChosen(this, document.getElementById('editor1'));
        CKEDITOR.instances['editor1'].setData(result);
        });
        </script>

</body>
</html>

Also placed on JSFiddle

and W3schools

FYI: The browser back/forward mystery does not work on above two sites, only when I am using local or on a server.

After 3 days of trying to solve this in classroom, I come here asking for input. We have spent hours trying different methods found here and numerous sites.

Security is not an issue on input file restrictions, only using in classroom for training purposes/examples.

Anyone?

Answer 1

Okay, I managed to make it work. In order to replace the text, you need to call the setData(str); method on the CKEDITOR instance , 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

Load file into CKEditor textarea using Javascript

Question

1 answers

solution1
1 ACCPTED 2016-11-16 22:37:58

Load file into CKEditor textarea using Javascript

Question

1 answers

solution1 1 ACCPTED 2016-11-16 22:37:58

solution1
1 ACCPTED 2016-11-16 22:37:58