Юзерскрипт для форматирования текста (обновлено 13.10.10)
Palette 1.3.2 - это юзерскрипт, который добавляет несколько кнопок, позволяющих быстро вставлять теги форматирования в текст.
╔══════════════════════════════════╗
║ ║
║ Оглавление: ║
║ ║
║ 1. Описание основных кнопок ║
║ 2. Обновление от 18.09.10 ║
║ 3. Обновление от 25.09.10 ║
║ 4. Обновление от 13.10.10 ║
║ 5. Версия для Google Chrome ║
║ 6. Установка ║
║ 7. Прочее ║
║ ║
╚══════════════════════════════════╝
1. Описание кнопок:
b - делает текст жирным
i - делает текст курсивным
s - делает текст перечеркнутым
u - делает текст подчеркнутым
q - делает текст курсивным и помещает в кавычки
sup - делает текст верхним индексом (xn+yn=zn)
sub - делает текст нижним индексом (C2H5OH)
pre - меняет шрифт на Courier и заменяет пробелы на неразрываемые
Фдлрцу шцуре рыфвшкуце шШРрцыуе шрррулре шцу шРФре
Этот текст не разбивается лол █▀▀▀▀▀▀█
█ █
█▀█ ● ● █▀█
█ █ █ █
▼ █ _ █ ▼
█▄▄▄▄▄▄█
█ █
_█ █_
▲
▲ ▲
color - вставляет текст в тег "font" с цветом, указанным в текстовом поле. Номер цвета может быть как буквенным - red, yellow, teal, так и цифровым - #6F15C8, #25FFF0, #D99019.
Последняя кнопка показывает HSB-палитру. В первом поле выбирается насыщенность и яркость цвета, во втором - оттенок. Следующий блок содержит два поля - верхнее показывает выбранный цвет, нижнее - его ближайший web-safe аналог. Для того, чтобы использовать web-safe цвет, нужно кликнуть по нижнему полю.
2. Второй ряд кнопок (обновление от 23.06.10)
des:b, des:u и des:i - форматирование шапки объекта. Скрипт разделяет строку на две части - до двоеточия, и после, и форматирует соответствующим тегом первую часть. Например:
asdasd:asdasdas
ASasdasd:asdasd
ASD asd qwrqws123: 224s
ajtkelifj
Выделяем эти четыре строки и нажимаем des:b. Получается
asdasd:asdasdas
ASasdasd:asdasd
ASD asd qwrqws123: 224s
ajtkelifj
des:u и des:i делает текст подчеркнутым и курсивным.
ul - классический непронумерованный список. Выделяем несколько строк, наимаем ul, и строки помещаются в теги:
- фывфыв
- фывфывфывф
- фывфывфывффыв
ol - то же самое, что и ul, только список будет пронумерованным с единицы:
- ффывфыв
- фывфы
- фывфывфы
cl - имитация списка выбранным стилем. Добавляет в начало каждой строки выбранный символ:
♠фывфыв
♠фывфывфывф
♠фывфыв
кстати, насчёт символов - похоже, не все символы из списка отображаются корректно. Если кто хочет, пишите в комменты, какие символы добавить в список. Не актуально, теперь вы сами это можете сделать.
cls - вырезает все теги форматирования из выделения. Точнее вырезает всё, находящееся в треугольных скобках, содержащее слеш в начале и один аттрибут. Просо выберите нужный фрагмент и нажмите cls - теги пропадут.
link - работает как color, только вставляет в аттрибут href ссылку из поля справа. Для того, чтобы сделать ссылку, нужно выделить слово, по которому будет совершаться переход.
Также я добавил новое поле: превью. Превью - это поле предпросмотра форматирования, находящееся над окном редактирования. Ссылка превью открывает и закрывает это окно, при этом оно перестаёт обновляться (у кого будет лагать, можно его закрыть).
Внимание! текст в предпросмотре поддерживает все теги html и не охватывает таблицу стилей сайта. Тоесть то, что вы видите там, не совсем то, что будет на самом деле - учитывайте это.
Ещё одна фича - пипетка. При редактировании поста, цвет текста можно брать напрямую из превьюхи - если навести курсор на цветной текст, иконка сменится на знак вопроса - по клику поле color получит тот цвет, который содержится в теге font.
3. Третий ряд кнопок (обновление от 26.06.10)
gradient - кнопка, красящая текст градиентом. Следующее после градиента пустое поле - это палитра цветов градиента, кнопка "+" добавляет в палитру цвет с номером из поля color. "-" удаляет все образцы из палитры. Для того, чтобы удалить образец, нужно по нему кликнуть. Для того, чтобы использовать градиент, нужно выбрать минимум 2 цвета, выделить текст и нажать gradient. Вминание! градиентируемый текст не должен содержать тегов, иначе теги тоже покрасит. Форматируйте текст после того, как покрасите его.
К примеру, если у нас в палитре находится █ █ █, строка примет вид:
ASKDHAKSDHFKASDHGKHASDKGHASDG
Пользуйтесь градиентами осторожно, они увеличивают количество символов в 30 раз, так что не надейтесь, что вы сможете покрасить весь ваш объект красивыми буковками (но количество цветов в палитре не влияет на прирост букв). Помните - максимальное количество символов в одном посте - 65535. Для сравнения, радуга внизу состоит из 21359 букв.
Для создания градиентов можно использовать пипетку - любой цвет любой буквы доступен для снятия образца.
██████████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████████
<, > - кнопки отмены\возврата действий. Как undo и redo. < отменяет действие, > - возвращает. Всего можно вернуть до 12 действий, после - самое старое действие удаляется.
<< - возвращает исходный вид текста, полезно при редактировании поста.
code - позволяет вписать теги форматирования в текстовом виде:
<i><b>Форматирование этой строки <font color="#332ADC">отображается</font> в виде html-кода</b></i>
code очищается кнопкой cls - даже если вы тупо руками напишете <, он сконвертирует их в <
Серый прямоугольник между превью и формой ввода - кнопка, позволяющая изменять размер превьюхи. Перетаскивается вверх и вниз.
В скрипт добавлена работа с cookie - теперь между страниц сохраняется положение превьюхи (скрыта\раскрыта) и её высота, а так же содержимое палитры градиента.
Пример спойлера:
Этот текст написан белым шрифтом. Чтобы его прочитать, его надо выделить.
(Выделите спойлер, чтобы прочесть)
<u><font color=#FFFFFF>Этот текст написан белым шрифтом. Чтобы его прочитать, его надо выделить.</font></u><br /><sup>(Выделите, чтобы прочесть)</sup>
Новые функции (обновление от 18.09.10)
Текстовое поле с двоеточием позволяет изменять символ разделителя для кнопок des:*. К примеру, если написать там "***", получится следующее:
фывфыв:фывфывфыв
фывфывфыв*фывфы**фывфыв
фывфывфыв***фывфы
ФЫвфывф **** фывфы
Количество символов не ограничено, но при повторении текст будет разделяться по первому совпадению:
фывфывфыв***фывфывфыв***фывфывфыв***фывфывфыв
Выпадающий список возле кнопки >cl теперь позволяет добавлять любые новые символы для функции cl. Для того, чтобы добавить символ, выберите последний вариант - "...", появится поле и две кнопки. Кнопка < отменяет выбор, если вы случайно нажали на троеточие, кнопка + добавляет символы из текстового поля в список. Кнопка Х возле списка удаляет выбранный символ. Троеточие удалить нельзя (вроде как :D), использовать, соответственно, тоже, но если вам так уж прям необходимо использовать троеточие в качестве символа, вставляйте соответствующий символ … (Alt+0133)
Примечание: если вы случайно удалили все символы, или просто хотите вернуть те, что были по умолчанию, сделайте следующее:
- Удалите все символы из списка
- Добавьте в список reset, в итоге у вас в списке должны содержаться только reset и ...
- Обновите страницу
Как вы уже поняли, символы сохраняются после закрытия страницы.
Добавлена пользовательская палитра вместимостью в 14 образцов - В окне палитры под предпросмотрами появилась кнопка "+", она добавляет сватч со значением цвета из поля color, которые так же сохраняются в куки. Для того, чтобы получить цвет из образца - кликните по нему, чтобы удалить образец - кликните на маленький белый квадратик справа.
4. Новые функции (обновление от 25.09.10)
С новым обновлением добавлено 5 новых кнопок. Рассмотрим подробнее первых четыре:
Кнопка >>, пустой список, кнопка patt и пустое текстовое поле - это инструменты управления пользовательскими шаблонами. Думаю многие из вас сталкивались с тем, что вы постоянно пишете один и тот же текст. Я это немного упростил - достаточно сделать пустой шаблон, и вставлять его одним нажатием кнопки.
Как это сделать? Для начала вам нужно создать объект с шаблонами. Не важно, где вы его создадите, главное чтобы у вас к нему был доступ. Тоесть если вы создадите объект, и поставите ему "нет доступа", то никто, кроме вас не сможет использовать этот шаблон. Что писать в шаблоне? Скрипт использует собственную разметку, чтобы определить, какой текст является шаблоном, а какой нет. Кратко опишу разметку:
--start-- - означает начало списка шаблонов. Всегда находится в предыдущей строке перед шаблоном, тоесть шаблон должен начинаться со следующей строки
--end-- - соответственно, конец списка. Находится угадайте где. Тоже должен содержаться в отдельной строке.
-title- -/title- - закрывающийся тег имени шаблона. Каждая часть для удобства различия должна как-то называться. Нельзя оставлять пустой, нельзя создавать два и больше шаблона с одинаковыми именами.
-header- -/header- - тег, изменяющий заголовок комментария. Присутствие обязательно, но если вы не хотите изменять заголовок, оставьте тег пустым, тоесть просто впишите после title -header--/header-, заголовок не будет при этом меняться.
--splt-- - разделитель шаблонов. Если вы хотите использовать несколько шаблонов, разделяйте текст такими тегами.
Пример шаблона:
http://www.ex.ua/view/2359005
--start--
-title-Первое название-/title-
-header-Тут есть заголовок-/header-
ТЕКАСТ ТЕКАСТ ТЕКАСТ ЦВЕТ
произвольно отформатированный текст
--splt--
-title-Второе название-/title-
-header--/header-
Ещё один шаблон, отформатированный как вам нравится
--end--
Заметьте, что title всегда находится перед текстом шаблона, header сразу после него, все теги находятся в отдельной строке. Любой, даже самый маленький шаблон должен содержать все теги, в таком порядке, как я указал. Теги категорически запрещено форматировать.
Вобщем, вы создали объект с правильной разметкой. Дальше копируете ссылку на объект, и вставляете её в поле, находящееся справа от кнопки patt. После этого текст нужно загрузить - поскольку это почти равноценно переходу по ссылке, но шаблоны вам будут нужны далеко не каждый раз, то незачем лишний раз нагружать сайт. Нажимаете кнопку >>, и если ссылка правильная - кнопка patt станет доступной, а в списке появятся названия ваших шаблонов. К примеру, если вставить ссылку на этот объект, то в списке появятся пункты "Первое название" и "Второе название". Теперь, если нажать кнопку patt, в объект вставится выбранный шаблон.
Ссылка на шаблоны сохраняется в куки.
_______________________________________________________
Тема с шаблонами: http://www.ex.ua/view/2363146
_______________________________________________________
Последняя кнопка - это лента новостей. Там я буду выкладывать сообщения об обновлении, о починке багов, и так далее. Работает по тому же принципу, что и шаблоны.
4. Новые функции (обновление от 13.10.10)
Добавлена поддержка мини-скриптов в шаблонах. Что это такое?
Возможно, вы часто делаете одни и те же действия, допустим, раскрашиваете большие объемы разного текста, при этом шаблоны вам не подходят, т.к. текст меняется. Теперь этот процесс можно полностью автоматизировать - для этого нужны только базовые знания javascript-а. Для начала, посмотрите пример простого макроса (загрузите его как обычный шаблон). Сначала добавьте несколько цветов в пользовательскую палитру, если она пустая, минимум 3. Потом выберите шаблон "Тестовый код" (обратите внимание, надпись на кнопке поменялась на macro - это значит, что шаблон будет выполняться как скрипт). Напишите несколько букв, выделите их, и примените шаблон.
Тестовый макрос покрасил выделенный текст цветом, который содержится в вашей палитре под номером 3, после этого вставил приветствие как произвольно отформатированный текст, вставил ссылку сюда в поле link, сделал градиент радужного цвета, заменил цвета пользовательской палитры на цвет из поля color, обычный черный цвет и третий по счету цвет в палитре градиента, и вставил градиентный текст. Ну и поздоровался, конечно :D
Сделать подобное вовсе не сложно, сейчас расскажу как:
Для начала поместите текст шаблона в теги -code--/code-, переносы ни на что не влияют, главное, чтобы вне этого тега в шаблоне ничего небыло. После этого вписывайте функции в той последовательности, в которой вы желаете их запускать:
Palette API
- insertTag('открывающий тег', 'закрывающий тег'); - аналог простых кнопок форматирования, таких как b или i. Нужна для комбинирования нескольких тегов, напримерinsertTag('<b><i><font color="#ff0000">', '</font></i></b>');
- insertText('текст'); - заменяет выделенный текст (или просто вставляет, если выделение точечное).
- selectedText() - субфункция, нужна для оперирования выделенным текстом, к примеру, если вы хотите вставить выделенный текст в поле link, используйтеsetLink(selectedText());
- gradientColor(номер) - субфункция, возвращает цвет градиента под указанным номером. К примеру, чтобы вписать в поле color второй цвет из градиента, используйтеsetColor(gradientColor(2));
- swatchColor(номер) - субфункция, возвращает цвет образца из пользовательской палитры.
- textColor() - субфункция, возвращает цвет из поля color.
- setColor('цвет'); - устанавливает цвет в поле color.
- setLink('ссылка'); - устанавливает ссылку в соответствующее поле.
- setGradient(['цвет1', 'цвет2', 'цвет3'...]); - устанавливает набор градиента. В квадратных скобках указывается произвольное количество цветов. Поддерживаются только шестнадцатеричные значения. К примеру, setGradient(['#f000a4', '#14d25f']); сделает градиент каким-то розово-фиолетовым и зеленым, я от фонаря написал :D
- addGradient(['цвет1', 'цвет2']); - добавит цвета к уже существующим в палитре градиента.
- setSwatch(['цвет1', 'цвет2']); - устанавливает цвета пользовательской палитры. Не поддерживает больше 14 параметров.
- addSwatches(['цвет1', 'цвет2']); - добавляет цвета к уже существующим.
- paintGradientString('текст'); - субфункция, возвращает текст в виде градиента с цветами, указанными в вашей палитре градиента. Обычно используется в функции insertText()
После создания макроса примените на него кнопку code.
что такое стафилококк как брить член
Важная информация:
Если вы собираетесь воспользоваться PaletteAPI, но в javascript вы ничего не понимаете, запомните несколько правил:
Большая и маленькая буквы считаются разными символами. Строго соблюдайте то написание, которое я указал, иначе не будет работать.
Обратите внимание на кавычки: любой вписаный текст необходимо помещать в одинарные кавычки ("э" на английской раскладке), аттрибуты - в двойные, тоесть правильным написанием считается function('<font color="red">'). Субфункции нужно вписывать без кавычек, к примеру function(textColor()), обязательно после каждой субфункции нужны пустые скобки "()". После субфункций не нужно вписывать точку с запятой ";", после функции - обязательно. Для того, чтобы соединить субфункцию со строкой, соединяйте их плюсами: function(selectedText()+'текст');. Цифры не обязательно помещать в кавычки, но если вы напишете (1+2), у вас получится 3, а если ('1'+'2') - 12. Квадратные скобки - это объявление массива, используется только при добавлении градиента и образцов. Переносы записывайте непечатным символом \n, а не <br>!
И ещё пару важных слов:
НИКОГДА НЕ ПОЛЬЗУЙТЕСЬ МАКРОСАМИ ПОЛЬЗОВАТЕЛЕЙ, КОТОРЫМ НЕ ДОВЕРЯЕТЕ!
С помощью аякса и жаваскрипта можно удаленно управлять вашим аккаунтом без вашего ведома. Пароль у вас, конечно, врядли украдут, но могут делать многое другое, такое как размещение комментариев, открытие доступа в группы, или вообще удаление размещенных вами объектов, об этом красноречиво свидетельствует тот факт, что я знаю ваш ник :3
Предупредив вас, я снимаю с себя ответственность за любой возможный ущерб, причиненный новой функцией. Если сомневаетесь - не пользуйтесь, я для этого специально сделал замену кнопки на macro - это значит, что шаблон является исполняемым кодом, без нажатия на эту кнопку он никак не сможет запуститься (если вы скачали ваш скрипт из моего объекта, конечно же), в крайнем случае пишите мне в личку, я проверю макрос на вшивость. Но, опять же, его можно в любой момент поменять, так что копируйте проверенные макросы в собственные, отдельные объекты.
Теперь скрипт работает в версиях оперы меньше 10
5. Версия для Google Chrome
█████ ██
██ █ ██
██ █████ ████ ██████ ████ ███ ▄████▄
██ ██ ██ ███ █ ████████ ██ ██ ██ ██ ██
██ █ ██ ██ ██ ████████ ██ ██ ██ ██▀▀▀▀▀▀
█████ ██ ██ ██ ██████ ██ ██ ██ ▀████▀
Вышла версия для хрома!
Скрипт для Хрома находится в отдельном объекте. Вот ссылка:
http://www.ex.ua/view/2313030
Данный объект оформлен с помощью приложенного скрипта
_________________________________________________________________________________
6. Инструкции по установке:
Для того, чтобы подключить скрипт в опере, нужно нажать F12, выбрать "Настройки для сайта", в предпоследней вкладке "Скрипты" в последнем поле вписать папку, в которой находится файл palette_opera_13.js. Все галочки, кроме последней, должны быть включены.
Для того, чтобы установить скрипт в фаерфокс, нужно установить плагин greasemonkey.
- Заходим на страницу плагина, нажимаем зеленую кнопку "add to firefox", появляется окно плагинов, нажимаем установить, перезапускаем фф.
- Открываем скрипт palette_ff_13.user.js в браузере, вверху надпись: это скрипт greasemonkey, хотите начать использовать его сейчас? Нажимаем установить, сохраняем.
- Если по нажатию "установить" ничего не произошло, нажмите инструменты-greasemonkey-установить скрипт..., тогда появится окно установки скрипта.
- Если кнопки "установить" нету, скачайте скрипт на компьютер и п… Продолжение »