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