Візуальний редактор є зручним інструментом для швидкого додавання і редагування на сайті різної інформації. Він дозволяє переглядати і редагувати HTML-вміст не редагуючи HTML-код. У ньому, щоб редагувати текст або зображення, не потрібно писати теги або інші елементи форматування, досить просто натиснути соотствующую функціональну кнопку.

Візуальний редактор в DLE є вікно, що містить панель управління і робочу область. Панель управління містить більшість кнопок ідентичних будь-якого текстового редактора. Панель управління візуального редактора виглядає так:

Розглянемо докладніше панель управління.

кнопка , Що знаходиться у верхньому лівому кутку панелі несе функцію включення повноекранного режиму. Ви можете використовувати цей режим, якщо вам зручніше працювати тільки з вікном редагування тексту. Повернутися до нормального режиму, натиснувши ту ж кнопку. Зліва від неї розташовані стандартні кнопки роботи з текстом: вирізати і копіювати . Далі розташовуються кнопки відповідно вставити, вставити, як простий текст і вставити з Word. Функції вставки тексту розрізняються тим, що в MS Word при генерації тексту створюються додаткові коди, які зберігаються при копіюванні тексту і які DLE може розпізнати не вірно. На жаль, кнопки копіювати, вирізати, вставити доступні не у всіх браузерах. У таких випадках необхідно використовувати стандартні сполучення клавіш для операційної системи, встановленої на вашому комп'ютері.

За допомогою кнопок - «Знайти» і - «Знайти і замінити» можна виконувати пошук або пошук і заміну за набраним вами тексту в візуальному редакторі.

Кнопки «Виступ» і «Відступ» переміщають текст відповідно вліво і вправо. Як в будь-якому текстовому редакторі в візуальному редакторі DLE є клавіші «Скасувати» і «Повернути», що дозволяють скасувати останні дії.

Для вставки посилань на панелі інструментів є спеціальні кнопки , Причому кнопка дозволяє вставити захищену посилання. Вона використовується в тому випадку, якщо необхідно вставити посилання і при цьому візуально приховати її url, в редакторі буде виглядати так: Посилання . При натисканні кнопки «Вставити / змінити посилання», відкриється діалогове вікно, за допомогою якого, ви зможете змінити адресу посилання, встановити спосіб відкриття посилання (в цьому ж або в новому вікні), вказати заголовок і змінити накреслення посилання.

Для того щоб вставити в новина будь-якої файл (наприклад, файл формату pdf або зображення) необхідно попередньо завантажити його на сервер. Для цього використовуйте кнопку "Завантаження файлів на сервер» Причому всі файли, завантажені для даної новини, видаляються разом з новиною. Так само можна розміщувати в новини файли, які не завантажуй їх на сервер, а просто вказавши їх URL.

Кнопка «Вставити / змінити зображення» дозволяє розмістити в новини малюнок. Для цього завантажте зображення на сервер, а потім вставте його в новина. Натиснувши на цю кнопку, ви зможете описати зображення, привласнити йому заголовок, встановити вирівнювання, розміри, вертикальні і горизонтальні відступи, товщину рамки. Так само можна встановити підміну зображення при наведенні на нього курсора. При завантаженні фотографій на сервер, користуйтеся функцією автоматичного зменшення зображення, тому що це сприяє поліпшенню дизайну вашої новини і створює зручність для користувача, який може швидко переглянути всі фотографії, а детально переглянути лише сподобалися йому.

В новину можна вставити медіа-файл, для цього необхідно завантажити його на сервер або вказати URL, потім за допомогою кнопки «Завантажити / змінити вкладений медіа-файл» , Ви можете зробити настройки: вибрати тип файлу, налаштувати розмір, щоб налаштувати належний вигляд новини, встановити горизонтальний і вертикальний відступ і т.д. При додаванні медіа-файлу в новина і налаштування його параметрів, пам'ятайте про те, що у всіх користувачів різні можливості перегляду такого файлу, різна швидкість Інтернету і різні браузери.

Ви маєте можливість вставити файли відео, натиснувши на кнопку «Вставка відео» і ввівши його URL. Пам'ятайте, якщо ви хочете вкласти файл з вашого комп'ютера, необхідно попередньо завантажити його на сервер для даної новини. Те ж саме стосується наступної функції «Вставка mp 3», яка дозволяє додати аудіо-файл, в форматі mp3.

Популярним в даний час є використання смайлів. Візуальний редактор DLE так само надає можливість використовувати смайли, натиснувши кнопку «Емоції» У деяких випадках, з'являється необхідність вставки прихованого тексту, для цього ви можете використовувати кнопку «Спойлер» . При натисканні цієї кнопки в новина вставляються теги, які весь укладений в них текст роблять прихованим. При публікації новини, на місці цього тексту з'явиться посилання «Показати / Приховати текст», при натисканні на яку, текст стане доступним, а при повторному натисканні буде знову прихований.

кнопка , Дозволяє вставити відео Youtube або Rutube, для цього введіть URL відео, при натисканні цієї кнопки.

Якщо вам необхідно оформити будь-якої текст, як цитату, або безпосередньо вставити цитату , Використовуйте кнопку. Система вставить теги, які роблять відображення тексту, укладеного в них, таким:

За допомогою кнопки , Ви можете вставити вихідний код. Якщо необхідно щоб частина введеного вами html коди не перетворювалася, то виділіть потрібний текст (код) і натисніть на цю кнопку, наприклад: <strong> текст </ strong>

У DLE існує можливість вставки прихованого тексту. Ця функція може бути використана, при необхідності приховування тексту від незареєстрованих користувачів. Для використання цієї функції, натисніть кнопку «Вставка прихованого тексту» . кнопка «Вставка розриву між сторінками» дозволяє почати нову сторінку з того місця, де відбудеться вставка даного тега.

За допомогою кнопки «Вставка посилання на сторінку» , Ви можете вставити в вашу новина посилання на будь-яку сторінку, це допоможе більш детально представляти ваш матеріал, не публікуючи його кілька разів, до того ж ця функція сприяє зручності навігації.

На наступному рядку знаходиться кнопка стандартної функції «Друк».

Далі знаходяться кнопки роботи з таблицею , За допомогою них, ви можете вставити таблицю, причому, встановивши певні параметри для неї, такі як заголовок, відступи в осередках, фонове зображення, фрейми, прокрутку і ін. Так само окремо винесені кнопки форматування рядків і стовпців. Для них ви так само можете встановити фон, вирівнювання, направлення листа і ін. За допомогою зручних кнопок, ви можете додавати і видаляти рядки і стовпці, натиснувши на відповідну кнопку стільки разів скільки стовпців або рядків вам потрібно вставити або видалити. Окремо винесені так само функції об'єднання і розбиття осередків.

Функція «Змінити стиль CSS» дозволяє зробити настройки стилів. Так ви можете форматувати текст, налаштувати фонове зображення, проте, в деяких моментах вам будуть потрібні знання html. У вкладці блок, вам пропонується можливість налаштувати міжрядковий інтервал, інтервал між знаками, відступи тексту і т.д. У вкладці Box можна налаштувати параметри для робочої області. Вкладка межа містить в собі функції для настройки ширини, стилю і кольору кордону. У вкладці «Список», ви зможете налаштувати виведення списку в такому вигляді, як вам більше подобається. Так само функція «Змінити стиль CSS» дозволяє налаштувати позиціонування.

У візуальному редакторі DLE є можливість роботи з шарами зображення, за таку функцію відповідають кнопки «Додати новий шар», «Перейти вперед», «Перейти назад» і «Включити абсолютне позиціонування» .

Решта функцій візуального редактора DLE є ідентичними текстових редакторах і особливого опису не вимагають:

Нижній індекс, наприклад: нижній індекс

Верхній індекс, наприклад: верхній індекс

Вставка спеціального символу, у вікні, Ви можете вибрати символ який необхідно вставити.

Вставка горизонтальній лінії заданої ширини.

Включити напрямні лінійки / невидимі елементи

Вставка поточної дати

Вставка поточного часу

Напівжирний текст, наприклад: текст

Курсив, наприклад: текст

Підкреслений текст, наприклад: текст

Закреслений текст, наприклад: текст

ліве вирівнювання

Вирівняти по центру

праве вирівнювання

Вирівнювання по ширині

Маркований список, наприклад:

• текст
• текст
• текст
• текст

Нумерований список, наприклад:

1. текст
2. текст
3. текст
4. текст

колір тексту

Колір фону

Очистити форматування тексту, прибирає всі форматування і гіперпосилання з виділеного тексту.

Очищення тексту від зайвого коду

HTML код, вставка або зміна безпосередньо html коду сторінки, якщо ви знаєте html і хочете вставити тег якого немає в візуальному редакторі то натисніть цю кнопку і у вікні, буде відображений поточний HTML код сторінки який ви можете змінити.