CKEditor Вставить текстовый файл при выборе раскрывающейся ссылки - PullRequest
Новая
       10

CKEditor Вставить текстовый файл при выборе раскрывающейся ссылки

0 голосов
/ 15 января 2019

Есть множество вопросов по этому вопросу, но ни один из них не отвечает моим конкретным потребностям. Просто (или я так думал) нужно поместить содержимое файла .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

Любой вклад очень ценится.

1 Ответ

0 голосов
/ 01 февраля 2019

Вы получаете неправильные значения. Не уверен, что делает ваш редактор с функцией изменения, но вам нужно прочитать файл в редактор. Я использую «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 из-за ограничений браузера, но работает на моем сервере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...