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

Question

尝试使用输入按钮和JavaScript将文件加载到CKEditor 4 textarea中。 这些文件包含简单的HTML代码，并具有扩展名.inc和.txt。

我的工作方式有效，但只有在使用浏览器的后退/前进按钮（一个学生错误地发现它）之后才能使用。 使用本地驱动器上的输入加载文件，textarea变为空白，但仅在使用浏览器后退/前进按钮后才显示加载的文件？

这是我们正在使用的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>

也放在JSFiddle上

和W3schools

仅供参考：仅当我在本地或服务器上使用时，浏览器的后退/前进之谜在以上两个站点上均不起作用。

经过三天的尝试在课堂上解决这个问题，我来这里征求意见。 我们花费了数小时尝试这里和许多站点中发现的不同方法。

安全性不是输入文件限制的问题，仅在教室中用于培训目的/示例。

任何人？

Answer 1

好吧，我设法使它起作用。 为了替换文本，您需要调用setData(str); CKEDITOR 实例上的方法，而不是DOM元素上的方法。 您还需要告诉编辑器更新（“重绘”）其内容。

所以：

文件选择

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
                }
            );
        }
    }

文件输入变更

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

我还进行了更改，例如在CKEDITOR javascript文件之前导入jQuery。

检查此小提琴中的结果

使用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