
Извечный квест написателя текстов на HTML.
Самые популярные товары с Али по лучшей цене:
Аккумулятор HR06 (АА) 2700 mAh 480 руб.
Автомобильный диагностический сканер 640 руб.
Мужской кошелёк с RFID-блокировкой 427 руб.
Извечный квест написателя текстов на HTML.

Как солнце встаёт,
Знает не всяк муравей.
Лишь любопытный...
Сам квест дословно звучит так: «Я не знаю HTML, но писать пост должен на нём. Что мне делать, если я категорически не желаю изучать HTML, ибо западло?»
Поскольку всё на свете меняется, кроме человека, сей квест будет актуален всегда. И каждый раз его как-то надо пройти. Причём самый простой и очевидный совет (да выучи уже наконец этот пяток тегов форматирования текста - абзаца, перевода строки, оформления списками, выделения цветом, болдом, либо как-нибудь ещё) сразу отвергается юзером по религиозным соображениям.
Ну нет так нет - оскорблять чувства верующих себе дороже.
Да, и «простой и очевидный совет» ещё тем нехорош, что написательство сразу на уровне кода (то есть в форме той или иной CMS) создаёт предпосылки для появления опечаток. В стране раздолбанных клавиатур с хреново срабатывающими или залипающими кнопками даже идеально грамотный человек способен невзначай породить ужасное.
А творить непотребство некошерно.
И, стало быть, квест делится на две самостоятельные части:
- Написание текста в редакторе с проверкой орфографии.
- Конвертирование текста в HTML.
Смешно сказать, но в реальном мире не нашлось готового софта, позволяющего обе эти части Марлезонского балета станцевать силами одной тулзы.
Да, мы все знаем, что всеми любимый Word, Open Office, Libre Office, Google Docs, и прочие редакторы с проверкой орфографии по словарю, замечательно ловят опечатки. Позволяя при этом задействовать пользовательский словарь, ежели в текстах много нишевого жаргона, и словарь общих терминов не сильно помогает. Но с экспортом в HTML у них большие проблемы - результирующий код всё едино приходится править руками.
Что, как мы помним, вступает в конфронтацию с граничными условиями задачи - пользователь не знает, да и не хочет знать HTML.
Как народ выкручивается ?
Местный автор по разным поводам и в разное время контактировал со многими топовыми блогерами, пишущими обильно и разнообразно (что требует знания HTML в объёме несколько большем, нежели на уровне пяти тегов). И каждый раз, проявляя любопытство в рамках рассматриваемого сегодня квеста, очень удивлялся - никто из них не пишет свои вирши прямо в коде.
Да, все эти многочисленные экслеры и прочие звёзды онлайна ведут себя в точности так же, как и простые смертные - сначала сочиняют текст в умном редакторе того или иного офисного приложения с функцией проверки орфографии, а потом сохраняют текст в HTML формате. И применяют ту или иную тулзу по очистке HTML кода от разнообразной хрени, в изобилии там имеющейся. Кто видел код, вылезший из-под Ворда, тот сразу всё поймёт.
Либо отнимают собственно текст у Ворда, и через буфер обмена отдают какому-нибудь визуальному редактору, отобранному из всего многообразия такого рода софтин по критерию чистоты кода на выходе.
Иногда последовательно используются более чем две-три тулзы, что уже смахивает на повод для анекдота. Но такова се ля ви - к чему человек привык, то и будет использовать остаток жизни.
Объективности ради стоит признать, что есть довольно продвинутые и интересные очищальщики HTML кода, с пользовательскими правилами на регулярках. То есть настраиваются под себя, а потому универсальны, и многое умеют.
Но всё равно, имеем парадокс.
Он состоит в том, что в век чуть ли не искусственного интеллекта, когда космические корабли бороздят просторы Большого театра, а автомобильчики ездят по дорогам общего пользования сами по себе, без привлечения водилы, нету простой и удобной тулзы, позволяющей пройти наш квест в один этап, легко и просто.
Каждый вынужден колхозить своё решение :)

Колхоз Мастера Ласто.
Он совсем простой и без изысков. Некоторое число интересующихся просили в тот колхоз пустить, так что инструкция по вступлению такая.
Сам местный автор, как приверженец минимализма, пользует совсем простой текстовый редактор, в котором можно лишь набирать текст. Это Q10 в портабельном исполнении, хрен знает сколь древней версии. Не обновлялся никогда.
Там, естественно, нет никакой проверки орфографии, ни единой кнопочки, и ровно ноль панелек. Только буковки, и сам написатель этих буковок по эту сторону экрана. Над концепцией можно ржать, но автор "Игры престолов" пользуется примерно такой же штукой (даже ещё более древней), и ему это ничуть не мешает. Стало быть, и нам можно.
Стиль набора исходного текста прост: абзацы отделены пустой строкой. Не переводом строки, а именно пустой строкой (которая формально состоит из пары переводов подряд).
Первая непустая строка текста потом станет названием статьи.
Три последующих непустых строки впоследствии отформатируются как хайка - таков обычай написания постов в местном колхозе. Это примерно как благодарность за хлеб наш насущный перед чинною трапезой приятельствующих самураев - без хайки тут никак нельзя.
Если хочется в тексте организовать подзаголовок, перед строкой малюется знак равенства. Вся эта строка потом выделится тегом заголовка H3.
Ссылка, ежели будет нужна, пишется в тексте прямо в виде абсолютного адреса. Потом обернётся соответствующим тегом самостоятельно.
Это все правила.
Далее готовый текст копипастом переносится в форму донельзя простой тулзы, которая создаёт из не форматированного текста HTML код поста.
Сама тулза не является секретом - в папочку Блоговой Наны селим файл под любым именем и в расширении .php - код этого файла таков:
<?php /* Выше этой строки в файле ничего не должно быть */
$_s['template']['form_editor']='
<div id="editor">
<form
method="post"
action="===action==="
>
===text'.':textarea===
===submit'.':input_submit===
</form>
</div>';
$_s['title']='Конвертировать текст в HTML код';
$data=get_post_data('inp','users');
$inp=isset($data['inp']) ? $data['inp']: '';
$_s['content']=
h2('Исходный код:').
tpl_builder(
$_s['template']['form_editor'],
array(
'===action===' => $_s['loc']['here'],
'===text===' => array(
'===name===' => set_sign('users','inp'),
'===title===' => 'Исходный код:',
'===text===' => $inp,
),
'===submit===' => array(
'===name===' => set_sign('users','submit'),
'===value===' => 'Конвертировать текст в HTML',
'===class===' => 'blue',
),
)
);
$start=' <p>';
$stop='</p>';
$cont=' <br>';
$bold=array(
'on' => '<h3>',
'off' => '</h3>'
);
$inp=explode($oslen,trim($inp));
$out=$null;
foreach ($inp as $i => $v) {
$inp[$i]=$v=trim($v);
if ($v!='') {
$w=$null;
foreach (explode(' ',$v) as $u) {
$w[]=this_url_is_ok($u) ? '<a href="'.$u.'" target="_blank" >Link</a>': $u;
}
$v=implode(' ',$w);
if (preg_match_all('~^=(.+)$~',$v,$n)) $v=$bold['on'].trim($n[1][0]).$bold['off'];
if (isset($inp[$i-1]) and $inp[$i-1]!='') $v=$cont.$v;
$out[]=$v;
}
}
unset($inp);
$titul=count($out) > 0 ? array_shift($out): null;
$hokky=count($out) > 0 ? '
<div style="clear:both;"></div>
<div style="float:right;margin-right:25px;">
<br>'.array_shift($out).'
'.array_shift($out).'
'.array_shift($out).'
</div>
<div style="clear:both;"><br></div>
':'';
$out=str_replace(
array(
'“','”',$stop.$oslen.$oslen.$start.$cont,
),
array(
'«','»',$oslen.' '.$cont,
),
$start.trim(implode($stop.$oslen.$oslen.$start,$out)).$stop.$oslen
);
if (preg_match_all('~'.$start.$bold['on'].'([^<]*?)'.$bold['off'].$stop.'~Usi',$out,$n)) {
foreach ($n[1] as $t) {
$out=str_replace(
$start.$bold['on'].$t.$bold['off'].$stop,
$oslen.$bold['on'].$t.$bold['off'].$oslen,
$out);
}
}
$_s['content'].=
h2('Синтезированный код поста:').
preg_replace(
'~<form([^>]+)>~Usi',
'<form onsubmit="return false;">',
tpl_builder(
str_replace('===submit'.':input_submit===','',$_s['template']['form_editor']),
array(
'===action===' => $_s['loc']['fold'],
'===text===' => array(
'===name===' => set_sign('users','html'),
'===title===' => 'HTML код:',
'===text===' => $titul.$hokky.$out,
),
)
)
).($titul==null ? '': h2('Внешний вид:').$titul.$hokky.$out);
function this_url_is_ok($u) {
if (preg_replace('~(^https?\:\/\/)~is','',$u)==$u) return false;
$u=preg_replace(array('~(^https?\:\/\/)~is','~(^www\.)~is'),'',$u);
return (preg_match('~^([a-zA-Z0-9_\-\.])+(\.([a-zA-Z0-9\/\_\~\?\+\-\=\&\%\.\,\#\:])+)+$~',$u)) ? true: false;
}
/* Ниже этой строки в файле ничего не должно быть. */ ?>
Примечание.
Поскольку в браузерах на основе движка Гугл Хрома предусмотрена проверка орфографии прямо в текстовых полях форм, нет необходимости использовать внешний текстовый редактор офисного уровня. Все опечатки и ошибки подчеркнутся прямо в тексте верхнего поля формы.
Как это работает?
Предельно элементарно - демо.
Можно пихать в форму свой контент.
Другие статьи категории «Маленькие лайфхаки»
Вся правда о распитии водки напёрстками.

Локальный web-сервер на платформе Андроид.

Что делать, если нужный сайт заблокирован Роспотребнадзором.

№ 3К Мастеру Горди и не только.
Если заметили, то форма добавления страницы из первого коммента тоже перевод строки после абзаца не признаёт.
Переделал немного код местного автора под себя - четыре строки сначала под четверостишье, да тег ‹br› удалил.
Правда в коде не хватает ‹h3›, ‹h4› и ‹ul›, но это уже будет наглостью с моей стороны. С ‹hx› справлюсь, а вот со списками - нет.
Сейчас, действительно, ситуация особого смысла не имеет, но что уж сложилось исторически, то не вытравить дустом.
№ 6Все индивидуально...
№ 10Хорошая штучка.
Списков, красной строки, и пошло-поехало.
Вариант с пятком тегов, на мой взгляд лучше все-таки. Он заставляет развиваться.
Впрочем, каждому - свое.
Ну а потом уж вебмастер его доводит до ума.
Возможно, уже в форме редактора поста.
Там будут кнопки подстановки разных тегов.
№ 12Вопрос по редактированию
Вопрос к автору - можно ли в редактор вставить конструктор?
Что я имею ввиду?
Нажал на кнопку (конструктор) - появилось 3 поля для заполнения.
1 - название тега (буква или слово)
2 - начало тега
3 - конец тега
Сохранили - получили новую кнопку в редакторе.
Выделили текст, нажали на созданную кнопку, текст обернулся созданными ранее тегами.
На мой взгляд удобно в связи с появлениями разного рода микроразметок.
Возможно ли такое улучшение в будущем?
Насколько помнится (давно это было), так называемый «подстановщик тегов» изначально есть не что иное, как какой-то плагин для (видимо) вордпресса на джаве, в котором всего-то несколько массивов, описывающих свойства кнопок, и простенькие функции, дарующие тем кнопкам жизнь.
Кому надо, редактирует те массивы под свою задачу.
Или дополняет их нужными ему записями.
Поскольку сами кнопочки нарисованы (как вариант, отскринены с любой подходящей по интерфейсу проги), внешний администратор или конфигуратор массивов в джавовском коде ничего не даст - кнопочки-то кто при этом рисовать будет?
Всегда, как поборника чистоты html-кода, удивляло, зачем, если есть тег параграфа - ‹р›, нужно добавлять отбивку между параграфами при помощи тега ‹br›. Проще ведь набрать текст, и отделить абзацы 1-3 тегами ‹br›?
Понятно, что для тех, кто давно пишет в паутине, когда еще не было повального увлечения таблицами стилей и был голый html, ‹br› был панацеей, и через энное количество лет переписывать множество постов - труд по сути никчемный :)
Но все равно Мастеру респект, поколению ЕГЭ ой как пригодится :)