Load html page inside ckeditor

Question

Is there any way to load a local html page to ckeditor?

<div class="text-area">
    <textarea cols="120" rows="10" id="editor" name="text"></textarea>
</div>

This is the script:

@section Scripts {
<script type="text/javascript">

    CKEDITOR.replace('editor', {
        fullPage: true,
        allowedContent: true     

    });

    CKEDITOR.instances['editor'].setData('test.html');

</script>
}

Answer 1

You need to load this page with smth and only then fill CKEditor with data you got.

Note , that .setData() is async function, so don't do any data modification right after, until you will got confirmation that data in editor has been properly changed.

Javascript:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'test.html', true);

xhr.onload = function() {
  if (this.status == 200) {
    CKEDITOR.instances['editor'].setData(this.response);
  } else {
    // process error status here
  }
};

xhr.onerror = function() {
    // process error status here
};

xhr.send();

Javascript + jQuery

$.get('test.html')
  .done(response=>{CKEDITOR.instances['editor'].setData(response);})
  .fail(/** process error here **/);

Javascript + fetch

Not all browsers are supporting this one.

Polyfill is here: https://github.com/github/fetch

Support table is here: https://caniuse.com/#search=fetch

fetch('test.html')
  .then(response=>{CKEDITOR.instances['editor'].setData(response.text);})
  .catch(/** process error here **/);