时间戳

首页 > 解决方案 > CKEditor 选择下拉链接时插入文本文件

jquery - CKEditor 选择下拉链接时插入文本文件

问题描述

关于这个主题有很多问题，但似乎没有一个能解决我的具体需求。只需（或者我认为）需要将 .txt 文件内容放入我的 CKEditor 实例中。

已经从这里找到的代码片段中拼凑了基本的想法，并且无法通过我的努力进一步工作。

目前，下面的代码仅从下拉列表中插入“值”，而不是文本文件的内容。我究竟做错了什么：

<!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进行设置

非常感谢任何输入。

标签： jqueryckeditorckeditor4.x

解决方案

你抓住了错误的价值观。不确定您的更改功能编辑器在做什么，但您需要将文件读入编辑器。我使用“get”和“setData”。我将插入函数更改为仍然使用开关，但现在 ajaxMethod 是发送到 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)”会附加，如果你想要的话，不会覆盖编辑器内容。当然，将链接更改为工作链接。由于跨浏览器限制，无法在 Code Pen 上进行测试，但可以在我的服务器上运行。

推荐阅读