Как заставить JQuery версию tinyMCE открывать несколько текстовых областей во всплывающих окнах при нажатии на ячейку таблицы?

Итак, я пытаюсь создать шаблон, который будет использоваться для предоставления информации для нескольких сценариев в одном формате. Для этого у меня есть настроенная таблица, которая будет отображать информацию, и когда вы нажимаете на одну из ячеек (в частности), она помещает внутренний HTML-код в текстовую область, которая появляется в модальном диалоговом окне jQuery., Затем эта текстовая область превращается в экземпляр TinyMCE для редактирования (с использованием Tiny MCE javascript версии 4.3.2). Однако, с моим текущим кодом, это работает только в первый раз. После этого, независимо от того, в какой ячейке щелкают, я получаю всплывающее окно, которое отображается пустым, хотя в нем содержится правильный HTML-код при запуске элемента проверки.

Я видел похожие вещи в предыдущих вопросах, но один из них хотел использовать jQuery только для всплывающей работы, которую я сделал, а другой не использовал версию jQuery, и код решения не работал с этой версией, но кажется, что он просто закрыл экземпляр, когда диалоговое окно было закрыто, чтобы его можно было переделать в следующую текстовую область. Кроме того, я использую пользовательский CSS для внешнего вида, но схема Start из jQuery является наиболее близкой из доступных, если вы хотите, чтобы она выглядела красиво во время устранения неполадок.

Изменить: чтобы уточнить, я не пытаюсь открыть несколько прогонов одновременно, они должны открывать по одному за раз.

Код:

<head>
    <script src="assetts/jquery-1.10.2.js"></script>
    <script src="assetts/jquery-ui.min.js"></script>
    <script src="tinymce/js/tinymce/jquery.tinymce.min.js"></script>
    <script src="tinymce/js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        $(window).load(function () {                
            $('td').click(function (event) {
                var currentId = this.id; 
                var currentHTML = this.innerHTML;
                alert(currentId); 
                $(function () { 
                    $("<div id=\"editmodal-diag\"></div>").dialog({
                        title: 'Edit',
                        modal: true,
                        buttons: {
                            Ok: function () {
                                var t = "#" + currentId; 
                                alert(t); 
                                $(this).dialog("close"); $("#editmodal-diag").remove(); 
                                tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text'); 
                            },
                            Cancel: function () {
                                $(this).dialog("close"); $("#editmodal-diag").remove(); 
                                tinymce.execCommand('mceRemoveControl', true, '#editmodal-diag-text'); 
                            }
                        }
                    });
                })
                $('#editmodal-diag').append("<textarea id=\"editmodal-diag-text\">" + currentHTML + "</textarea>"); 
                $('#editmodal-diag-text').empty; 
                $('#editmodal-diag-text').tinymce({ plugins: 'link' }); 
        });
    </script>
</head>
<body>
    <table width="75%>
        <tr>
            <th>Header text</th>
        </tr>
        <tr>
            <td>Information panel 1</td>
            <td>Information panel 2</td>
        </tr>
    </table>
</body>

Заранее спасибо.

1 ответ

Решение

После дополнительных копаний я обнаружил TinyMCE 4 - remove() или destroy (), в котором я обнаружил, что элемент управления tinymce необходимо удалить с помощью:

tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
tinymce.remove();

полностью удалить текущий редактор перед повторной инициализацией:

tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
$('#editmodal-diag-text').tinymce({ plugins: 'link'});

Это нужно было сделать только после того, как появилась первая коробка. Я использовал булеву переменную, чтобы проверить это. Полная функция:

var tinyRun = false;
$(window).load(function () {
    setTimeout(function () {
        $('td').click(function (event) {
            var currentId = this.id; 
            var currentHTML = this.innerHTML;
            alert(currentId); 
            $(function () { 
                $("<div id=\"editmodal-diag\"><textarea id=\"editmodal-diag-text\"></textarea></div>").dialog({
                    title: 'Edit',
                    modal: true,
                    buttons: {
                        Ok: function () {
                            var t = "#" + currentId; 
                            alert(t); 
                            $(this).dialog("close"); $("#editmodal-diag").remove(); 
                            tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
                            tinymce.remove();
                        },
                        Cancel: function () {
                            $(this).dialog("close"); $("#editmodal-diag").remove(); 
                            tinymce.execCommand('mceRemoveControl', true, 'editmodal-diag-text');
                            tinymce.remove();
                        }
                    }
                });
            })
            setTimeout(function () {
                $('#editmodal-diag-text').text(currentHTML);
                if (!tinyRun) {
                    $('#editmodal-diag-text').tinymce({ plugins: 'link' });
                    tinyRun = true;
                }
                else {
                    tinymce.execCommand('mceAddControl', true, 'editmodal-diag-text');
                    $('#editmodal-diag-text').tinymce({ plugins: 'link' });
                }
            }, 250);
        });
    }, 250);
}
Другие вопросы по тегам