Плагин WebEdit для Notepad++

Установка плагина WebEdit

Удобный плагин, который добавляет на панель кнопки для вставки html-тэгов. Чтобы не вводить дивы, параграфы, списки и прочее, нужно просто выделить нужный текст и нажать мышкой на нужную кнопку. Значительно упрощает ввод, правку html-кода, при этом кнопки можно настроить по своему вкусу и предпочтениям в настройках плагина.

Открываем редактор, выбираем следующею команду: Меню → Плагины → Plugin Manager → Show Plugin Manager, в открывшемся окне находим название плагина, ставим галочку, жмём install, соглашаемся на перезагрузку программы.

После перезагрузки, в Панели инструментов появляются различные иконки, назначение которых говорит само за себя, тут никаких особых пояснений не требуется.

Панель инструментов с иконками плагина WebEdit

Изображение 1. Панель инструментов с иконками плагина WebEdit

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

То есть, если у вас готовый текст скопированный откуда-то, то проще применять второй способ, если же вы сначала набираете текст в редакторе, как сейчас это делаю я, то проще ... то тоже проще второй способ. Первый способ, мне вообще трудно представить, так как если вы делаете сначала разметку, то гораздо удобнее это делать с использованием плагина Emmet, чем тыкать иконки, например, для варианта 1 достаточно набрать .>h1+p+p>span.^p, хотя всё относительно, нужно пользоваться чем удобнее.

<!-- Вариант 1 -->
<div class=""><h1></h1><p></p><p><span class=""></span></p><p></p></div>
<!-- Вариант 2 -->
<p>Разметка этой статьи, выполнена при помощи плагина <strong>WebEdit</strong></p>

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

Модификация плагина WebEdit

В случае если вы решили настроить плагин, как говорится "под себя", сделать это очень просто, что мне, например, очень нравится.

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

Иконки являются рисунками в формате bmp и имеют размеры 16×16 пикселей (при этом, размеры эти не обязательные, я ставил и 14×14 и 17×17) следовательно, вы можете, как найти иконки в интернете, так и создать сами в любом редакторе изображений.

Для редактирования команд и смены иконок предназначен файл WebEdit.ini, открыть его можно непосредственно из редактора Меню – Плагины – WebEdit - Edit Config.

Первым делом, чтобы у нас ничего «не сломалось» выделяем весь текст открытого файла, создаем новый файл и вставляем в него скопированный текст. Затем сохраняем новый файл, где вам удобнее с любым названием, сделаем мы это для того чтобы была возможность "откатиться назад" и сделать всё «как было раньше». Думаю, как это сделать понятно, делаем всё тоже самое, только в обратном порядке, из сохраненного файла всё копируем в WebEdit.ini.

Файл WebEdit.ini имеет следующую структуру, сначала перечислены команды - заголовок [Commands] и далее строчки, примерно такого вида …

[Commands]
&A=<a href="">|</a>
Якорь=<a name="">|</a>
Div &Class=<div class="">|</div>
Div &Id=<div id="">|</div>
&class= class="|"
&id= id="|"
Style=<style>|</style>

… и так далее.

Затем следует список иконок - заголовок [Toolbar] и далее строчки, примерно такого вида …

[Toolbar]
1=a.bmp
2=jk.bmp
3=dc.bmp
4=di.bmp
5=class.bmp
6=id.bmp
7=style.bmp

… и так далее.

Обратите внимание, что все иконки пронумерованы, а команды нет, однако должно быть полное совпадение. Если скажем, вы хотите вставлять тег <style></style>, и в списке команд он у вас введен седьмым по счету, то и в списке файлов с иконкой должен быть под седьмым номером по счету, а не скажем двадцать седьмым по счету с цифрой 7=style.bmp

Сам вид команд, имеет следующее значение, до знака равенства = это то, что будет отображаться в редакторе при наведении на иконку указателя мыши, своеобразная подсказка для вас же, о том какой тег будет вставлен при нажатии на эту иконку.

После знака равенства = указывается сам тег, который должен быть вставлен при нажатии на иконку, в принципе это необязательно должен быть тег, любой набор символов который вам необходим, скажем так.

Возьмем для примера тег, которого нет в стандартной установке плагина - <a name="">|</a>.

В списке команд [Commands] он у нас имеет вид: Якорь=<a name="">|</a> и расположен вторым по счету, следовательно, файл с картинкой также должен быть вторым по счету в списке иконок [Toolbar], в примере он имеет вид: 2=jk.bmp.

Теперь о том, где должны быть файлы с рисунками иконок, а быть они должны в той же папке (каталоге, директории) где и файл WebEdit.ini. Так как в зависимости от способа установки и на разных ОС месторасположение файла может отличаться, приводить здесь какой-либо путь к файлу не имеет смысла.

Тем более, что узнать куда нужно помещать файлы с картинками иконок, очень легко с помощью самого редактора, а именно, когда у вас открыт файл WebEdit.ini можно просто посмотреть путь в шапке редактора. Второй способ это навести курсор на вкладку файла, и нажать ПКМ (правая кнопка мыши), в открывшемся контекстном меню выбрать пункт Полный путь к файлу в буфер. Затем нажать вставить, в любом открытом документе, чтобы посмотреть путь к папке, куда следует поместить файлы с рисунками иконок.

Вот собственно и всё.

P.S.

Не забывайте после того как внесли нужную вам команду сохранять файл WebEdit.ini и перезапустить редактор Notepad++.

При этом скорее всего, иконка попадет у вас в конец Панели инструментов, перемещать куда вам нравится, а также удалять ненужные иконки можно с помощью плагина настройки Панели инструментов, которой находится в Меню → Плагины → Customize toolbar → Customize ....

Если у вас такой плагин не установлен, то нужно это сделать, он позволяет настраивать Панели инструментов, как устанавливать объяснять думаю излишне ... а ладно напишу, мне не долго, а кому-то может пригодится. Идём в файловый менеджер, Меню → Плагины → Plugin Manager → Show Plugin Manager, в открывшемся окне находим название плагина, ставим галочку, жмём install, соглашаемся на перезагрузку программы.