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

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

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

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

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


javascript jquery tinymce
person littleghost76    schedule 11.11.2011    source источник
comment
Что вы имеете в виду под not in a form we want for the system?   -  person simshaun    schedule 12.11.2011
comment
Мы не хотим, чтобы пользователи перетаскивали какие-либо ссылки или что-либо еще. Список перетаскивания очень специфичен и представляет собой обычный текст.   -  person littleghost76    schedule 12.11.2011
comment
Меня расстроили возможности и возможности настройки TinyMCE, поэтому я выбрал CKEditor. Возможно, вы не сможете использовать insertAtCaret, но для этого есть аналогичные функции, плюс вы можете легко написать плагины, если вас не устраивает обработка.   -  person Smamatti    schedule 12.11.2011
comment
Есть ли способ отключить функцию перетаскивания ссылок? а реализовать свой?   -  person littleghost76    schedule 12.11.2011
comment
Хотя я не уверен, как ограничить перетаскивание определенными элементами, вы можете полностью отключить его. Я уверен, что это можно было бы сделать вручную при инициализации и разрешить это только для определенных элементов. См. github.com/tinymce/tinymce /blob/master/jscripts/tiny_mce/ и paste_block_drop на tinymce.com/ wiki.php/Плагин:вставить   -  person simshaun    schedule 12.11.2011
comment
Даже если я могу полностью отключить его, есть ли способ добавить необходимую мне функцию перетаскивания? =/ это кажется таким сумасшедшим сценарием, который я рисую здесь, но это часть требований, хе-хе.   -  person littleghost76    schedule 12.11.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я тоже столкнулся с этой проблемой. Проблема в том, что большинство этих редакторов используют 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
});
person uadrive    schedule 11.11.2011

arrow_upward
0
arrow_downward

В дополнение к тому, что ответил 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);
    });
  });
},
person Thariama    schedule 14.11.2011