|
23.5 Кб |
|
| Сейчас модно на предприятиях баловаться мини планшетами, и хочешь не хочешь, а приходится иногда заходить в сеть с него. При небольшом разрешении, ужасно читать код на форумах, где нет прокрутки его. Этот форум страдает этим тоже. Может быть добавить overflow: auto; элементу code? А заодно подсветку кода с нумерацией строк и копирование кода в буфер обмена?
Попробовал то, что уже предлагается в сети. Правда копирование и подсветка (на клиенте) плагинами для jQuery, но они не большие, а jQuery c гугла брать. Подсветка, это Chili, версия 2.2, есть у него небольшие глюки с переносами. Но есть уже версия 3.0, вроде бы все исправлено, но пока не подключал ее, потом, с ним идет компрессор кода, возможности вставки и т.п., в общем сперва надо разобраться.
В архиве пример со всеми скриптами - подсветка кода PHP, JavaScript, HTML, CSS, MySQL. Выбор кода подсветки осуществляется по классу тега code, а нумерация по классу тега pre окружающего тег code (в версии 3.0 этот подход вроде бы изменили, все по одному тегу - code).
Так как не обязательно всегда нужна подсветка, то автоматический ее запуск на странице отключен, и можно выбрать блок для подсветки. Блоки не имеющие кода не имеют подсветки и копирования.
Для того, чтобы копирование работало на локальном компьютере (для тестирования), необходимо в настройках проигрывателя Flash добавить файл ZeroClipboard.swf (находится в папке js) в доверенные:
а) для проигрывателя версии 8 и выше - Настройка->Панель управления->Flash Player->Дополнительно->Настройки доверенной папки, выбрать этот файл на диске и подтвердить.
б) для более ранних версий проигрывателя посетить страницу настроек Глобальных параметров безопасности ... на сайте Adobe, и с этой страницы указать этот файл для доверенных.
Стили элементов в примере можно любые по вкусу, но элемент по которому производится копирование (в примере span с классом copy) должен быть помещен в div c обязательным позиционированием: position: relative; | |
|
|
|
|
|
|
|
для: confirm
(01.09.2012 в 23:30)
| | Спасибо, попробуем прикрутить. | |
|
|
|
|
|
|
|
для: cheops
(02.09.2012 в 15:55)
| | Конкретно это не стоит прикручивать. Попробовал версию 3.0, да, убраны баги, и добавлены новые возможности, для кода полезные. Можно продолжать нумерацию с разбиением - полезно, если есть потребность разбить код на блоки. Можно выделить часть строк кода, или участок строки кода - полезно, если надо сослаться на проблемный участок кода.
Но при вставках таких возможностей в текстовую область, можно и запутаться. То есть, удобнее было бы работать в визуальном редакторе, тем более, что на данном форуме не хватает некоторого форматирования сообщений:
- нет цитирования, и вообще ужасные вещи с ним наблюдаются, когда для него используют <pre>.
- нужна таблица, особенно для раздела MySQL, где бывает нужно отобразить табличные данные.
- что-то, возможно, было бы удобнее отображать в виде нумерованных/маркированных списков.
- не очень удобно открывать новую вкладку, чтобы просмотреть прикрепленное изображение к теме (причем прикрепить можно только одно), когда браузер и так имеет много открытых вкладок. А ведь прикрепленные изображения можно не выводить на страницу, а отображать их как ссылки, для открытия их в слое. Если прикрепленных файлов несколько, то не сложно добавить список их - то что не изображение, то в списке для скачивания, а изображения, это ссылки.
- плюс добавить недостающих, но используемых стилей форматирования.
Но все визуальные редакторы страдают недостатками - поддержка браузеров заявляется, но как не крути, а каждый из них ведет себя в этих редакторах по своему. И что самое печальное, так это поведение в вставленных блоках типа <pre>, <q>, <table>. В общем свойство contentEditable=On вещь довольно пакостная, и годится только для шутки - вставить в адресную строку браузера javascript:void(document.body.contentEditable = true); и нажать Enter. )
Появилась идея - а на черта нужно для визуального редактирования использование урезанных возможностей execCommand(), и терпение капризов браузеров, ведь вполне хватит того, что предлагает JS. Textarea - это только терминал ввода, а некий слой на странице, это дисплей результата. Дисплей интерактивный, позволяющий выбрать отображаемый в нем блок и изменить уже определенный для него набор свойств, или переместить этот блок в иное место. В общем можно творить все, что угодно.
Надо реализовать такой редактор, получится, значит тогда можно будет и прикручивать. | |
|
|
|
|
|
|
|
для: confirm
(13.09.2012 в 10:08)
| | Попробовал на планшете писать сюда - действительно караул, нужно что-то делать. | |
|
|
|
|
|
|
|
для: cheops
(13.09.2012 в 10:39)
| | overflow: auto; для тега code, и уже будет лучше.
Я бы выбросил таблицу, как инструмент форматирования сообщений. Лучше div родитель, с вложенными дочерними div. Если при выборке из базы комментариев формировать уровень их вложений, то достаточно для дочерних элементов указывать:
style="padding-left:'.$row['level'].'em;"
| Не так сжато будет, и расчетов не требуется.
Это для размеров, проще высчитывать em:
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
|
Иначе да - на работе планшеты (дефектные компьютеры без системного блока), которые, если говорить упрощенно, заменяют пейджеры на поясе, ну с более большими возможностями. В общем проку мало, а что-то посмотреть не всегда удобно. | |
|
|
|
|