Условия задачи спрятал. Показать
На днях я доработал предоставленные Tucker-ом яваскрипты для игровой статистики (подсветка команд и "бегунок") и добавил их в "движок", так что скоро они появятся в проекте официально.
Воодушевившись этим (первым для меня) сотрудничеством с участниками проекта, я решил изредка выкладывать в открытый доступ задачи по яваскрипту, верстке, а может и по другим дисциплинам, на которые у нас не хватает времени, и они висят годами. Так что, любой желающий приглашается помочь проекту, если владеет этими технологиями.
Вознаграждения никакого не предлагаю, но если чья-то помощь будет существенной - обещаю рассказать об этом администрации, а там уж на их усмотрение.
История проблемы:
Навороченная форма ввода - это iframe, который переключен в режим WYSIWYG (designMode="on").
Дизайн цитат на форуме и в почте представляет собой блок с особым цветом фона, границей и т.д. На данный момент я делаю цитаты с помощью тега div.
Беда в том, что в режиме WYSIWYG в браузерах плохо реализована работа с блоками.
Так, на картинке выше, если отключить мои специальные скрипты, невозможно будет поставить курсор ни в одно из мест, которые отмечены красным. Под "невозможностью" я подразумеваю, что этого не может сделать пользователь ни с помощью мыши, ни с помощью клавиатуры.
Для решения этой проблемы я написал ужасно кривое решение - я вставляю яваскриптом узенькие строчки перед и после цитат (когда это необходимо), в которые можно вставить курсор. (Именно эти строчки и отмечены красным). Эти строчки превращаются в строки нормальной высоты если ввести в них текст. Оставшиеся пустыми строки удаляются из сообщения после отправки.
К сожалению, я столкнулся с трудностями в разных браузерах (особенно в Хроме), и до сих пор эта система работает не слишком хорошо, но у меня нету времени её переделать.
Итак, непосредственно задача:
1. Придумать удобную систему для работы с цитатами в режиме WYSIWYG (не меняя дизайн этих цитат). Как вариант, достаточно решить более узкую задачу - придумать, как обеспечить пользователю возможность вставлять курсор ввода перед и после цитат.
2. Реализовать её и оттестировать во всех актуальных браузерах (IE 7+, Opera 9.5+, Firefox, Chrome, Safari)
Если кто-то сделает только 1-ю часть (т.е. только придумает идею), но его идея покажется мне очень разумной и реализуемой, то 2-ю часть я могу сделать сам.
Вот тут лежит архив с работающей (вроде) навороченной формой ввода. Вся логика цитирования вынесена мной в файл quoting.js, остальная логика WYSIWYG-редактора лежит в файле wysiwyg.js. Весь код писался мной в мой первый год работы программистом, к тому же это вообще первый мой код на яваскрипте, поэтому он ужасен. Но в задачу не входит улучшение кода wysiwyg.js. Только quoting.js.
Конкретно, то, что мне хотелось бы изменить лежит в двух функциях: separateQuotes и expandQuoteSpacers.
Спасибо за внимание.
Воодушевившись этим (первым для меня) сотрудничеством с участниками проекта, я решил изредка выкладывать в открытый доступ задачи по яваскрипту, верстке, а может и по другим дисциплинам, на которые у нас не хватает времени, и они висят годами. Так что, любой желающий приглашается помочь проекту, если владеет этими технологиями.
Вознаграждения никакого не предлагаю, но если чья-то помощь будет существенной - обещаю рассказать об этом администрации, а там уж на их усмотрение.
Задача 1: Цитирование в "навороченной форме" ввода сообщений
История проблемы:
Навороченная форма ввода - это iframe, который переключен в режим WYSIWYG (designMode="on").
Дизайн цитат на форуме и в почте представляет собой блок с особым цветом фона, границей и т.д. На данный момент я делаю цитаты с помощью тега div.
Беда в том, что в режиме WYSIWYG в браузерах плохо реализована работа с блоками.
Так, на картинке выше, если отключить мои специальные скрипты, невозможно будет поставить курсор ни в одно из мест, которые отмечены красным. Под "невозможностью" я подразумеваю, что этого не может сделать пользователь ни с помощью мыши, ни с помощью клавиатуры.
Для решения этой проблемы я написал ужасно кривое решение - я вставляю яваскриптом узенькие строчки перед и после цитат (когда это необходимо), в которые можно вставить курсор. (Именно эти строчки и отмечены красным). Эти строчки превращаются в строки нормальной высоты если ввести в них текст. Оставшиеся пустыми строки удаляются из сообщения после отправки.
К сожалению, я столкнулся с трудностями в разных браузерах (особенно в Хроме), и до сих пор эта система работает не слишком хорошо, но у меня нету времени её переделать.
Итак, непосредственно задача:
1. Придумать удобную систему для работы с цитатами в режиме WYSIWYG (не меняя дизайн этих цитат). Как вариант, достаточно решить более узкую задачу - придумать, как обеспечить пользователю возможность вставлять курсор ввода перед и после цитат.
2. Реализовать её и оттестировать во всех актуальных браузерах (IE 7+, Opera 9.5+, Firefox, Chrome, Safari)
Если кто-то сделает только 1-ю часть (т.е. только придумает идею), но его идея покажется мне очень разумной и реализуемой, то 2-ю часть я могу сделать сам.
Вот тут лежит архив с работающей (вроде) навороченной формой ввода. Вся логика цитирования вынесена мной в файл quoting.js, остальная логика WYSIWYG-редактора лежит в файле wysiwyg.js. Весь код писался мной в мой первый год работы программистом, к тому же это вообще первый мой код на яваскрипте, поэтому он ужасен. Но в задачу не входит улучшение кода wysiwyg.js. Только quoting.js.
Конкретно, то, что мне хотелось бы изменить лежит в двух функциях: separateQuotes и expandQuoteSpacers.
Спасибо за внимание.
Сообщения
1 комментарий:
мне кажется что самым разумным - повторить функционал почтовых клиентов (даже gmail.com так делает):
1. курсор стоит в начале цитаты, по enter добавляем параграф перед цитатой, ставим туда курсор
2. курсор стоит в середине цитаты, по enter разбиваем на две цетаты, между ними вставляем параграф и переводим курсор туда
3. курсор стоит в конце цитаты, по enter добавляем после цитаты параграф и переводим курсор туда
в коде это примерно такая схема:
1. вешаем событие keyup на элемент цитаты
2. в событии проверяем нажатую клавишу и выполняем нужные действия (разбить цитату если нужно, добавить параграф в нужное место, переместить курсор в новый параграф)
если возникнут проблемы с написанием такого кода - могу набросать прототипчик
Отправить комментарий