Как сделать WYSIWYG на jQuery?

Question

[MOst_53]

Объяните на пальцах как сделать простой визивиг-редактор по типу TinyMCE или CKEditor. Меня интересует именно идея без всех тонкостей. Спасибо.

Answer 1

[Kobs]

Нужно использовать designMode document property. Открывать документ в designMode можно в iframe.
Как то так:
document.writeln(' iframe id="' + editor + '" /iframe ');
var edit = document.getElementById(editor).contentWindow.document;
edit.designMode = "On";

в коде парсер жрет "<" и ">" (

Я когда то писал с нуля WYSIWYG, если надо могу поискать исходники.

Comments

[MOst_53]

Если сможешь показать исходники буду благодарен. Спасибо за ответ.

[Анатолий]

@Kobs, <pre> и парсер ничего жрать не будет, ну или <source>
@MOst_53, тут основная идея в строке «edit.designMode = 'On';» это позволяет вводить текст в iframe а дальше уже только фантазия Ваша играет роль.

[MOst_53]

@taliban, @Kobs, а designMode поддерживается в IE 7+?

[poorum]

@MOst_53: он везде поддерживается

[Renat Ibragimov]

поддерживается в IE выше 5.5+

Answer 2

[Finom]

Была идея написать небольшую статью, представив простейший редактор в 2 КБ с использованием jQuery но потом забил (сам редактор есть, дизайнить лень). Если вам интересно, отдам код при личной переписке.

Answer 3

[Stalker_RED]

еще можно покопать в исходниках imperavi

Answer 4

[Алексей Блышко]

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

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

Comments

[MOst_53]

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

Answer 5

[Иван Климчук]

Посмотрите imperavi. Может и писать ничего не нужно будет. А если нужно — лицензия там открытая, можно посмотреть реализацию и допилить или сделать свой с блекджеком.

Comments

[Иван Климчук]

каюсь. не заметил комментарий выше.

Answer 6

[aps]

+1 за imperavi. Самый внятный код. Лучше всего подходит для изучения.
Но идея писать CKEditor явно нездоровая — утонете в кроссброузерности.
Тот же imperavi приходится допиливать

Answer 7

[un1t]

Я написал свой WYSIWYG правда, он пока еще в IE не полностью работает, но для моих целей хватает.
github.com/un1t/pencil

Кода мало, легко разобраться. Самому писать, визивиг дело тяжкое, но допиливать чужое еще более тяжкое. Если поправить пару неработающих моменов в IE то можно будет вполне нормально пользоваться.

Если есть желание, можешь помочь мне допилить его.

Answer 8

[Олег Яковенко]

nicEdit. Можно выбрать элементы которые будут отображаться на панели. Если всё же хочется изобрести велосипед, посмотрите его сорцы и напишите на jquery (хотя вобще вариант неочень, jquery как доп зависимость.. .)

Comments

[MOst_53]

Я знаю как настраивать и писать плагины под существующие редакторы. Но вопрос в том как же все таки изобрести простенький велосипед. Мне нужно только вставлять смайлики и простое форматирование текста. Но все равно спасибо за ответ. =)

Answer 9

[homm]

Вот статья для начала: blog.whatwg.org/the-road-to-html-5-contenteditable

Answer 10

[dio]

Если интересно исходники посмотреть — можете в нашем монстрике покопаться github.com/Studio-42/elRTE

Answer 11

[Сергей Горбулев]

Парни, недавно попался сайт, где написано как просто реализовать этот wysing. Често говоря, был в восторге.
Вот ссылка: www.pvsm.ru/javascript/24443. Или тоже самое: https://habr.com/post/161715/.