Работа с визуалния текстов редактор

Текстовият редактор се ползва при създаване и редактиране на страници с богато съдържание, формуляри и продукти. Той е богат на функции и в тази статия ще ги разгледаме една по една.
Чрез него можете да ползвате различни шрифтове, големини на текста, ефекти, цветове; да прибавяте снимки, линкове и html съдържание, за да представите нещата така, както ги искате.

1. Отидете в Магазин - Продукти


2. Натиснете "Нов продукт"

3. Виждате, че имате възможности да съставяте кратко и детайлно описание на продукта с визуалния редактор. Натиснете "редактирай с визуален редактор" над едно от двете полета

4. Пред Вас се отваря визуалният редактор

5. Нека да разгледаме различните му възможности и резултатът от тяхната употреба

Код - този бутон превключва между това, което се вижда като резултат от редактирането, и кода-източник, който съдържа данните на форматирането на текста.
Видим резултат:


Код, който стои зад видимия резултат


Кодът, който виждате е език за писане на уеб сайтове и се нарича HTML. Той позволява да бъдат прилагани всякакви ефекти, за да се постигне желаният резултат с текста. Благодарение на визуалния редактор, няма да Ви се наложи да учите HTML, понеже всеки един от бутоните създава кода вместо Вас.

Запази - този бутон запазва промените, които сте направили до момента
Нова страница - изтрива всичко, което сте направили и започвате от начало
Предварителен изглед - дава възможност да прегледате промените така, както ще се виждат в клиентската част


Шаблони - можете да си изберете форматиране от няколко предварително създадени шаблона



Кликнете веднъж върху бутона и ще се отвори прозорец с шаблоните. Кликнете веднъж върху някой от тях и той ще бъде приложен в текстовия редактор.



Ще получите следния резултат. Маркирайте текстовете и ги заменете с Вашите


Изрежи (Cut) - премахва маркирано съдържание и го запазва в паметта за поставяне по-късно (Paste);

Копирай (Copy) - създава копие на маркираното съдържание и го запазва в паметта за поставяне по-късно (Paste);

Вмъкване (Paste) - вмъква на избраното място предварително изрязано или копирано сърържание;

Вмъкване като чист текст - вмъква текст, който е имал някакво форматиране, като нормален текст, без никакво форматиране;

Вмъкване от MS Word - вмъква текст, който сте копирали или изрязали от Microsoft Word



Печат - изпраща документа към принтера за разпечатване;

Провери правописа - проверява написания текст за правописни грешки;

Проверявай правописа по време на писане;



Отмени - ако допуснете някаква грешка, този бутон връща състоянието на документа от преди грешката.

Повтори - отменя действието на бутона "Отмени"



Търси - отваря прозорец, който Ви позволява да търсите дадена дума или откъс от текст из целия документ и го маркира;

Замести - отваря прозорец, който Ви дава възможност да заместите дадена дума или откъс от тест с друга дума или откъс от текст




Селектирай всичко - маркира съдържанието на целия документ;

Изтрий форматирането - премахва всякакво форматиране от селектирания текст.



Тази група бутони отваря прозорци, чрез които можете да създадете следните HTML елементи:

формуляр, Поле за отметка, Поле за опция, Текстово поле, Текстова област, Падащо меню с опции, Бутон, Бутон-изображение или скрито поле.




Следващата група бутони създава получер шрифт, курсив, подчертан текст и задраскан текст


Индекс за база - поставя селектирания текст под нивото на предхождащия го
Индекс за степен - поставя селектирания текст над нивото на предхождащия го




Номериран списък - напишете няколко реда текст, маркирайте ги, натиснете този бутон, и той ще ги номерира. Ако сложите курсора на края на някой ред и натиснете Enter, автоматично ще бъде прибавен нов ред с пореден номер
Неномериран списък - напишете няколко реда текст, маркирайте ги, натиснете този бутон, и той ще им постави точки отпред. Ако сложите курсора на края на някой ред и натиснете Enter, автоматично ще бъде прибавен нов ред с точка (Bullet)



Намали отстъпка - премества маркирания текст с няколко интервала наляво
Увеличи отстъпка - премества маркирания текст с няколко интервала надясно




Подравняване вляво, вдясно, в средата и от двете страни - подравнява селектирания текст по избрания начин



Посока на текста от ляво надясно.
Посока на текста от дясно наляво.

Тези два бутона променят посоката на писане на текста.


Добави/редактирай връзка - маркирайте текст и натиснете бутона. Въведете url адрес и тексът ще се превърне в линк;

Изтрий връзка - маркирайте линк и натиснете този бутон. Текстът спира да бъде връзка.

Добави/редактирай котва - котвата е връзка към по-долна или по-горна част от същия документ.



Изображение - отваря прозорец, който Ви позволява да приложите изображение от компютъра си или от интернет адрес. Качването на изображение е описано в тази статия ;
Flash - отваря прозорец, който Ви позволява да приложите flash анимация.


Таблица - този бутон отваря прозорец, който Ви позволява да вмъкнете таблица


Прозорец за вмъкване на таблица


Хоризонтална линия - натиснете този бутон и той ще постави хоризонтална линия след текста


Усмивка - този бутон отваря прозорец, който Ви предлага няколко усмивки, сред които да изберете. Кликнете веднъж върху избраната усмивка и тя ще се появи в текста.


Вмъкни специален символ - натиснете този бутон и ще се отвори прозорец със специални символи. Кликнете веднъж върху избраният от Вас символ и прозорецът ще се завори, а символът ще бъде поставен в текста


Вмъкни нов ред - поставя нов ред след курсора


IFrame - Бутонът IFrame отваря прозорец, който Ви дава възможност да поставите рамка със съдържание от друг уебсайт в текста.


Стил отваря падащо меню с предварително създадени стилове на форматиране на текста и форматира маркирания текст с избрания от менюто стил.


Формат - отваря падащо меню с още опции са форматиране на селектирания текст


Шрифт отваря падащо меню с възможни шрифтове, от които да избирате


Размер - от тук избирате размер на текста


Цвят на шрифта - изберете с какъв цвят да бъде шрифта на текста


Цвят на фона на шрифта - можете да маркирате текст, поставяйки различен по цвят фон зад него


Show blocks - този бутон показва различните елементи в текста, поставени в блокове или кутийки в кода