WYSIWYG HTML редактор в браузъра

Това епървата частот превода на статия за свойствата designMode и contentEditable, тяхното поведение и функции.

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

  • Различни методи за активиране на режим на редактиране
  • Команди за редактиране
  • HTML, генериран по време на редактиране
  • DOM взаимодействие

Въведение

В първия браузър, създаден от Тим ​​Бърнс-Лий през 1990 г., уеб страниците можеха да се редактират директно в браузъра в режим WYSIWYG. Мрежата се разглеждаше като четима и записваема среда. По-късните браузъри обаче предоставят предимно възможности само за четене, с изключение на въвеждане на текст в полетата за въвеждане на формуляр.

WYSIWYG редактирането в браузъра отново стана норма с пускането на Internet Explorer 5: ново свойство designMode позволи на потребителя да редактира целия документ. Първоначално тази функция беше някак пренебрегната, може би поради факта, че се появи заедно с множество други нестандартни, само за Windows, патентовани функции на IE.

През последните години други конкурентни браузъри - Mozilla, Safari и Opera (бележка на преводача: Chrome все още не е наличен към момента на писане. Първата бета версия ще бъде пусната едва след няколко месеца.) - последваха примера на IE и също внедриха тази функция. WHATWG работи върху стандартизирането на режима на редактиране - свойствата designMode и contentEditable са въведени в HTML 5. Изглежда, че базираното на браузър WYSIWYG редактиране все пак се превръща в неразделна част от мрежата.

Общ преглед на режима на редактиране

Активиране на режима на редактиране

Има два начинаактивиране на режим на редактиране - свойства designMode и contentEditable.

Прозорец или рамка стават редактируеми чрез задаване на свойството designMode на обекта на документа на true. (Отказ от отговорност: В IE трябва да получите препратка към документа от обекта прозорец.) Обикновено полето за редактиране се създава с помощта на IFrame и designMode.

Всеки елемент, съдържащ текст, може да бъде направен редактируем чрез задаване на свойството contentEditable на true. (contentEditable не се поддържа от Firefox 2, поддръжката е въведена във Firefox 3. Предлага се и във всички текущи версии на IE, Opera и Safari.)

Редактиране на клавиатурата

Много хубава функция е, че повторението и отмяната работят по подразбиране (записване и отмяна на действия). (По-късно ще бъде описано как да извикате командата Undo.)

Трудностите започват, когато се натиснат бутоните Enter / Return. Не е съвсем ясно какъв HTML код трябва да бъде резултатът и наистина този код е много различен в различните браузъри и зависи от контекста. Ако курсорът е вътре в непразен p таг, всички браузъри ще го затворят и ще отворят нов (със същите атрибути) и ще преместят курсора към него. И Mozilla също ще вмъкне (ненужен) елемент br след курсора. Например (в примерите чертата означава курсора):

И натискане на Enter/Return в IE или Safari:

Ако курсорът е в края на непразен елемент h1, всички браузъри ще затворят h1, но IE и Opera ще вмъкнат нов елемент p и ще поставят курсора в него. Safari ще вмъкне нов елемент h1 и ще постави курсора вътре. Mozilla няма да създаде допълнителни елементи, но по някаква причина ще добави два допълнителни тагове br след курсора. Например:

Ако напишете текст директно в основния текст (без никакви обвиващи елементи) и натиснете Enter/Return, Mozilla ще вмъкне br. IE и Operaще обвие предишния текст в p и ще създаде нов p. Safari ще вмъкне div.

Ако пишете в div, Safari, Opera и IE ще затворят текущия div и ще отворят нов. Mozilla ще вмъкне br и ще постави курсора след него.

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

Забележка: Това е страховито! Неочаквано IE има най-интелигентния подход досега, като гарантира, че елементите на ниво блок се използват по смислен начин. Mozilla се държи ужасно, когато използва br елементи вътре в блокови елементи, което прави невъзможно прилагането на смислен стил на текст.

Позициониране на курсора

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

Например, вижте тук; Символът с вертикална лента показва възможните позиции на курсора:

  1. p > P1/p > p > P2/p >
  2. div > p > P3 /p > div > p > P4/p > / div > / div >

Така че, ако въведете знаци отляво на удебеления текст, новият текст ще се покаже в нормален стил. Ако пишете отдясно, също ще бъде удебелено.

  1. h1 > Overskrift span class = "Apple-style-span" style = "font-size: 16px; font-weight: normal; " > текст / обхват > /h1 >

Редактиране на обекти

Браузърите поддържат някои допълнителни интерфейси за редактиране.

IE ви позволява да променитеразмер на изображения, таблици, елементи на форми или абсолютно позиционирани елементи чрез плъзгане на ъглите им (когато е избран обект, се появява съответният контейнер)

Mozilla също ви позволява да променяте размера на картините и таблиците, но има и допълнителни контроли, които ви позволяват да създавате нови колони и редове в таблицата. Освен това Mozilla ви позволява да променяте позицията на абсолютно позиционирани елементи.

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

От преводача:Тъй като habr отказа да публикува 35kb текст наведнъж, разделям превода на две части.

Hardcore conf в C++. Каним само професионалисти.