Подтвердить что ты не робот

Я сумасшедший? (Как) я должен создать редактор содержимого jQuery?

Хорошо, поэтому я создал CMS в основном для начальных школ. Это становится довольно популярным в Новой Зеландии, но одно, что я ненавижу со страстью, - это в значительной степени плохое качество в редакторах WYSIWYG в браузере. Я использовал KTML (сделанный InterAKT, приобретенный Adobe несколько лет назад). По-моему, этот редактор делает много замечательных вещей (редактирование/управление изображениями, миниатюра и довольно хорошее редактирование контента). К сожалению, время с этим продуктом было неприятным, и новые браузеры начинают нарушать функции и вообще ухудшают производительность этого инструмента. Это также довольно страшно, основывая мои средства к существованию на несуществующем продукте!

Я охотился, на самом деле я регулярно охочусь, чтобы увидеть, изменилось ли что-то на арене WYSIWYG. Самое близкое, что я видел, что меня волнует, - это основа WYSIHAT, но они решили игнорировать довольно соответствующую парадигму редактирования, о которой я расскажу ниже. Это идея моего предлагаемого редактора, и я не знаю каких-либо существующих продуктов, которые могут сделать это правильно:

Правильно, поэтому традиционная модель для редактирования позволяет использовать страницу в CMS, чтобы войти в "конец" и нажать "Изменить" на странице. Затем он загрузит другой экран с помощью редактора и, возможно, нескольких других полей. Более продвинутая CMS, возможно, имеет несколько полей редактирования, которые предназначены для разных частей страницы. В любом случае, большая проблема с этим способом заключается в том, что пользователь редактирует документ за пределами конечного контекста, в котором он появится. В простейших терминах это означает шаблон страницы. Многие вещи могут быть неправильными, например. область редактирования может отличаться от ширины фактической области шаблона. Высота почти всегда исправлена, потому что существующие редакторы всегда используют IFRAMES для обратной совместимости. И есть много других говядинок, которые, я уверен, вы прекрасно знаете, находитесь ли вы в этой области разработки.

Здесь мой редактор utopia:

Вы нажимаете "Изменить страницу": отображается фактическая страница (с ее фактическим шаблоном). Части страницы отмечены как редактируемые с помощью имени класса. Вы нажимаете на одну из этих областей (в моем случае это будет просто большая область тела в середине шаблона), и панель редактирования сбрасывается с верхней части экрана со всеми стандартными элементами управления (жирным шрифтом, курсивом, вставить изображение и т.д.). Iframes никогда не используются, вместо этого мы полагаемся на настройку contentEditable на true в рассматриваемом DIV. Firefox 2 и IE6 могут уйти, давайте двигаться дальше. Вы можете редактировать страницу, зная, как она будет выглядеть при ее сохранении. Поскольку все стили для этого шаблона загружены, ваши заголовки будут выглядеть правильно, все будет просто денди. Является ли это такой радикальной концепцией? Почему мы все еще довольны TinyMCE и другим редактором, который слишком неловко использовать, потому что это звучит как ругательное слово!?

Посмотрим правде в глаза:

Я новичок в JavaScript. Я когда-то играл в этой области, используя Антологию Javascript из SitePoint в качестве руководства. Это был довольно классный опыт, но они, конечно же, использовали IFRAME для облегчения своей жизни. Я попытался пойти по другому пути и просто использовал contentEditable и даже попытался обойти собственные процедуры редактирования контента (execCommand) и вместо этого написал свой собственный. Они вроде работали, но всегда были проблемы.

Теперь у нас есть jQuery и несколько библиотек, которые абстрагируют такие вещи, как IE, не поддерживают Range. Мне интересно, я сумасшедший, или это действительно хорошая идея, чтобы попытаться создать редактор вокруг этой парадигмы редактирования, используя jQuery и соответствующие плагины, чтобы облегчить работу?

Мои актуальные вопросы:

  • С чего бы вы начали?
  • Какие плагины знаете ли вы, что это поможет больше всего?
  • Стоит ли это, или есть волшебный проект, который уже существует к чему я должен присоединиться?
  • Каковы самые большие препятствия для преодоления проект вроде этого?
  • Я сошел с ума?

Я надеюсь, что этот вопрос был опубликован на правой доске. Я полагал, что это технический вопрос, поскольку я хочу знать конкретные препятствия и подводные камни, чтобы следить за ними, а также если технически это возможно с сегодняшней технологией.

Ожидаем услышать мысли и мнения людей.

UPDATE

Я решил, что у меня все получится и начну проект github, когда у меня есть что-то классное, чтобы посмотреть. Оттуда я был бы полностью счастлив за любую помощь, которую люди могут предложить. Конечно, это будет открытый исход:)

ОБНОВЛЕНИЕ 2

Я сделал проект и изложил цели. Дайте мне знать, хотите ли вы присоединиться к группе проектов в качестве вкладчика, но сначала я получу основы, чтобы начать с чего-то.

Здесь ссылка: http://github.com/brendon/SpikeEdit

Обновление 3

Ничего себе! Я нашел этот проект. Какая классная идея! Я связываюсь с ним, чтобы узнать, не нашел ли он где-нибудь с ним:

http://www.fluffy.co.uk/stediting

Обновление 4

Хорошо, я получил достаточно далеко. Самые большие проблемы (как все всегда знают) заключается в том, как сохранить код в разумном состоянии. Кажется, что WYSIHAT берет на себя всю вещь, не связанную с IFRAME, поэтому я держусь, чтобы увидеть, как далеко это доходит. Они используют подход только для очистки кода в конце цикла редактирования. Я думаю, что это должно быть очищено на лету, иначе вы можете отредактировать себя в трясине (я сделал это несколько раз). Когда у меня будет время, я исследую какой-то механизм гомогенизации, который можно подключить, чтобы процесс редактирования вел себя как можно ближе во всех современных браузерах.

4b9b3361

ОТВЕТЫ

Ответ 1

Я полностью согласен с вашим предложением редактора - разметка и iframe - это 2001 год:) В мире есть семантика, поэтому нам нужны современные инструменты для редактирования контента. (см. мои слайды http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable) Я начал Редактор Aloha (http://aloha-editor.org) более или менее с той же интенцией, что и выше. Утопия:-) в нашем случае стала более или менее реальной, и у нас уже есть программное обеспечение, использующее ее:

Известно, что в качестве главного редактора используется редактор Aloha

Известно, что эти системы имеют плагины

Мы приветствуем любого разработчика, который хочет присоединиться, внести свой вклад, принять участие, обратную связь или что-то еще. Мы хотим, чтобы план и развитие были максимально открытыми для всех. Обратная связь приветствуется!

Ответ 2

Хорошо, ничего себе! Эти ребята делают именно то, о чем я думал:

http://aloha-editor.com/

Мне не нравится их панель инструментов, но они действительно функциональны, отлично смотрятся! Я буду следить за их прогрессом:)

Ответ 3

Это может помочь.

У Джо Армстронга была почти такая же идея, как и вы, и провел неделю или около того, играя с ContentEditable в паре с CouchDB для настойчивости. У него не было очень полированного редактора, но это хорошая отправная точка для того, чтобы перевернуть свой собственный (если это то, что вы хотите сделать). Похоже, было бы довольно просто взять то, что там, и превратить его в сплошной редактор контекста.

В качестве примечания, я согласен с вашим мнением, что интерфейсы редактирования должны быть как можно ближе к контексту и макету к артефакту, который они редактируют, насколько это возможно. Дайте мне знать, если вы закончите свой собственный; Мне было бы интересно внести свой вклад в такой проект.

Прежде чем вы выйдете и сделаете редактор, вы можете заплатить, чтобы проверить, что на самом деле делают ваши пользователи. В корпоративных ИТ девять раз из десяти, что вы увидите, это люди, которые помещают свои страницы в Word или что-то подобное, а затем вставляют результаты в любой "редактор", который у вас есть. Я не думаю, что это будет слишком хорошо работать с методом ContentEditable. Кстати, именно поэтому мы все еще используем TinyMCE; он имеет наполовину приличную кнопку "Вставить из слова". Вы нацеливаете инструмент на начальные школы, а не на корпоративную среду, поэтому там могут быть разные.

Ответ 4

Вы пробовали uEditor? Это прочное и простое решение JQuery, которое превращает textarea в редакторов WYSIWYG

//Grab the content of the editable area then replace it with a textarea like so...

var editableContent = $(selector).html();
$(selector).after("<textarea>" + editableContent + "</textarea>")

// add attributes to text area as desired

// kill the original area:

$(selector).remove();

// call uEditor

$(textareaSelector).uEditor({options});

Вы, очевидно, добавили бы опции и обработчики событий в uEditor.

Просто мысль. Rob

Ответ 5

В JQuery есть много редакторов WYSIWYG, но, честно говоря, я был разочарован большинством из них. То, что вы предлагаете, звучит очень полезно. Вот как я это сделаю:

Сначала объект получает ключевые события, когда он имеет фокус. Лучший способ обойти это - поймать ключевые события на уровне страницы. Затем добавьте правильный символ в div, который в настоящее время редактируется. Это будет обрабатывать базовую типизацию в любом div, который, вероятно, будет первым, что вы хотели бы решить.

Далее вам понадобится панель инструментов, которую, вероятно, следует вытащить из страницы, установив отображение на фиксированное. Вам понадобится некоторая логика для вставки пролетов и т.д. Для обработки стилизации текста.

Конечно, если вы построите все это самостоятельно, вам нужно будет все построить - даже мигающий курсор, показывающий, куда идут ваши типизированные символы. Выбор текста, вставка курсора в середине текста, копирование и вставка; вам в значительной степени придется собрать все, что мы используем, чтобы получить с нуля. Другой вариант - использовать какое-то текстовое поле, но, как я понимаю, вы бы хотели этого избежать.

Так или иначе, мой окончательный вердикт в том, что его возможно, но все равно будет много работы. Похоже, у него есть большой интерес, хотя вы, вероятно, можете получить некоторую помощь.

Ответ 6

Попытка создать другой редактор WYSIWYG - это пустая трата усилий. Вам придется реплицировать весь код, уже доступный в других редакторах, для обработки специальных проблем, необходимых для создания правильного HTML, упрощения редактирования элементов, правильного управления клавиатурой...

Лучше использовать существующий, который он разрабатывает, и сначала попытаться использовать его как есть, убедитесь, что он обрабатывает ваш код и генерирует то, что вы хотите, а затем научитесь настраивать его ширину в соответствии с контейнером, автоматически настраивать его высоту до ее содержимого, поместите панель инструментов в внешний div, и у вас будет то, что вы хотите. Если вы хотите действительно избавиться от iFrame, тогда идите и отправьте их исправления, чтобы сделать это, если они еще не предоставили эту возможность, но это будет намного проще, чем создавать все с нуля.

И я могу заверить вас, что есть много людей, которые уже несколько лет используют такую ​​настройку, не заботясь о том, что внутренний элемент используется для редактирования, включая внесение любой части веб-страницы, редактируемой триггер, как контекстное меню, двойной щелчок или плавающая кнопка. Они просто сосредотачиваются на CMS и рассказывают подробности о редакторе в специальной команде.

Ответ 7

Если я правильно понимаю, вам очень нужны динамически редактируемые поля (см.: facebook, другие сайты ajaxy-web2.0). Таким образом, это означало бы, что вы просто установили класс (или что-то еще) в соответствующее имя и включили бы jquery в текстовое поле /textarea onClick. Я думаю, что jquery делает что-то подобное с одним из своих плагинов. В любом случае, у вас могут быть обновления для каждого поля (если вы не хотите редактировать всю страницу или вам нужно обновить всю страницу/объект для редактирования одного поля).
Конечно, для этого потребуется немного аякса и некоторые побочные действия, чтобы связать их вместе, но это довольно тривиальное имхо.