CODEWITHSUNDEEP
javascripthtmlformattingtinymcefilereader
Rorschach
Rorschach

Reputation: 225

TinyMCE/FileReader: missing line breaks after reading text file

I try to create a custom button to read a text file. That's what I got so far:

<textarea id="editor"></textarea>
<div id="testdiv"></div>
<pre id="testpre"></pre>
<textarea id="testta"></textarea>

<script>
    tinymce.init({
        selector: "textarea#editor",
        toolbar : "txtupload",
        setup: function(editor) {
            var inp = $('<input id="uploader" type="file" accept="text/plain" style="display:none">');
            $(editor.getElement()).parent().append(inp);

            var fileInput = document.getElementById("uploader");

            fileInput.addEventListener("change",function(e){
                var file = fileInput.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var txt = reader.result;
                    console.log("text is:\n" + txt);
                    editor.insertContent(txt);
                    document.getElementById("testdiv").textContent = txt;
                    document.getElementById("testpre").textContent = txt;
                    document.getElementById("testta").textContent = txt;
                 };
                 reader.readAsText(file);
            });

            editor.addButton("txtupload", {
                text:"Text",
                icon: false,
                onclick: function(e) {
                    inp.trigger('click');
                }
            });
        }
    });
</script>

My problem is that I miss the line breaks in the TinyMCE-textarea. I tried to change the "editor-element" (i.e. i changed textarea to div and pre) but the result was the same. By way of illustration, here's a picture which illustrates my problem: tinymce_example

Upvotes: 0

Views: 441

Answers (1)

Rorschach
Rorschach

Reputation: 225

By replacing \n with <br/> one can solve this problem. Thanks to Amir Popovich and faboolous

Upvotes: 1

Related Questions