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

仅供参考：只有当我使用本地或服务器时，浏览器后退/前进神秘才能在上述两个站点上运行。

在课堂上试图解决这个问题3天之后，我来这里要求输入。我们花了几个小时尝试在这里找到的不同方法和众多网站。

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

任何？

Answer 1

好的，我设法让它发挥作用。要替换文字，您需要调用setData(str); 实例上的CKEDITOR方法，而不是DOM元素。您还需要告诉编辑更新（＆＃34;重绘＆＃34;）其内容。

所以：

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

文件输入更改

$('#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。

检查结果in this fiddle

使用Javascript

1 个答案: