CKEditor 在 Select 下拉列表 Link 时插入文本文件

Question

关于这个主题有很多问题，但 none 似乎可以解决我的特定需求。简单地（或者我认为）需要将 .txt 文件内容放入我的 CKEditor 实例中。

已从此处找到的代码片段中拼凑出基本思想，但无法通过我的努力进一步工作。

目前，下面的代码只从下拉列表中插入 "value"，而不是文本文件的内容。我做错了什么：

<!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>

已在 CodePen

进行设置

非常感谢任何意见。

Answer 1

您获取了错误的值。不确定更改功能的编辑器在做什么，但您需要将文件读入编辑器。我使用 "get" 和 "setData." 我更改了插入函数以仍然使用 switch 但现在 ajaxMethod 是一个 link 发送到 get 函数。

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

我相信 "editor.insertHtml( data )" 会追加，而不是覆盖编辑器内容，如果您愿意的话。当然，将 links 更改为工作 links。由于跨浏览器限制，无法在 Code Pen 上进行测试，但可以在我的服务器上运行。

CKEditor 在 Select 下拉列表 Link 时插入文本文件

CKEditor Insert Text File When Select Dropdown Link

jquery

ckeditor

ckeditor4.x