Wysiwyg. С чего начать?
Приветствую. Подскажите новичку в js, пожалуйста, хочется создать велосипед в виде редактора-html, в какую степь копать? нагугливал два способа реализации, мол один использовать редактирование встроенными средствами браузера, а второй - полная эмуляция на js. Вот хочется опробовать второй вариант. Скажем, в какую сторону копать обработку свойств выделенного текста? или, допустим, реализацию подобной фичи - перетаскиваешь картинку из папки в окно редактора, та автоматически загружает ее на сервер и показывает в определенной миниатюре уже в редакторе?
|
Мне более симпотично средствами браузера :)
Должно работать во всех современных браузерах включая ie9.
<!DOCTYPE HTML>
<html>
<head>
<style>
td{
border:1px solid red; padding:5;border-collapse:collapse;
}
</style>
</head>
<body>
<button onClick="document.execCommand('bold', false, null);"> Жирный</button>
<button onClick="document.execCommand('italic', false, null);"> Наклон</button>
<button onClick="document.execCommand('insertunorderedlist', false, null);"> список</button>
<button onClick="document.execCommand('Delete', false, null);"> Удалить </button>
<div id="myDiv" contenteditable="true">
<h1>Список</h1>
<ul id="todolist">
<li>Купить123123 молок</li><li>Починить дверь</li>
<li>Отредактировать список!</li>
</ul>
<h1>Таблица</h1>
<table class="tab">
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>
</div>
</body>
</html>
список команд http://blog.in16.ru/index.php/2010/07/22/execcommand/ описуха Rich Text Editing на MDN + пример толкового редактора |
благодарю за ссылку и спорить не буду, что лучше, мне просто из спортивного интереса хочется узнать, как средствами js происходит работа над выделенными кусками текста и обработка событий, такие, как перетаскивание изображения в поле редактирования
|
|
Имхо: проще всего допилить Ace
|
Цитата:
|
kobezzza,
Многовато будет затруднений для новичка. Одно кроссбраузерное выделение текста чего стоит. |
Цитата:
|
Gozar,
Почему бы и нет? |
Цитата:
|
Gozar,
бла бла бла |
решил пока опробовать работу с textarea и вставкой а ля bb-кода, после чего со стороны сервера идет уже обработка тегов... гемора, конечно, много, одна кросс-браузерность чего стоит, даже страшно представить чего ожидать при полной эмуляции))
|
Да ладно. Textarea - не wysiwyg. С текстарией все в сотни раз проще чем с contenteditable ))
|
Попробуйте путь самурая - визвиг полностью на канвас.
|
Цитата:
|
Цитата:
|
ИМХО на canvas получится не то пальто. Это как на DirectDraw делать UI какой-нибудь десктопной программы...
|
Цитата:
И не надо никого запугивать. Я сам когда-то написал wysiwyg и это не так уж сложно как вы пытаетесь представить. Главное разобраться с выделением. |
Цитата:
Хотя конечно все зависит от поставленной цели. Есть ведь монстры типа CKEditor или TinyMCE, а есть и всякие малютки |
Цитата:
Цитата:
|
Цитата:
я понимаю что самописные вещи гораздо приятнее и опыта наберёшься, но в данном случает это не оправданно геморный гемор. и опыт этот больше ни где не пригодится. и юзать этот редактор потом не будешь ни где. я когда то писал что то подобное, но оно так и не пригодилось ни разу. просто интересно было как это работает. время потратил и всё. Цитата:
|
Цитата:
Я написал такой редактор и я его юзаю и он мне нравиться больше, чем то, что писал не я. А так, да меня посмешило, что в этой теме собралось аж два ПРОРОКА. |
Моё имхо, просто технология вымирающая, я ума немогу приложить где она может пригодиться. в 9ой опере или IE6 ?
Ну и кому это нужно через пару лет будет, впрочем оно уже некому не нужно. Изучить можно, но перспектив я невижу. Gozar в чём преимущество перед HTML 5 editable ? |
Читаем вопрос ТС и не задаем глупые вопросы!
Человек хочет научиться, а не выслушивать неуместные советы о том, что учиться не нужно, якобы. Наработка опыта невозможна без понимания вопроса целиком. Изучение вопроса дает понимание выделений в браузере, понимание, которого у ТС явно нет и которое он хочет получить. А что вы ему советуете? Не получить эти знания? |
Любой быдлокодер может поставить tinyMCE, но это еще не значит, что он станет понимать как он работает. Я когда начинал изучать этот вопрос, мне тоже многие советовали поставить редактор. Я правильно сделал, что не стал слушать их советы. Мне очень пригодились полученные знания в будущем. Хотя они и не касались редактора визивиг.
|
Ссылка в тему http://habrahabr.ru/post/55922/
|
Абсолютно согласен с Gozar.
|
Да ниче особо полезного это не даст. Ну познакомитесь вы с десятком-другим различных багов браузеров, уже известных, ну зарепортире еще с десяток новых ))
С editing API все настолько криво и хреново реализовано что работать с этим противно. Хотя конечно, некоторый опыт все-равно получите. В любом случае кодер должен писать код, какая разница что это - визивиг или какая-нибудь игрулька ) |
Написание нормального визвига серьёзная задача: автор познакомится с паттернами проектирования и различными архитектурными решениями, для того чтобы визвиг легко расширялся и поддерживал различные плагины, затем автор неплохо освоит регулярные выражения, т.к. при написании визвига их очень активно юзают при анализе вставляемого/сохраняемого текста (например при вставке из ворда), далее автор освоит различные HTML5 API, такие как DnD, LocalStorage, FileAPI + Canvas (можно сделать простой редактор картинок) и т.д. Хороший визвиг непременно должен поддерживать локализацию, значит автор освоит приёмы реализаций её...перечислять могу ещё долго плюсов от такого проекта, а хаки - они инкапсулируются в первые часы разработки.
ЗЫ: я тоже писал свой визвиг когда только начинал изучать JS. |
Цитата:
Цитата:
|
Цитата:
|
Gozar,
имхо попытка троллинга на пустом месте. ни чего особенного мы не сказали. только предупредили про гемор с кроссбраузерностью |
Я непонимаю в чём противоречие :)
Если говорить о Html5 editable то для стандартных фичь понадобиться document.execCommand А вот для нестандартных понадобиться всё тот же range и selection так что я не считаю что использование современных технологий приведёт к дефициту полезных навыков. Можно же много прикольных задач придумать . Ну к примеру обьединение ячеек в таблице, и наоборот разделение ячеек таблицы. Или нестандартную команду добавить к преобразованию текста, ну скажем сделать выделенный текст вертикальным, или добавить тень к тексту. А вот нафига делать свой жирный текст, в то время как это можно сделать одной командой при помощи document.execCommand я хз. Если уж тратить силы то интересное, а не на то что даром некому ненужно :) Ссылка по теме WYSIWYG HTML редактор в браузере http://habrahabr.ru/post/107829/ Вот список оддерживаемых комманд на старых браузерах http://www.quirksmode.org/dom/execCommand.html большая их часть даже у ie6 есть. |
Цитата:
|
Цитата:
|
Цитата:
|
в ie <strong> текст </strong>
в остальных <b> текст </b> <strong>текст</b> - мы не получим точно :) помимо 'bold' есть много других команд в основном кроссбраузерных, за некоторым исключением. Что касается именно bold то разницей между bold и strong в ряде проектов можно пренебречь, так как по умолчанию они отображаются совершенно одинаково. Если принибречь неполучается то на ваш выбор целых три решения. 1й - после применения execCommand найти в документе тэг strong и замените его на bold. 2й - написать свою реализацию bold с блэк джеком и шлюхами для всех браузеров 3й - написать свою реализацию bold только для ie, в остальных юзать exec. в условии реального проекта 1е и 2е решение видятся более вероятными. сравнение bold и strong <B>Привет</B> <strong>Привет</strong> |
Цитата:
Я за 1 и 3 вариант. |
1 вариант вырежет даже вручную расставленные теги.
2 вариант больше всего подходит на данный момент. Ибо фича-детекшн тут неприменим как я понимаю, а сниффинг юзерагента не есть гуд. Да и один фиг нужны ведь и другие теги, не предусмотренные стандартными командами. Так что один фиг нужен универсальный метод вставки тегов. Кстати кто вкурсе что говорится в спецификации по поводу команды bold ( а также italic)? Лень просто читать. 3 - в опере тоже strong вроде бы вставляется. |
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 12:32. |