Извечный квест написателя текстов на HTML.

Самые популярные товары с Али по лучшей цене:

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

19 мая 2015, 19:00

Извечный квест написателя текстов на HTML.

Извечный квест написателя текстов на HTML.

Как солнце встаёт,
Знает не всяк муравей.
Лишь любопытный...

Сам квест дословно звучит так: «Я не знаю HTML, но писать пост должен на нём. Что мне делать, если я категорически не желаю изучать HTML, ибо западло?»

Поскольку всё на свете меняется, кроме человека, сей квест будет актуален всегда. И каждый раз его как-то надо пройти. Причём самый простой и очевидный совет (да выучи уже наконец этот пяток тегов форматирования текста - абзаца, перевода строки, оформления списками, выделения цветом, болдом, либо как-нибудь ещё) сразу отвергается юзером по религиозным соображениям.

Ну нет так нет - оскорблять чувства верующих себе дороже.

Да, и «простой и очевидный совет» ещё тем нехорош, что написательство сразу на уровне кода (то есть в форме той или иной CMS) создаёт предпосылки для появления опечаток. В стране раздолбанных клавиатур с хреново срабатывающими или залипающими кнопками даже идеально грамотный человек способен невзначай породить ужасное.

А творить непотребство некошерно.
И, стало быть, квест делится на две самостоятельные части:

  1. Написание текста в редакторе с проверкой орфографии.
  2. Конвертирование текста в 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) > array_shift($out): null;
   
$hokky=count($out) > '

<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)) ? truefalse;
}

/* Ниже этой строки в файле ничего не должно быть. */ ?>

Примечание.

Поскольку в браузерах на основе движка Гугл Хрома предусмотрена проверка орфографии прямо в текстовых полях форм, нет необходимости использовать внешний текстовый редактор офисного уровня. Все опечатки и ошибки подчеркнутся прямо в тексте верхнего поля формы.

Как это работает?

Предельно элементарно - демо.
Можно пихать в форму свой контент.

Другие статьи категории «Маленькие лайфхаки»

Вся правда о распитии водки напёрстками.

Вся правда о распитии водки напёрстками. В местах компактного проживания местных аборигенов за долгие годы единения с природой спонтанно сложилась традиция — где-нибудь в конце февраля собираться на какой-нибудь затерянной в лесу охотничьей базе, дабы проветрить ружья. Раньше не получится, так как шибко холодно. А позже уже нельзя, ибо охотничий сезон закрывается.

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

Локальный web-сервер на платформе Андроид. Сегодня любой манимейкер должен испытывать неподдельный интерес к маржинальным рынкам. Ежели будет кому любопытно, местный автор обязуется про маржинальные рынки сотворить письменную восторженную оду на пяти листах, но сегодня мы про них говорить решительно не станем. А речь поведём про то, без чего к маржинальным рынкам вообще не подступиться.

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

Что делать, если нужный сайт заблокирован Роспотребнадзором. Местному автору в последнее время постоянно попадаются на глаза статьи в интернетах с воплями про 139-ФЗ, 187-ФЗ и последствия их применения. И хотя местному автору как бы глубоко наплевать на сабж, ибо местный автор по определению никак с этим сабжем не пересекается даже теоретически, но, как оказалось, все под богом ходим.
20 мая 2015, 10:59

№ 2Мало знать, надо...

Согласен с автором, но надо говорить и о том, что понимание, для чего тот или иной тег предназначен, особенно при форматировании текста, очень важно.

Всегда, как поборника чистоты html-кода, удивляло, зачем, если есть тег параграфа - ‹р›, нужно добавлять отбивку между параграфами при помощи тега ‹br›. Проще ведь набрать текст, и отделить абзацы 1-3 тегами ‹br›?

Понятно, что для тех, кто давно пишет в паутине, когда еще не было повального увлечения таблицами стилей и был голый html, ‹br› был панацеей, и через энное количество лет переписывать множество постов - труд по сути никчемный :)

Но все равно Мастеру респект, поколению ЕГЭ ой как пригодится :)
gordi
20 мая 2015, 12:36

№ 3К Мастеру Горди и не только.

Раньше ставил тег ‹br› после ‹/p›, но потом осознал, что можно стилями разделять, исправился. В Опере 12.17, что сейчас трудится как основная (есть RSS и почта встроена, работает портативно), новости от Ласто приходят с двойными переводами строки, ибо ‹/p›, а затем ‹br›.

Если заметили, то форма добавления страницы из первого коммента тоже перевод строки после абзаца не признаёт.

Переделал немного код местного автора под себя - четыре строки сначала под четверостишье, да тег ‹br› удалил.

Правда в коде не хватает ‹h3›, ‹h4› и ‹ul›, но это уже будет наглостью с моей стороны. С ‹hx› справлюсь, а вот со списками - нет.
‹br› появился вынужденно, ибо в RSS без него шла мешанина абзацев, никак и ничем не разделённых. Картина в стиле "вырви глаз", и местный автор не сумел с ней смириться.

Сейчас, действительно, ситуация особого смысла не имеет, но что уж сложилось исторически, то не вытравить дустом.
airsound
20 мая 2015, 13:47

№ 6Все индивидуально...

На нынешнем этапе без сброса в ноль параметров тегов html, которые пришли из голого html, когда о CSS еще не знали (более подробно запрос в Google - Meyer Reset), приводит к тому, что дальше в таблице стилей мы вынуждены отдельно прописывать параметры необходимым тегам. И отсюда и идут дополнительные теги типа ‹br›, но так исторически сложилось и зачастую от этого уже никуда не деться, увы...
gordi
28 мая 2015, 04:01

№ 10Хорошая штучка.

Так-то, оно возможно и удобней, но только вот всегда найдется человечек которому будет чего-нибудь в этом скриптике не хватать.

Списков, красной строки, и пошло-поехало.

Вариант с пятком тегов, на мой взгляд лучше все-таки. Он заставляет развиваться.
Впрочем, каждому - свое.
Тут первично довольно простое соображение - простой копипаст текста (прямо с экрана, без разметки) в некую форму должен порождать более-менее причёсанный HTML код.

Ну а потом уж вебмастер его доводит до ума.
Возможно, уже в форме редактора поста.
Там будут кнопки подстановки разных тегов.
Школьник Митя.
27 октября 2018, 18:57

№ 12Вопрос по редактированию

В Nano-CMS в форме редактирования документа есть удобные кнопочки, которыми собственно и можно обернуть текст в html. Даже если html для пользователя не проблема - кнопками удобнее на мой взгляд.
Вопрос к автору - можно ли в редактор вставить конструктор?
Что я имею ввиду?
Нажал на кнопку (конструктор) - появилось 3 поля для заполнения.
1 - название тега (буква или слово)
2 - начало тега
3 - конец тега
Сохранили - получили новую кнопку в редакторе.
Выделили текст, нажали на созданную кнопку, текст обернулся созданными ранее тегами.
На мой взгляд удобно в связи с появлениями разного рода микроразметок.
Возможно ли такое улучшение в будущем?

Насколько помнится (давно это было), так называемый «подстановщик тегов» изначально есть не что иное, как какой-то плагин для (видимо) вордпресса на джаве, в котором всего-то несколько массивов, описывающих свойства кнопок, и простенькие функции, дарующие тем кнопкам жизнь.

Кому надо, редактирует те массивы под свою задачу.
Или дополняет их нужными ему записями.

Поскольку сами кнопочки нарисованы (как вариант, отскринены с любой подходящей по интерфейсу проги), внешний администратор или конфигуратор массивов в джавовском коде ничего не даст - кнопочки-то кто при этом рисовать будет?

Александр
Все заметки категории «Маленькие лайфхаки»