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/Plugin:paste   -  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