Руководство по настройке Windows Live Writer для работы с ExpressionEngine

Бесплатная программа от Мicrosoft WLW как нельзя кстати подходит клиентам веб-дизайнеров и тем кто ведет свои дневники и хочет редактировать сайт/блог в программе подобной Word, не заходя в панель управления сайтом и не вникая в премудрости html-кодинга. Можно без труда скопировать текст из Word или другого источника в WLW и при этом получить чистый код на выходе. Руководство пишу так, как хотела бы, чтобы все остальные писали.

Блоги и системы управления сайтом (CMS), поддерживаемые Windows Live Writer:

• Wordpress.com
• Blogger
• Atom Publishing Protocol
• TypePad
• LiveJournal
• Movable Type
• Wordpress
• Wordpress 2.2+
• Community Server
• dasBlog
• Radio Userland
• Metaweblog API
• Movable Type API  (это указывается для EE)

Почему именно Windows Live Writer

У каждой программы есть минусы, но эта показалась мне наиболее приятной по интерфейсу, тем более что она будет и дальше развиваться, не без помощи плагинов, для создания которых в Microsoft предусмотрели WLW SDK. В WLW удобно создавать таблицы, здесь есть проверка русского правописания, средство для вставки одной или нескольких картинок, причем даже из буфера обмена, возможность подключения плагинов, возможность прямо в окне редактирования видеть как будет выглядеть запись на сайте. И что еще удобно: здесь можно хранить черновик как до публикации на сайте окончательной версии записи, так и просто в качестве локальной копии. Нигде в Интернете (а я прогуглила много ресурсов)  не рассматривался вопрос настройки Windows Live Writer для работы совместно с ExpressionEngine (пока встроенной поддержки ЕЕ нет). После моих первых дней работы с программой я создала небольшое руководство, которое, надеюсь, будет полезно участникам EEclub и тем, кто ищет, но не может найти. На полноту руководства я как всегда не претендую, т.к. сама совсем недавно начала пользоваться программой и далеко не всё поняла и настроила. Итак, далее речь пойдет об установке программы, связи её с ExpressionEngine, настройке полей, передаваемых по API, хитрости, которая позволяет передать корректный SEO URL при русском заголовке сообщения, о паре очень полезных плагинов и о создании Portable версии WLW,  которую можно носить на флешке – словом, о простых мелочах (а они очевидны не с первого взгляда), которые помогут быстро начать работу с программой.

Скачиваем Windows Live Writer и делаем первичные настройки WLW и EE

Я программу ставила в Windows XP Service Pack 2 (32-битная версия), поэтому ничего не могу сказать о глюках в Vista, но программа совместима с Вистой. Программа требует как минимум .NET Framework 2.0, но некоторые плагины потребуют версию 3.5, а весит эта версия около 200Мб (3 версия Framework весила в 3 раза меньше, можно обойтись ею, если не планируете кучи плагинов). Это конечно минус, но Framework нам может пригодиться и для других целей, поэтому придется смириться.

Второй существенный, но решаемый, недостаток: невозможно скачать полный дистрибутив WLW, т.е. мы можем скачать только загрузчик WLW, и далее для установки на каждый новый компьютер потребуется снова через загрузчик выкачивать программу из Internet. Выход из положения – создание портативной версии Portable WLW, о чём я тоже напишу, но чуть ниже.

Из удобного стоит отметить то, что, во-первых, файлы можно закачивать по FTP на сайт, а во-вторых, можно настроить Proxy, без чего в некоторых локальных сетях (например, у меня на работе) никак не обойтись.

Отмечу также, что каждая запись, с которой вы работали в WLW, будет доступна из меню Пуск->Документы, т.е. открывать можно сразу конкретную запись, и если это был не черновик, то она автоматически загрузится с сайта.

Мы увидели ранее, что в списке поддерживаемых систем ЕxpressionЕngine нет, но в ЕЕ есть встроенный модуль Metaweblog API и дополнительный модуль Blogger API. Что касается второго,  то его вообще не удалось заставить работать. Мы будем связывать EE и WLW c помощью Metaweblog API, но при выборе поставщика в программе WLW укажем Movable Type API. Это очень важно, потому что при выборе Metaweblog API в WLW работа будет неправильной, а подсказку я нашла в одной из тем форума ЕЕ, где кто-то тоже мучился с подобной проблемой.

Включаем Metaweblog API из панели EE

Включим Metaweblog API из вкладки Модули панели администрирования.

Откроем свойства модуля и скопируем в буфер обмена ссылку, которая нам понадобится для вставки в WLW.

Настройка полей Metaweblog API:

Поле предисловия – Extended text
Поле контента – Summary
Поле продолжения - Body

Объясню причину. Если вы на главной странице выводите записи при помощи поля Summary, а в основной части после “Читать далее” используете поле body, то мы конечно по идее должны назначить Поле предисловия – Summary, а поле контента – Body. По факту при такой настройке мы получаем два нежелательных последствия:

Поле предисловия – это то что автоматически попадает в окно Отрывок программы WLW. Это окно открывается вместе с другими дополнительными параметрами внизу экрана при нажатии клавиши F2 или если нажать стрелку справа от Даты публикации. Это окно, во-первых, очень маленькое, а во-вторых, там нельзя форматировать текст и вставлять картинки как это можно делать в основном экране. Т.е. такое поле подходит только для тех, кто в поле Summary обычно помещает не более двух-трех строк неотформатированного текста.

Вторая особенность: в WLW есть специальная кнопка “Разделить запись”, которая при неправильной настройке полей неактивна, потому что служит для разделения Поля контента и Поля продолжения, а не Поля предисловия и Поля контента.

В связи с этими особенностями надо настроить поля, как показано на скриншоте. Тогда в окошко Отрывок можно вставлять текст Extended text, а summary и body редактировать в основном окне, в визуальном редакторе, а для разделения этих полей использовать кнопку “Разделить запись”, которая станет активной после правильной настройки по скриншоту.

Кроме того, если вы вообще никогда не используете поле Extended, то можно настроить Metaweblog API так, чтобы Поле предисловия (Отрывок) и Поле ключевых слов использовались для других целей: например настроить какие-то custom-fields или установить плагин EE для мета-тегов и потом в WLW в окошки Ключевые слова и Отрывок вставлять нужную дополнительную информацию. В итоге получается, что у нас доступны для передачи по API четыре поля, не считая заголовка и его URL, который, к сожалению, формируется неявно, о чём будет упомянуто ниже.

Кстати, что я еще сделала: при настройке в Default Field Group полей Summary/Body/Extended указала, чтоб по умолчанию текст никак не форматировался (раньше у меня был тип <br/> ). Это чтоб ЕЕ не добавлял лишние обрывы строк при публикации записей из WLW – ведь в WLW мы уже получаем корректный исходный код.

Настройка WLW для связи с EE

Блоги->Добавить учетную запись блога, выбрать Другая служба блога. Ввести адрес сайта, свой логин и пароль на сайт, поставить галочку Сохранить.

 

Дальше ждать, когда вопросы задаст, ответить Да.

Проверка правописания

Не забываем после установки программы включить проверку русской орфографии

Сервис->Параметры->Орфография, Язык словаря – русский.

Одно плохо – нельзя одновременно два словаря использовать. Может сделают.

Пути хранения словарей в Windows XP:
D:Program FilesWindows LiveWriterDictionaries

Работа с картинками (пока коротко)

При использовании двух разных способов закачки картинок на сайт WLW ведет себя по-разному: при обычной закачке, если просто указали категорию картинок, картинки любой записи закачиваются в эту категорию. Если же настроена закачка картинок по FTP, то внутри общей папки картинок создается отдельная папка, в которой хранятся картинки, принадлежащие отдельной записи – некоторым это понравится, но если вы планируете одну и ту же картинку использовать в разных записях, её потом вероятно сложно будет найти. Пока поведение при FTP-закачке не регулируется.  Также в WLW есть встроенная поддержка LightBox, но он не настраивается, а распознается автоматически, если на вашем сайте есть ссылка на скрипт lightbox.js. Я пока себе не настроила, потому что у меня скрипт видоизмененный и с другим названием, т.е. пока не тестировалось (вставляю ручками в исходном коде).

Сами картинки вставляются из меню, или сочетанием клавиш Ctrl+L. По умолчанию к ним добавляется форматирование, которое редактируется в правом меню, если нажать на картинку:

• Set "Text wrapping" to "Left" (обтекание текстом -- по левому краю)
• Set "Margins" to "No Margins" (нет границ, border=0)
• Set "Borders" to "Drop Shadow" (добавлеена тень)
• Set "Link to" to "Source" (автоматически вставляется не сама картинка, а её thumbnail со ссылкой на оригинал)
• Set "Image size" to "Small" (размер картинки- маленький)
• Remove any watermark effects (водяные знаки не добавляются)

Эти настройки можно изменить, а потом нажать внизу правого меню “Сохранить параметры как параметры по умолчанию”. Но всё-таки WLW пока не позволяет гибко работать с картинками, потому что я не могу регулировать все свойства, которые автоматом прописываются для картинки. Даже после изменений на свои настройки и сохранения их по умолчанию я получаю код:

<p><img title="настраиваем свойства metaweblog API" 
style="border-right: 0px; border-top: 0px; display: block; float: none; 
margin-left: auto; border-left: 0px; margin-right: auto; border-bottom: 0px" 
height="602" alt="настраиваем свойства metaweblog API" src="$metaweblog3[8].png" 
width="635" border="0" /> </p>

У меня свойства для картинок описаны в CSS, и потому мне дополнительные параметры нужны только когда я что-то хочу поменять в свойствах по умолчанию. В итоге я захожу на вкладку Исходного кода и меняю его на код, необходимый для меня:

<p><img alt="настраиваем свойства metaweblog API" src="$metaweblog3[8].png"/> </p>

Надеюсь ситуация с более гибкими настройками картинок улучшится в будущем.

Хитрость с заголовками записей

Основная проблема при создании записи – это создание правильного адреса URL Title. Если работать непосредственно из EE, то это делается просто: существует поле записи, где я пишу полное название записи, и поле URL Title,  где я на английском создаю краткую ссылку к записи. В WLW данный вопрос решен, если используется Wordpress. Но что делать нам, когда наша система ExpressionEngine? На деле url записи формируется только один раз, а при дальнейшем редактировании записи передаются заголовок, категории, содержимое полей. URL формируется из заголовка записи, но только из английских букв и цифр. Поэтому мы создаем запись и сначала задаем для неё заголовок на английском языке, вместо пробелов в URL будет поставлено тире.

Далее мы сохраняем запись, отправляя черновик в блог. Это значит, что наша запись перешлется на сайт со статусом Closed. Вообще пока вы не доделали статью, можно постоянно отправлять запись как черновик – так удобно будет продолжить её редактирование с другого компьютера. Я её также сохраняю и на компьютере как черновик, т.е. использую и Сохранить черновик локально (Ctrl+S), и Отправить черновик в блок. Так у меня содержится 2 копии записи. Если я потом внесу изменения на другом компьютере, я открою запись из блога и еще раз сохраню её как черновик локально.

В дальнейшем при редактировании записи можно смело изменять заголовок на русский – URL уже не изменится. Мой получившийся URL Title wlw-ee.

Открытие документов и работа с ними как на сайте

Чтобы сразу создавать документ видя то оформление, которое у нас на сайте, заходим в меню Вид>Обновить тему и ждем, когда тема обновится. Переключение между своей темой и темой, которая в WLW по умолчанию клавишами Ctrl+F11.  В окне Редактирование видим только работу со своей записью (без картинок оформления), а в окне Просмотр пример всего сайта с картинками и нашей записью. Но поглюкивает. У меня, например для списков маркеры в виде картинок. У первого элемента списка маркер не показывает, почему то не показывает картинку для цитаты. Но в целом очень приятно редактировать свои записи, когда виден конечный результат, например у меня это выглядит так:

Открываем запись или из меню, или сочетанием клавиш (см. сочетания клавиш в разделе ниже). Доступен показ до 500 заголовков записи, причем можно фильтровать по названию.  Здесь же можно удалить выбранную запись из блога.

 

Черновики и Недавно опубликованные удобно открывать не из окна Открыть, а из правого меню.

Плагины Windows Live Writer

Плагины к Widows Live Writer и описание некоторых действий в программе. Text Template Plugin for Windows Live Writer - плагин позволяет создавать свои теги, длинный текст и его сокращенный ввод.

Dynamic Template

Но лучше использовать Dynamic Template Plugin, потому что он заменит многие плагины и делает клёвые вещи! Обязательно посмотрите его страничку с примерами Flash! Темплейты хранятся отдельно как файлы .wlwtemplate, в папке Application DataWLWTemplates. Вот окно плагина:

Вот например так можно вставить текст html/xml для того, чтобы показать пример кода, обычно это относится к многострочному коду, который должен интерпретироваться не как код, а как пример кода, потому что WLW преобразовывает скобки кода и пробелы некорректно, что утяжеляет вес конструкции. Выше для вставки длинного куска кода я как раз использовала темплейт, чтоб преобразовывались только скобки и не добавлялись лишние служебные символы. Создаем например новый темплейт с именем Pre xml из буфера и добавляем туда такой код:

<pre><%= HtmlEncode(xmlCode) %></pre>  

Указываем переменную Variable name это xmlCode, а тип данных Data Type многострочное окно ввода из буфера обмена Text (Multi-Line). Есть еще один вариант сделать то же самое:

<pre><%= xmlCode.Replace("<", "&lt;").Replace(">", "&gt;") %></pre>

Также плагин можно использовать для аббревиатур и акронимов, выделения текста цветом, использования любых тегов. Тегом <abbr> пользоваться не будем, потому что его IE6 не поддерживает, и он нормально вставляется только при редактировании из WLW исходного кода страницы, поэтому и для акронимов, и для аббревиатур будем пользоваться одним и тем же тегом акронимов <acronym>

<acronym title="<%= full %>"><%= term %></acronym>

Здесь уже две переменные term и full -- акроним и его расшифровка -- и обе типа Text (однострочные). Например, вот эта аббревиатура выделена тегом акронима и при наведении курсора покажет расшифровку ACM.

По умолчанию у акронима нет какого-то особого форматирования. Чтобы акроним как-то выделялся из текста, опишу для него такие свойства (русские пояснения копировать нельзя, т.к. русский в CSS несовместим с IE):

acronym{
color:#7E0202; //цвет как у заголовков сообщений при наведении курсора
border-bottom:1px dotted #7E0202; //подчеркивание прерывистой линией
cursor: help; //при наведении курсора видны стрелка и знак вопроса}

После создания темплейтов достаточно будет щелкнуть на их имени, чтобы использовать – это то, о чём я мечтала. Эх… ещё бы сюда клавиатурные сокращения.

Search and Replace (поиск и замена)

К сожалению в WLW пока нет возможности поиска с заменой, есть толь один поиск. Пока не встроили функционал (но обещают это сделать), установим плагин Imtech Find&Replace. Вот ссылка на закачку. Работает как в окне Редактирование, так и в окне Исходный код, т.е. можно заменять обычный текст, html-теги (бывает при копировании из pdf вставляются лишние пробелы), а также использовать регулярные выражения.

 

Плагин добавления файла к записи (по API)

Плагин позволяет добавлять файлы к записям. Пока нашла два минуса:

• т.к. в Windows Live Writer указана одна категория на сервере, то картинки и файлы будут заливаться в одну категорию.
• очень кривой код вставки ссылки с двумя вложенными слоями и неприятными последствиями:

  <div class="wlWriterEditableSmartContent" id="scid:8eb9d37f-1541-4f29-b6f4-1eea890d4876:e85e81ee-d2c6-4f8a-b644-361427f38827" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><p><div><a href="$InsertFilePlugin[13].msi" target="_self">FilePlugin</a></div></p></div>

А плюс в том, что при публикации записи файл закачивается автоматически. Здесь вы видите этот плагин в действии: скачать FilePlugin

Второй плагин добавления файла (по FTP)

Insert File via FTP можно в XML-файле указать несколько FTP-серверов с папками и потом выбирать, куда из них закачивать.

Создаем Portable Windows Live Writer

Здесь прочитать о Portable и скачать загрузчик для WLW. Распаковать содержимое архива WLWPortable3.zip на жесткий диск. После настройки программы WLW скопировать все файлы из
C:Program FilesWindows LiveWriter

в указанную директорию нашей разархивированной папки
WindowsLiveWriterPortableAppWindowsLiveWriter

Теперь можно вообще деинсталлировать WLW с компьютера. Запускается программа открытием файла WindowsLiveWriterPortable.exe и она будет заботиться о необходимых настройках реестра и путей к документам. Носите на флешке, переносите на другой компьютер!

Клавиатурные сокращения WLW (не зря рекомендуется к прочтению)

• новая запись в блоге Ctrl+N
• новая страница Ctrl+G
• выделение жирным Ctrl+B, курсивом Ctrl+I, подчеркивание Ctrl+U, зачеркнутый Ctrl+H
• вставка изображения Ctrl+L
• открыть Ctrl+O (откроется окно выбора открытия или записи из Черновиков, или Недавно опубликованных, или из записей блога, просматривает 20, 50, 100, 500 последних записей)
• сохранить черновики локально Ctrl + S
• опубликовать Ctrl+Shift+P
• напечатать Ctrl+P
• вставить ссылку Ctrl+K
• вставить картинку Ctrl+L
• очистить форматирование элемента: выделить его и нажать Ctrl+Пробел. Это также помогает, если вы отформатировали элемент и хотите писать текст дальше, а текст продолжает оставаться жирным, подчеркнутым или выделенным вашим тегом, как например у меня <code> или <kbd> : ставите стрелку после отформатированного элемента и жмете нужную комбинацию.
• проверить правописание F7
• редактирование F11
• исходный код Shift+F11
• предпросмотр с шаблоном блога F12
• убрать/показать свойства записи F2 (нижнее меню)
• убрать/показать правое меню F9
• По умолчанию при нажатии Enter начинается новый абзац, а вот разрыв строки делаем нажимая Shift+Enter
• отменить Ctrl+Z (также отменяет автоматическое преобразование введенного url-адреса в ссылку), вернуть Ctrl+Y
• выделить всё Ctrl+A
• вырезать Сtrl+X, копировать Ctrl+C, специальная вставка Ctrl+Shift+V.  Обязательно воспользуйтесь специальной вставкой (её также можно вызвать с помощью правой кнопки мыши) при копировании текста из Интернет, из Word, из pdf-документов, чтобы выбрать вариант вставки кода без форматирования, с удалением специфического форматирования (лишние мусорные стили), но сохранением основного форматирования (заголовки, жирный, наклонный), с полным сохранением форматирования (лучше не выбирать).
• поиск Ctrl+F
• т.к. прямой поддержки ЕЕ нет, мы будем видеть просто список категорий, а не иерархическую структуру категорий. Работа с категориями: Ctrl+Shift+C – открываем окно со списком категорий, стрелками Вверх и Вниз ходим по меню, клавишей Enter отмечаем пункты или наоборот снимаем галочки, сочетанием Ctrl+Enter отмечаем галочкой категорию и выходим из окна категорий, клавишей Esc – просто выход из окна категорий. В окне категорий есть верхняя строка для ввода первых букв названия категории, что удобно, если у вас очень много категорий.

Неразрешенные вопросы и пожелания

Как удалить опубликованную запись. Запись удаляется из окна Открыть.

Запоминание позиции курсора при перемещении по вкладкам Исходный код <-> Редактирование. Например, я хочу изменить код вставки рисунка, а попадаю на начало записи. Потом ищу код, меняю, и возвращаюсь на вкладку редактирование снова попадаю на начало записи. Неудобно!

Нет подсветки исходного кода, т.е. не очень удобно редактировать его, хотя многим это может и лишнее. Автозавершение при редактировании html.

Не знаю как работает программа с разными авторами. Кроме меня никто мой сайт не редактирует, поэтому не тестировала.

Хотелось бы использовать клавиатурные сокращения или дополнительные кнопки клавиатуры для плагина Dynamic Template (пока нет), настраивать верхние кнопки редактирования.

Как сделать полный бэкап записей

Иметь возможность изменять URL Title (в WordPress это возможно - slug), а не только использовать хитрость

Изменить выделение жирным: вместо тега <strong> тег <b>, хотя я понимаю, что семантически более верно использовать первый вариант, который есть в WLW.

Функция Отменить работает только в пределах текущего окна, т.е. если из окна редактирования перейти в окно Исходного кода, кнопка становится неактивной. Очень жаль.

Проверка орфографии одновременно и для русского, и для английского, тезаурус.

Может сделают всё-таки поддержку именно EE, хотя и так вроде удалось настроить.

Предыдущая запись: Avaya в лицах (beta)
Следующая запись: Антикризисная программа: читальный зал.