tinyMCE и insertAtCaret (), альтернатива tinyMCE?

Question

У меня есть текстовая область с функцией insertAtCaret (), которая позволяет пользователям перетаскивать из списка в текстовую область, это все хорошо и здорово.Мой начальник попросил меня добавить к нему tinyMCE, чтобы пользователи не видели форматирование html.Когда я это сделал, моя функция перетаскивания сломалась.

Я понимаю, что tinyMCE имеет встроенную функцию, которая позволяет перетаскивать, но это не та форма, которую мы хотим для системы.Поэтому, если что, мне также нужно отключить эту функцию (какие-либо подсказки в этой заметке?)

У меня вопрос, есть ли альтернатива tinyMCE, которая будет хорошо играть с insertAtCaret ?Я безостановочно искал в Google, но не нашел ничего действительно полезного.Только несколько сообщений от других людей, имеющих такую ​​же проблему.

Заранее спасибо -V

Answer 1

Я тоже столкнулся с этой проблемой.Проблема в том, что большинство этих редакторов используют iframe для отображения HTML и просто скрывают поле ввода.Таким образом, вам нужно найти и привязать перетаскиваемый объект droppable к iframe и запустить событие, чтобы обнаружить и обработать это.

Я сделал нечто подобное с CKEditor, но вместо перетаскивания я просто делаю событие onclick, которое помещает некоторыеHTML в карете.Образец ниже:

<ul class="dis-tags">
    <li title="Id of the soo. This is useful for links and reference.">[SooID]</li>
    <li title="The user first name.">[FirstName]</li>
    <li title="The user last name.">[LastName]</li>
</ul>

// used to set the drag/drop of the tags
$('.dis-tags li').click(function () {
   CKEDITOR.instances.Message.insertHtml($(this).text());
   return false
});

Answer 2

Дополнительно к ответу uadrive:

insertAtCaret не будет играть ни с одним редактором в реальном времени, потому что все они используют приемлемый iframe. Основная teaxtarea (или другой html-элемент) скрывается при инициализации.

uadrive прав, вам нужно будет добавить обработчики в этот iframe, чтобы выполнять любые действия, когда вам это нужно. Если вы используете параметр конфигурации tinymce "paste_block_drop", вы не сможете выполнить какое-либо действие перетаскивания, если вы установите для этого параметра значение true, все события перетаскивания будут заблокированы.

Для вставки кода в позицию каретки в tinymce есть команда для использования:

tinyMCE.execCommand('mceInsertContent', false, 'my new content to be added');

Вот некоторый код, с которым можно поиграть (это действие, которое я выполняю по капле в редакторе, я восстанавливаю вставленное содержимое, а затем в соответствии с моей потребностью добавляю / фильтрую его и вставляю обратно в редактор).

setup : function(ed)
{
  ed.onInit.add(function(ed){
    $(ed.getDoc()).bind('drop', function(event){

        ed.content_pre = ed.getContent();
        ed.drag_content_html = event.originalEvent.dataTransfer.getData('text/html');
        ed.drag_content_plain1 = event.originalEvent.dataTransfer.getData('text/plain');
        //console.log('x', ed.content_pre, ed);
        tinymce.activeEditor = ed;
        setTimeout(function(){
            var ed = tinymce.activeEditor;
            var content_post = ed.getContent();
            var diff_front = 0;
            for (var i=0; i < ed.content_pre.length; i++) {
                if (ed.content_pre.charCodeAt(i) !== content_post.charCodeAt(i)) {
                    diff_front = i;
                    break;
                }
            }               

            if (ed.content_pre.substr(diff_front-2, 2) == '<p') diff_front -= 2;
            if (ed.content_pre.substr(diff_front-1, 1) == '<') diff_front -= 1;

            ed.setContent( ed.content_pre.substr(0, diff_front) + ed.drag_content_plain1 + ed.content_pre.substr(diff_front) );

        },0);
    });
  });
},