CKEditor Insert Text File When Select Dropdown Link

There are numerous questions about this subject but none seem to address my specific needs. Simply (or so I thought) need to place .txt file contents into my CKEditor instance.

Have hacked together basic idea from pieces of code found here and cannot get working any further with my efforts.

At the moment, the code below only inserts the "value" from dropdown and not the contents of text file. What am I doing wrong:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.11.2/full/ckeditor.js"></script>
</head>
<body>

    <form>
    <div class="" id="select" style="padding-left: 5px;">
    <select name="select" id="htmlArea2" onchange="InsertHTML();">
    <option value="">Select a Snipplet:</option>
    <option value="1">Simple Text</option>
    <option value="2">Simple Text External</option>
    <option value="3">All Data</option>
    <option value="4">Next Option</option>
    </select>
    </div>
    </form>

    <textarea name="editor1"></textarea>
    <script>
            CKEDITOR.replace( 'editor1' );
    </script>
</body>
<script>
$('[name="editor1"]').on('change', function() {

    //extract code from processing part to create default.php
    //var ajaxMethod = "default.php";
    var ajaxMethod = CKEDITOR.instances.editor1;


    switch($(this).value())
    {
    case "1":
      ajaxMethod = "simpletext.txt";
      break;
    case "2":
      ajaxMethod = "http://m.uploadedit.com/bbtc/154756641995.txt";
      break;                
    case "3":
      ajaxMethod = "http://m.uploadedit.com/bbtc/154756641995.txt";
      break;                
    case "4":
      ajaxMethod = "http://m.uploadedit.com/bbtc/154756641995.txt";
      break;      
    }

    $("#editor1").load(ajaxMethod);

});

CKEDITOR.on( 'instanceReady', function( ev ) {
            document.getElementById( 'select' ).style.display = 'block';
        });

        function InsertHTML() {
            var editor = CKEDITOR.instances.editor1;
            var value = document.getElementById( 'htmlArea2' ).value;
            if ( editor.mode == 'wysiwyg' )
            {
            editor.insertHtml( value );
            }
            else
                alert( 'You must be in WYSIWYG mode!' );
        }
</script>
</html>

Have setup at CodePen

Any input much appreciated.

Solution

You're grabbing the wrong values. Not sure what your editor on change function is doing, but you need to read the file into the editor. I use "get" and "setData." I changed the insert functin to still use switch but now ajaxMethod is a link sent to the get function.

    <form>
    <div class="" id="select" style="padding-left: 5px;">
        <select name="select" id="htmlArea2" onchange="InsertHTML();">
            <option value="">Select a Snipplet:</option>
            <option value="1">Simple Text</option>
            <option value="2">Simple Text External</option>
            <option value="3">All Data</option>
            <option value="4">Next Option</option>
        </select>
    </div>
</form>

<textarea name="editor1"></textarea>

<script>
    CKEDITOR.replace( 'editor1' );

    function InsertHTML() {
        var editor = CKEDITOR.instances.editor1;
        var value = document.getElementById( 'htmlArea2' ).value;

        switch(value){
            case "1":
            ajaxMethod = "_bak/test2.txt";
            break;
            case "2":
            ajaxMethod = "_bak/test1.txt";
            break;                
            case "3":
            ajaxMethod = "_bak/test2.txt";
            break;                
            case "4":
            ajaxMethod = "_bak/test1.txt";
            break;      
        }
        if ( editor.mode == 'wysiwyg' ){
            $.get(ajaxMethod).done(function (data) {
                CKEDITOR.instances['editor1'].setData(data);
                //editor.insertHtml( data )
            })
        }
        else{
            alert( 'You must be in WYSIWYG mode!' );
        }
    }
</script>

I believe "editor.insertHtml( data )" will append, not overwrite the editor content if you wanted that. And of course, change the links to working links. Couldn't test on Code Pen because of cross browser restrictions, but works on my server.