Визуальный редактор

Материал из Справка @diary.ru.

Перейти к: навигация, поиск

Содержание

[править] Зачем нужен Визуальный редактор

Так исторически сложилось, что изначально Дневники вышли из форумов, так что все сообщения создавались с использованием BB-кодов. Но с увеличением количества записей, это стало неприемлемо. Дело в том, что ВВ-код отяжеляет базу данных, она становится громоздкой, нестабильной и неудобна для работы и копирования; подобный форумный код — позавчерашний день интернета и очень мешает с технической стороны, невидимой пользователям. Простой переход на HTML позволит вдвое сократить базу данных!

Для этого с середины июля 2007 года на Дневниках записи можно создавать и оформлять в режиме WYSIWYG — "что видишь на экране, то и получишь". Создавая новую запись или редактируя старую, вы можете переключаться между визуальным и HTML-редактором без потери текста. Однако, имейте ввиду, что используемого ранее bb-кода теперь нет, а есть обычный HTML и все записи и комментарии будут создаваться с использованием HTML.

Для этого был использован специальный javasсript-апплет TinyMCE (Tiny Moxiecode Content Editor). Для того, чтобы визуальный редактор корректно работал, необходимо, чтобы ваш браузер был:

  • Internet Explorer начиная с версии 5.5;
  • Mozilla начиная с версии 1.3, Mozilla Firefox начиная с версии 0.8 и другие браузеры на движке Gecko с поддержкой режима визуального редактирования (Netscape >7.0 Seamonkey, Kmelion и т. д.);
  • Opera начиная с версии 9.0;
  • Safari (полностью будет поддерживаться начиная с MacOS X 10.5);
  • Konqueror (поддерживается частично одна из веток, редко встречающаяся в дистрибутивах Linux/BSD).


Редактор позволяет очень многое. C его помощью можно вставлять рисунки, таблицы и указывать стили оформления текста. Можно даже выполнять некоторые операции, присутствующие в более мощных редакторах.


Визуальный редактор можно отключить в настройках и забыть про него. Для тех, кто просто набирает текст, практически ничего не изменилось. Зато расширены возможности для тех, кто любит текст оформлять. К примеру, раньше тексты со ссылками с других сайтов нужно было оформлять дополнительно вручную, а теперь их можно просто копировать и вставлять, например, результат пройденного теста, счетчик Блогс.Яндекса, таблицу и так далее.

[править] Особенности Визуального редактора

Однако подобная функциональность требует некоторых затрат. При первоначальной загрузке страницы новой записи и страницы редактирования ранее сделанной записи ваш браузер будет загружать код визуального редактора (примерно 200 Кб). Позже, за счет использования кеширования данных, объем загружаемой информации значительно уменьшается (загружается примерно 20-30 Кб).

 
Изображение:Лого дневников.gif
Важно:
При написании и редактировании записи нельзя переключаться между HTML и визуальным редакторами. Выберите один тип редактора и пользуйтесь только им.

[править] Описание

[править] Редактирование текста

[править] Редактирование простого текста

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

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

Также примите к сведению, что в режиме визуального редактора вернуть текст-оффтопик в нормальный текст невозможно.

[править] Редактирование абзацев

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

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

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

[править] Отмена изменений и повтор действий

Если вы ошибочно совершили некоторое действия по редактированию или форматированию текста, то вы можете отменить их нажав на панели инструментов на кнопку "Отмена действия" или же использовав соответствующие “горячие клавиши”.

После отмены действия становится активной кнопка "Повторить действия", которой можно воспользоваться, если вы ошибочно отменили последнюю правку.

[править] Вставка медиа-объектов

См. Вставка медиа-объектов

[править] Добавление ссылок

[править] Кнопка добавления картинок

[править] Кнопка добавления видео

[править] Кнопки копирования

[править] Прочее форматирование

[править] длинное тире

[править] ссылки на профиль и дневник

[править] сокращение видимого текста

[править] Описания панелей инструментов

[править] Панель инструментов вкладки Визуальный редактор

Кнопка Значение Сочетание клавиш
Изображение:Bold.gif Полужирный текст CTRL+B
Изображение:Italic.gifКурсив CTRL+I
Изображение:Underline.gif Подчеркнутый текст CTRL+U
Изображение:Strikethrough.gif Зачеркнутый текст
Изображение:Offtop.gif Офтопик
Изображение:Forecolor.gif Цвет текста
Изображение:Justifyleft.gif Выравнивание текста по левому краю
Изображение:Justifycenter.gif Выравнивание текста по центру
Изображение:Justifyright.gif Выравнивание текста по правому краю
Изображение:Justifyfull.gif Выравнивание текста по ширине
Изображение:Bullist.gif Маркированный список
Изображение:Numlist.gif Нумерованный список
Изображение:Outdent.gif Уменьшить отступ
Изображение:Indent.gif Увеличить отступ
Изображение:Undo.gif Отмена действия CTRL+Z
Изображение:Redo.gif Возврат отмененного действия CTRL+Y
Изображение:Link.gif Вставка ссылки (необходимо выделить текст)
Изображение:Image.gif Вставка картинки:
  • из БИ
  • с жесткого диска или внешнего носителя
  • из Интернета
Изображение:Media.gif Вставка видео-ролика
Изображение:Longdash.gif Вставка длинного тире ALT+0151
Изображение:Иконка собачки.gif Вставка ссылки на дневник и профиль
Изображение:-L-.gif Вставка ссылки на дневник
Изображение:More.gif Сокращение текста

[править] Панель инструментов вкладки HTML

Кнопка Значение Сочетание клавиш HTML-код
Изображение:Bold.gif Полужирный текст CTRL+B <b></b>
Изображение:Italic.gif Курсив CTRL+I <i></i>
Изображение:Underline.gif Подчеркнутый текст CTRL+U <u></u>
Изображение:Strikethrough.gif Зачеркнутый текст CTRL+S <s></s>
Изображение:Offtop.gif Офтопик (необходимо выделить текст) <span class="offtop"></span>
Изображение:justifycenter.gif Выравнивание текста по центру <div align="center"></div>
Изображение:justifyright.gif Выравнивание текста по правому краю <div align="right"></div>
Изображение:justifyfull.gif Выравнивание текста по ширине <div align="justify"></div>
Изображение:link.gif Вставка ссылки (необходимо выделить текст) <a></a>
Изображение:image.gif Вставка картинки:
  • из БИ
  • с жесткого диска или внешнего носителя
  • из Интернета
<img>
Изображение:media.gif Вставка видео-ролика
Изображение:longdash.gif Вставка длинного тире ALT+0151
Изображение:Иконка собачки.gif Вставка ссылки на дневник и профиль [J][/J]
Изображение:-L-.gif Вставка ссылки на дневник [L][/L]
Изображение:more.gif Сокращение текста [MORE][/MORE]
Изображение:Unikode.gif Преобразование текста в Юникод
Изображение:translit.gif Транслитерация (замена латиницы кириллицей)
Изображение:help.gif Подробная информация о действиях стоящей слева кнопки

[править] FAQ

— После отправки записи, созданной в Визуальном редакторе, у меня после каждой строчки появился лишний пробел.

Это особенность визуального редактора. Пользуйтесь вкладкой HTML

[править] См. также


Адрес этой страницы:

http://info.diary.ru/index.php?title=Визуальный_редактор
Личные инструменты