使用Javascript将文件加载到CKEditor文本区域

Question

Attempting to load file(s) into CKEditor 4 textarea using input button and javascript. 尝试使用输入按钮和JavaScript将文件加载到CKEditor 4 textarea中。 The files contain simple HTML code and have extensions .inc and .txt 这些文件包含简单的HTML代码，并具有扩展名.inc和.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? 使用本地驱动器上的输入加载文件，textarea变为空白，但仅在使用浏览器后退/前进按钮后才显示加载的文件？

Here is the HTML we are using: 这是我们正在使用的HTML：

<!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 也放在JSFiddle上

and W3schools 和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); 为了替换文本，您需要调用setData(str); method on the CKEDITOR instance , not over the DOM element. CKEDITOR 实例上的方法，而不是DOM元素上的方法。 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. 我还进行了更改，例如在CKEDITOR javascript文件之前导入jQuery。

Check the results in this fiddle 检查此小提琴中的结果

使用Javascript将文件加载到CKEditor文本区域

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-11-16 22:37:58

使用Javascript将文件加载到CKEditor文本区域

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-11-16 22:37:58

解决方案1
1 已采纳 2016-11-16 22:37:58