articles of seeuse and aslang

Languages

articlegeek

Submit Articles - Free Website Content
Need free content? Check out the library of copyright free articles at ArticleGeek.com.

SeeUse in‎ > ‎РУ‎ > ‎

Текстовый редактор на JavaScript.

Часто возникает вопрос: «Как бы добавить новость на свой сайт, но не лезть в html код?» И вправду, если каждую новость подводить в редакторе html кода, то можно либо не закрыть тег, либо атрибут не тот всунуть и т.п. Т.о. страничка сразу становится не валидной,  мало того, она и отобразиться в браузере может «криво». Что же делать? На помощи приходят WYSIWYG редакторы.

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

WYSIWYG (сокращение от What You See Is What You Get, англ. что видишь, то и получишь, произносится как «ви-зи-виг») - способ редактирования, при котором редактируемый материал в процессе редактирования выглядит в точности так же, как и конечный результат.

Т.е. касательно нашей задачи, у нас есть окошко для ввода текста (как правило обычный <textarea>), мы вставляем в него текст, к примеру из ворда, и видим тот же результат, что и в ворде, а не просто текст без стилей и переносов. К тому же мы еще можем и редактировать данный текст как и в ворде. Очень удобно иметь такую форсу на сайте.

Как же работает данный редактор? Все очень просто, когда Вы копируете отредактированный текст в ворде, либо на сайте, то вы также копируете и «невидимые» html теги. Данные теги мы можем перехватить JavaScript’ом и вставить уже отредактированный текст.

Думаю, Вы уже подумали: «Так, пора заняться жестким изучением JavaScrip, что бы написать такой редактор», так вот, предложу отказаться от данной мысли, т.к. велосипед уже сделан, к тому же и очень много «марок». Вам остается только подобрать ту WYSIWYG, которая устроит вашу верстку. Т.к. к примеру Вы сверстали страницу, и решили стилями обнулить list-style, а вот редактор использует данный стиль по умолчанию, что бы показать перечень чего-либо. В данном случае советую подберать редактор, который замену делает «МЕСТНО». К примеру берет выделенный текст вставляет его в тег <span>Ваш текст </span>, а когда вы ему говорите, что хотите данный текст увидень жирненьким, то скрипт вставляет в данный текст атрибут style= “font-weight:bold”. Т.о. в любом случае Вы будете на странице лицезреть жирненький текст. Конечно это не даст ни какого эффекта, к примеру, для продвижения сайта, но тут уж смотрите сами, что Вам в первую очередь необходимо.

Как правило WYSIWYG используют в CMS (Content Management System) системах, для того, что бы пользователи могли без проблем добавлять новости, оставлять посты на блогах, так же красиво комментировать ту или иную тему. Помимо приведенных вариантов использования подобных редакторов есть еще уйма систем, где необходим данный функционал.

Приведу небольшой список WYSIWYG'ов:



JavaScript, WYSIWYG, редактор, текст, html код, теги, стили

Часто возникает вопрос: «Как бы добавить новость на свой сайт, но не лезть в html код?». Данная статья поможет Вам разобраться в данном вопросе, и подобрать оптимально WYSIWYG систему на JavaScript'е.