forked from BufferOverflowx86/JSTypography
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreadme.txt
235 lines (218 loc) · 22 KB
/
readme.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
Лицензия: https://opensource.org/licenses/MIT
Страника примера: http://bufferoverflowx86.github.io/jstypograph.html
JSTypography — скрипт, который вы можете скачать, установить на свой сайт и привязать к любой форме ввода. К примеру, к форме ввода сообщений на форумах, добавления новостей, статей, рассказов и т. п. Так же, вы можете скачать страницу примера типографа и обрабатывать тексты без подключения к интернету. Размер входного текста не ограничен, что немаловажно для книг. Имеет три режима работы — обработка нормального текста, форумного сообщения и текста с HTML-разметкой. Так же типограф поддерживает английские правила типографики. JSTypography имеет большой набор правил обработки, который совершенствовался в течение не одного года. Он значительно превосходит по возможностям большинство типографов, включая типограф от Лебедева, и схож по возможностям с типографом от Eugene Spearance.
JSTypography предлагается в 2-х видах.
jstypography.js — полноценный скрипт, предназначен для изучения и редактирования.
jstypography_minified.js — сжатый вариант скрипта для установки. Не отличается по функционалу, создан для уменьшения трафика.
Возможности:
При нажатии кнопки «Типографировать» ваш текст приведётся к типографскому виду. Основные возможности:
1) Возможность установки на любой сайт и привязки к любой форме ввода, к примеру, к форме ввода сообщения на форуме.
2) Неограниченный размер обрабатываемого текста.
3) Замена "Кавычек и "вложенных и даже "дважды вложенных"" кавычек" на «ёлочки», „лапки“ и ‚коготки‘.
4) Расстановка отступов или тегов <p>. Длина отступа равна четырём пробелам. Присутствует механизм для преобразования пробелов в понятный для html вид.
5) Замена дефисов на тире, где надо.
6) Замена дробей на соответствующие символы.
7) Расстановка неразрывных пробелов.
8) Внутри тегов <untypo> текст экранируется от обработки.
9) Простановка отсутствующих на клавиатуре символов с помощью псеводфункций.
Функция УДАР(буква) — поставит на букву ударе́ние.
Функция СТРЛ(Направление) создаст символ стрелки. Направления: В,Н,П,Л,ЛП,ВН. Так же на стрелки заменяются ->, <-, <->
Функция ГРАД(цифра) для указания градусов.
Функция ПАРА(Римская/арабская цифра) для параграфа
Функция ЕВРО(цифра) заменится на символ евро.
Функция ФУНТ(буква) заменится на символ фунта.
Функция ДЮЙМ(буква) заменится на дюйм.
Функция КОРН(буква,цифра) подставит корень.
Функция ИНТГ(буква,цифра) заменится на интеграл.
Функция ГРЕЧ(лат.буква) заменит букву из латинского алфавита на наиболее подходящую букву из греческого алфавита (которые часто используюся в математических формулах).
Функция ВЕРХ[0123456789+-=()ni] переведёт содержимое в верхний индекс.
Функция НИЖН[0123456789+-=()] переведёт содержимое в нижний индекс.
Все вышеописанные псевдофункции кроме СТРЛ, ГРЕЧ, ВЕРХ и НИЖН работают и без аргументов. В таком случае они заменятся на символ. К примеру, записи ГРАД(45) и 45ГРАД() идентичны и заменятся на 45°.
Имена функций в английской обработке: ACNT, ARRW, DEGR, SECT, EURO, PUND, INCH, SQRT, INTG, GREK, SUPS, SUBS соответственно.
10) Автопростановка пробелов после знаков препинания, где присутствует однозначность.
11) Исправление последовательности из двух или четырёх точек на многоточие.
12) (tm), (r), (c) заменятся на ™, ® и ©.
13) Вывод как в виде готовых символов, так и в виде html-кодов.
14) Поддержка как русских, так и английских правил типографики.
15) Возможность обработки лишь выделенного текста.
16) Операции с числами:
2x2 заменяется на 2×2;
3^238 заменяется на 3²³⁸;
+/- заменяется на ±;
!= заменяется на ≠;
~= заменяется на ≈;
>=, <= заменяется на ≥, ≤;
Некоторые дроби заменяются на соответствующие им символы.
17) Замена ' на апостроф.
18) Исправление пунктуации, простановка дефисов в часто встречающихся ошибках.
19) Привязка сокращений, предлогов и т. п.
20) Удаление повторяющихся слов.
21) Выделение из текста ссылок и почтовых ящиков (только в html).
22) И множество других мелочей.
Скрипт может не обрабатывать текст внутри кодов [code], [quote], <pre>, <script>, <style>, и <untypo>, не бьёт ссылки и html-коды. Скрипт не скрипт не может поставить знак тире внутри диапазонов и указаний пути: 3–5 яиц, Москва—Санкт-Петербург. Использование -- в таких случаях подразумевается. Исключениями являются диапазоны дат и времени (1999–2001 гг., XX—XXI вв., 14–24 сентября, 11:30–13:00, в апреле—мае), т. к. здесь всё однозначно.
Общая инструкция по установке:
1. Загрузите один из двух вариантов скриптов (к примеру, jstypography_minified.js) на сайт.
2. Разработайте конфиг для типографа.
Пример (все значения даны по умолчанию):
var config = {
// Режим работы
// text - обработка простого текста.
// forum - обработка форумной формы ввода. Отличается от текстового распознаванием bb-кодов.
// html - обработка как html-текста.
mode: 'text',
// Замена переносов на тег <br>. Работает вне зависимости от режима.
br: false,
// Замена символов (™, ®, ©).
chars: true,
// Обработка абзацев. Создаёт красную строку для режимов text и forum, и <p> для html.
tabs: true,
// Обработка кавычек.
quotes: true,
// Глубина кавычек.
// 1 - только «ёлочки».
// 2 - ещё и „лапки“.
// 3 - ещё и ‚коготки‘.
quotesLevel: 2,
// Язык.
// "rus" - русский.
// "eng" - английский.
lang: "rus",
// Выделение ссылок тегом <a>.
href: true,
// Обработка функций. К примеру, ГРАД(36.6).
functions: true,
// Обработка пробелов.
spaces: true,
// Обработка тире.
dashs: true,
// Обработка заголовков.
h1: true,
// Обработка неразрывных пробелов.
nbsp: true,
// Удалять тег <untypo> после обработки.
clearUntypo: false,
// Заменять красную строку в режиме text на " "
// (позволяет правильно обработать на некоторых форумах).
nbsptabs: false
},
Чтобы оставить значение по умолчанию, достаточно исключить его из конфига.
3. Создайте объект типа JsTypograph и передайте config.
Пример:
var typograph = new JsTypograph(config);
В случае, если config не передать, все значения будут приняты по умолчанию.
4. Привяжите типограф к форме ввода и установить его вызов при нажатии какой-нибудь кнопки.
Пример:
typograph.addTextArea(document.getElementById('targetTextArea'));
typograph.addButton(document.getElementById('targetButton'));
Чтобы привязать запуск типографа к другому событию, необходимо сделать это вручную. Типографирование привязанных форм ввода, необходимо вызвать метод typograph.typography();
Список полей и методов объекта JsTypograph:
Поля:
config
Хранимое значение конфига. Можно присваивать поля конфига напрямую, например t.config.br = false;. Не рекомендуется присваивать значение самого поля config, вместо этого нужно использовать this.setConfig
Методы:
void setConfig(config)
Задаёт новое значение конфига. Если какое-то поле не передано, использует предыдущее значение из текущего конфига.
string typographyText(text, typobegin = true, typoend = true)
Обрабатывает текст и возвращает обработанный вариант. typobegin и typoend используются в случае, если обрабатывается часть текста и обозначают, что не надо задавать отступы.
void typographySelection(textarea)
Обрабатывает выделенный текст в указанном поле ввода.
void typography()
Обрабатывает выделенный текст во всех привязанных формах ввода
void addTextArea(textarea)
Привязывает форму ввода к типографу
void removeTextArea(textarea)
Отвязывает форму ввода от типографа
void addButton(button)
Привязывает кнопку для запуска типографа. Накладывает this.typography на onclick
void removeButton(button)
Отвязывает кнопку для запуска от типографа. Убирает this.typography на onclick
Инструкция по установке на форум Ucoz (включены все опции кроме <br>, символьный режим, замена неразрывного пробела на строку перед отправкой):
1. Зайдите в Панель Управления → Редактор страниц → Файловый менеджер.
2. Выберите папку для загрузки скрипта, и загрузите на сайт файл jstypography_minified.js. После загрузки щёлкните по имени файла, и появится ссылка на него. Скопируйте её.
3. Зайдите в Панель Управления → Редактор страниц → Управление дизайном модуля → Форум → Форма добавления сообщения.
4. В начале кода добавьте строчку:
----------------------------------------------------------------------------------
<script type="text/javascript" src="http://your_site/jstypography_minified.js"></script>
----------------------------------------------------------------------------------
Где http://your_site/jstypography_minified.js — ссылка на загруженный на шаге 2 скрипт.
5. Найдите текст:
----------------------------------------------------------------------------------
<input style="width:110px;" id="frF17" class="postReset" type="reset" value="Отменить" />
----------------------------------------------------------------------------------
Сразу после него добавьте пробел и текст кнопки:
----------------------------------------------------------------------------------
<input style="width:110px;" type="button" id="typograf" value="Типограф"/>
----------------------------------------------------------------------------------
6. В конце всего кода добавьте код:
----------------------------------------------------------------------------------
<script type="text/javascript">
var typograph = new JsTypograph({
mode: 'forum',
nbsptabs: true
});
typograph.addTextArea(document.getElementById('message'));
typograph.addButton(document.getElementById('typograf'));
</script>
----------------------------------------------------------------------------------
Опционально: Установка кнопки <untypo> (при нажатии обрамляет выделенную область тегом <untypo>, внутри которого типографирование не производится).
Если опция «Не использовать визуальный редактор комментариев» ВКЛЮЧЕНА:
7. В конце всего кода добавьте строчку:
----------------------------------------------------------------------------------
<script type="text/javascript">$('span#bc18').after('<span style="padding-right:1px;"><input type="button" title="Untypo" value="untypo" onclick="simpletag(\'untypo\',\'\',\'\',\'message\',\'\',true)" class="codeButtons" id="untypo" /></span>');</script>
----------------------------------------------------------------------------------
Если опция «Не использовать визуальный редактор комментариев» НЕ ВКЛЮЧЕНА:
7. В конце всего кода добавьте строчку:
----------------------------------------------------------------------------------
<script type="text/javascript">$(window).bind("load",function(){$('div.wysibb-toolbar-container:last').after('<div class="wysibb-toolbar-container"><span class="wysibb-toolbar-btn wbb-untypo"><span class="ve-tlb-untypo btn-inner"></span></span></div>');});</script>
----------------------------------------------------------------------------------
8. Зайдите в Панель Управления → Редактор страниц → Файловый менеджер.
9. Выберите папку для загрузки картинки кнопки, и загрузите её на сайт. Со скриптом прилагается картинка для белого и чёрного фонов (untypo.png и untypo2.png). После загрузки щёлкните по имени файла, и появится ссылка на него. Скопируйте её.
10. Зайдите в Панель Управления → Редактор страниц → Управление дизайном модуля → Общие шаблоны → Таблица стилей (CSS)
11. В конце всего кода добавьте строчку:
----------------------------------------------------------------------------------
.wysibb .ve-tlb-untypo {background: url('http://your_site/untypo.png') no-repeat scroll 5px 3px;width: 20px;}
----------------------------------------------------------------------------------
где http://your_site/untypo.png — ссылка на картинку кнопки, полученная на шаге 9.
Инструкция по установке на forum2x2 phpBB2 (включены все опции кроме <br>, символьный режим):
1. Зайдите в Панель Управления → Модуль → HTML & JAVASCRIPT → Управление кодами Javascript → Создать новый Javascript
2. Скопируйте в открывшееся окно содержимое jstypography.js. Выберите расположение «На всех страницах». Примените изменения.
3. Зайдите в Панель Управления → Оформление → Шаблоны → Запостить & Личные сообщения → posting_body. В конец кода добавьте:
----------------------------------------------------------------------------------
<script type="text/javascript">
$('input[name=post]').after(' <input class="mainoption" type="button" id="typograph" name="typograph" value="Типограф" tabindex="9" accesskey="t" />');
$(window).bind("load",function(){
var typograph = new JsTypograph({
mode: 'forum'
});
typograph.addTextArea($(".sceditor-container textarea").get(0));
typograph.addButton(document.getElementById('typograph'));
});</script>
----------------------------------------------------------------------------------
4. Повторите ту же операцию для Панель Управления → Оформление → Шаблоны → Общие настройки → viewtopic_body.
Опционально: Установка кнопки <untypo> (при нажатии обрамляет выделенную область тегом <untypo>, внутри которого типографирование не производится).
5. Зайдите в Панель Управления → Оформление → Шаблоны → Запостить & Личные сообщения → posting_body.
6. Найдите строку (эта строка появляется в коде на шаге 3):
----------------------------------------------------------------------------------
var typograph = new JsTypograph({
mode: 'forum'
});
typograph.addTextArea($(".sceditor-container textarea").get(0));
typograph.addButton(document.getElementById('typograph'));
----------------------------------------------------------------------------------
После неё, добавьте:
----------------------------------------------------------------------------------
$('a.sceditor-button-fahide').after('<a class="sceditor-button sceditor-button-untypo" unselectable="on" onclick="bbcode(\'<untypo>\',\'</untypo>\');" title="Запрещает типографскую обработку"><div unselectable="on">Запрещает типографскую обработку</div></a>');
----------------------------------------------------------------------------------
6. Повторите ту же операцию для Панель Управления → Оформление → Шаблоны → Общие настройки → viewtopic_body.
7. Загрузите на любой хостинг (к примеру http://www.servimg.com/, где вы регистрируетесь при регистрации сайта) картинку кнопки. Со скриптом прилагается картинка для белого и чёрного фонов (untypo.png и untypo2.png). Сохраните полученную ссылку.
8. Зайдите в Панель Управления → Оформление → Картинки и цвета → Цвета → Каскадная таблица стилей CSS.
9. В конце всего кода добавьте строки:
----------------------------------------------------------------------------------
.sceditor-button-untypo div {
background: url('ссылка') !important;
}
----------------------------------------------------------------------------------
где ссылка — ссылка на полученную на шаге 7 картинку.
Большая просьба, по всем вопросам, пожеланиям, найденным ошибкам пишите на ящик buffer.overflow.x86(собака)gmail(точка)com.
В случае желания самостоятельно исправить код Типографа, вы можете отправить pull-request.
© Даниил Ерошенко «BufferOverflow» <buffer.overflow.x86(собака)gmail(точка)com>, 2018-2019 год