За последние 24 часа нас посетили 54388 программистов и 1754 робота. Сейчас ищут 1018 программистов ...

WYSIWYG - вопросы и их возможные решения

Тема в разделе "JavaScript и AJAX", создана пользователем Psih, 29 янв 2007.

  1. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Всем привет :)
    Есть WYSIWYG который мы сами девелопим (специфика обязывает), так вот, есть некоторые вопросы, которые я ну никак не могу понять как сделать.. (используем DOM)

    1). Как поставить курсор на какое-то определённое место? Больше всего интересует как его переместить совсем в конец текста. Мне к примеру кажеться бредовой методика вставки чего-либо в обычный текст, когда мы по позиции курсора разбиваем контейнер на 2 отдельных и между ними впихиваем 3-й и потом всё это пихаем обратно в документ - а ведь вставить надо всего лишь обычный текст, а не какой-то там объект.
    2). Как сохранять текущую позицию курсора, что бы при сбивании фокуса поставить его обратно (см. так же 1-й пункт), т.к. он тогда встаёт на первую позицию, что естественно совсем никак не хорошо...

    Пока всё Где что почитать, может есть какие хорошие и _ПОНЯТНЫЕ_ реализации, ибо пытался копать FCKEditor, почти застрелился, слишком у них намудрено и запутано + не DOM + IE & FF only (мы же делаем как минимум IE, FF, Opera + хочеться что бы Safari и Konqueror. И везде отрабатывало одинаково :))
     
  2. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Гхм... похоже мой коллега какраз и стырил код с этого визивика.. Незнаю чё он там так переделал, но щас столько глюков вылазит, что работает это чудо +- в IE тока.. Попробую починить на основе оригинального кода :) Спасибо за линк, если что, ещё отпишусь :)
     
  3. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Вот упёрся в стену в IE - две JS функции:
    PHP:
    1.  
    2. var current_pos = null;
    3.  
    4. function insertHTML(html) {
    5.     if (navigator.family == 'ie4'){
    6.         if (current_pos == null){
    7.             setFocus();
    8.             saveCurrentPos();
    9.         }
    10.         current_pos.pasteHTML(html);
    11.     }else{
    12.         var div = document.getElementById('msg_editor_v').contentWindow.document.createElement("span");
    13.         div.innerHTML = html;
    14.         var node = insertNodeAtSelection(div);
    15.     }
    16.     saveCurrentPos();
    17. }
    18.  
    19. function saveCurrentPos(){
    20.     if (navigator.family == 'ie4'){
    21.         if (current_pos != null){
    22.             current_pos.moveEnd('textedit', 10000000000);
    23.             current_pos.collapse();
    24. // вот чё в этом блоке надо сделать, что бы грёбанный курсор встал на место?
    25.         }
    26.         current_pos = document.getElementById('msg_editor_v').contentWindow.document.selection.createRange();
    27.     }
    28. }
    первая вставляет HTML в текущую позицию курсора, вторая сохраняет новую позицию курсора (только для IE). Всё хорошо работает до одного момента - когда WYSIWYG теряет фокус и после этого я нажимаю добавить смайлик, смайлик ставиться в _нужное_ место, НО курсор передвигаеться в самое начало.
    Я вот уже с час бороздю MSDN но никак не могу заставить встать курсор после только что вставленного смайлика (да и вообще любого элемента) если до этого был потерян фокус...
     
  4. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    I hate FF & Opera for their stupid DOM...

    Это ахтунг прямо какой-то... Пока делал транслитератор, на IE 7-10 cтрок кода и транслитиратор в WYSIWYG работает - 5 минут работы..
    Толи дело FF с Opera - куча подводных камней, куча проверок.. Почему MS часто умудряеться сделать пару удобных методов, которые без геммороя помогают решить задачу?
     
  5. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    они это компенсируют десятками лаж :)
     
  6. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Знаешь, если взять лучшее из Мозилы, Оперы и IE и скомпоновать это в одно целое, убрав всю лажу - было бы очень удобно работать.. а так блин, и код разный писать надо, и подходы тоже разные... З@***о
     
  7. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Всем снова привет.. А вот теперь я реально влип и не могу выбраться из этой проблемы..
    Проблема с IE, c selection. В мозиле юзаю DOM - getSelection и получаю объект в котором находиться курсор в данный момент, беру rangeOffset что бы получить позицию курсора в тексте и далее всё прекрасно обрабатываю... а вот IE.. как можно получить такие данные для IE? Потому что createRange мне не годиться, т.к. мне надо знать какой текст стоил ДО того места, где стоит курсор (делаю транслитератор на манер translate.ru, только в WYSIWYG) - рыл и MSDN, и гугл мучаю - нигде толком ничё вменяемого.. Тупо добавить текст или вставить элемент есть, да и сам это сделал... а вот для моей задачи кажеться, что решения нету или я просто уже не могу до него додуматься...
    Есть идеи? :(

    P.S. мне главное получить элемент и позицию курсора в нём, далее уже с помощью DOM там всё легко.
     
  8. Anonymous

    Anonymous Guest

    PHP:
    1.   if (document.selection && document.selection.createRange)
    2.   {
    3.     var range = document.selection.createRange();
    4.     var str = range.text;
    5.   }
    чем плохо?
    или я чего то не допонял?
     
  9. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    в str будет пусто, текста там не будет!
     
  10. Anonymous

    Anonymous Guest

    Psih
    странно...а у нас - работает... ;)
     
  11. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Может у меня подругому как-то реализация... может можешь показать код, посмотрю что да как.. у меня подозрение, что сам визивик не так написан и требуется его переписать немного (не я его начинал писать, поэтому и проблемы возникли... :( )
     
  12. Anonymous

    Anonymous Guest

    У нас использутся немножко для другого: По выделению теста на странице AJAX-ом вытягивается перевод из словарика, и показывается. Просто автор данного изделия не я, счас, чуток попинаю автора =)
     
  13. Anonymous

    Anonymous Guest

    PHP:
    1.  
    2. function GetSel()
    3. {
    4.   if (document.getSelection) //MZ
    5.   {
    6.     var str = document.getSelection();
    7.     if (window.RegExp)
    8.     {
    9.       var regstr = unescape("%20%20%20%20%20");
    10.       var regexp = new RegExp(regstr, "g");
    11.       str = str.replace(regexp, "");
    12.     }
    13.   }
    14.   else //Ie
    15.   if (document.selection && document.selection.createRange)
    16.   {
    17.     var range = document.selection.createRange();
    18.     var str = range.text;
    19.   }
    20.   if (str!='')
    21.   {
    22.     document.all.soz.value = str; //это просто длянаглядности
    23.     doLoad(document.all.soz.value); //это к аяксу
    24.   }
    25. }
    26.  
    27. if (window.Event)
    28.   document.captureEvents(Event.MOUSEUP);
    29. document.onmouseup = GetSel;
    30.  
    Просил всю функцию? На вот.
    spiff
     
  14. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Ясно, ну в общем-то у вас немного другое. Это выделеный текст на транице. У меня же просто надо получить позицию курсора и от этой позиции получить какой символ стоит перед этой позицией (никакого текста не выделено, просто печатаем на транслите и автоматом переводим латиницу в кирилицу). В этом и всё проблема...
     
  15. dark-demon

    dark-demon Активный пользователь

    С нами с:
    16 фев 2007
    Сообщения:
    1.920
    Симпатии:
    1
    Адрес:
    леноград
    неплохое решение тут: http://code.gosu.pl/dl/STE/demo/STE.html
    правда код генерируется не шибко опрятный, зато библиотека очень лёгкая и кроссбраузерная (проверял в фф, опере, ие)
     
  16. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Наткнулся тут на проблему, с которой гугл не особо помогает, может кто из вас смог её решить.

    Надо отлавливать текс при событии onpaste и вырезать всё Word и прочее форматирование. Проблема в том, что я не могу сделать, что бы это событие отлавливалось...
    [js] if (typeof doc.contentWindow.document.addEventListener != 'undefined') {
    doc.contentWindow.document.addEventListener("keypress", shortkey_pressed, true);
    doc.contentWindow.document.addEventListener("onclick", saveCurrentPos, true);
    doc.contentWindow.document.addEventListener("onpaste", clearFormating, true);
    }else if (typeof doc.contentWindow.document.attachEvent != 'undefined') {
    doc.contentWindow.document.attachEvent('onkeypress', shortkey_pressed);
    doc.contentWindow.document.attachEvent('onclick', saveCurrentPos);
    doc.contentWindow.document.attachEvent('onpaste', clearFormating);
    }[/js]
    onpaste ни в какую не пашет... :(
     
  17. Anonymous

    Anonymous Guest

  18. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    неа, не помогает ничё...
    Он просто не реагирует, будто не назначал на эти события обработчики...
     
  19. Aleks

    Aleks Активный пользователь

    С нами с:
    14 апр 2007
    Сообщения:
    2
    Симпатии:
    0
    Я те отвечу на твой вопрос :)

    Не зря в вайзивигах когда нужно вставить неформатированный текст - делают отдельную кнопочку для этого... Открывается попап и там обычная текстария... Туда ты пендюришь текст... И он будет неформатированным...

    Когда я писал вайзивиг - сделал чуток по другому... Каждый раз когда пользователь что-то вводит - запоминал количество символов... Если, например, больше 10 за раз было введено - обрезал всё форматирование... Т.к. у меня не такой и здоровый был вайзивиг и допускалось только несколько видов форматирования - я пробегал по всему тексту... но ты можешь запоминать позицию курсора... до и после и обрезать только то, что нужно...

    Скажу сразу - мой самопридуманный метод обладает недостатком - при ктрл с ктрл в - переходы на новые строки вставляются везде ... Т.е. если на каком-то сайте был переход на новую строку без <br> всяких - а ты это скопировал - <br> появятся у тебя в самых неожиданных местах... :) Пока я это только обнаружил и не правил...

    Так что дерзай....

    пс. насчёт того, что все бравзеры гавно, а ие - это круто... ты не прав :)
     
  20. Dagdamor

    Dagdamor Активный пользователь

    С нами с:
    4 фев 2006
    Сообщения:
    2.095
    Симпатии:
    1
    Адрес:
    Барнаул
    Aleks
    Приветствую :)
    Слушай, если ты разбираешься в подобных редакторах... скажи, есть ли вообще в природе клиентские редакторы для обычного редактирования текста, но с подсветкой синтаксиса. Интересуют редакторы HTML и PHP кода. Облазил весь интернет, ничего путного не нашел. Надеюсь на твою помощь. :)
     
  21. Psih

    Psih Активный пользователь
    Команда форума Модератор

    С нами с:
    28 дек 2006
    Сообщения:
    2.678
    Симпатии:
    6
    Адрес:
    Рига, Латвия
    Aleks
    Я вообще-то не могу перехватить событие вставки текста. А текст могут вставить что куда угодно. ДА и гемморно это. Ладно, вообщем понятно. Надо читать читать и ещё раз читать и пробовать разные комбинации. Бум пытаться.
     
  22. Aleks

    Aleks Активный пользователь

    С нами с:
    14 апр 2007
    Сообщения:
    2
    Симпатии:
    0
    Dagdamor Eclipse, Zend Studio, macromedia DreamViewer, phpedit, notepad + ... И вообще, что-то не в тему твой вопрос ;)
    Ну ты можешь выследить куда вставили при большом желании... Но, как я уже писал - лучше отдельно кнопку сделать (и не выё....) для вставки неформатированного текста...

    Перехватить событие у меня не получилось, т.к. вроде оно не во всех бравзерах есть... Но я уже не помню честно говоря...
     
  23. simpson

    simpson Активный пользователь

    С нами с:
    11 фев 2006
    Сообщения:
    1.650
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Aleks
    я думаю, Dagdamor имел ввиду вайзивиг с возможностью подсветки кода. :)
     
  24. Dagdamor

    Dagdamor Активный пользователь

    С нами с:
    4 фев 2006
    Сообщения:
    2.095
    Симпатии:
    1
    Адрес:
    Барнаул
    simpson
    Не визивиг, а простой текстовый редактор, работающий в браузере и с подсветкой. Для CMS/CMF :)
    Если не в тему - извиняюсь.