Я пытаюсь создать очень простой редактор WYSIWYG для веб-страницы, и единственная необходимая функция - добавить значки эмоций в текстовую область, чтобы отображалось само изображение.Основная идея для реализации редактора WYSIWYG
Однако я не мог понять, как отображать изображения в текстовой области редактора WYSIWYG, и мне действительно интересно, как это работает. Может ли кто-то объяснить основную идею о необходимых методах? Благодарю. :)
ключевое слово contenteditable. Все WYSIWYG редакторы основаны на элементе с этим атрибутом, установленным в true.
Создайте страницу с: <div contenteditable="true">foo! foo!</div> и откройте ее в любом из браузеров. Этот div будет доступен для редактирования - вы можете ввести его, нажать enter, нажать ctrl + b и т. Д.
Может показаться, что вы уже близко к окончательному решению, но ... нет. Вы скоро заметите, что каждый браузер создает разметку по-разному, что разметка, созданная в одном браузере и загруженная в другую, не работает, иногда ключ ввода иногда работает, а иногда нет, вставка вызывает беспорядок, браузеры на базе Webkit создают сотни пролетов , и т. д. и т. д.
И даже внедрение вставок смайликов будет не так просто.
Вы должны прочитать о commands and document.execCommand() method. Вероятно, вам стоит сосредоточиться на команде insertHTML, которая будет полезна при вставке изображений.
Но если вы заботитесь о выходных HTML и UX, я советую вам использовать один из существующих редакторов WYSIWYG (например, CKEditor, который я являюсь основным разработчиком;). У вас тоже нет большого выбора, потому что большинство редакторов WYSIWYG, за исключением нескольких (2-3) основных, сильно использует собственную контентную реализацию, поэтому они настолько сломаны, как есть. Но лучшие редакторы исправляют сотни из этих проблем, делая контент пригодным для использования.
Предполагая, что вы будете использовать jQuery для вставки изображений, вы можете посмотреть редактор jQuery wysiwyg https://github.com/akzhan/jwysiwyg, чтобы понять его лучше, а также использовать тот же код (вместо H1, H2 и аналогичных элементов управления, вы можете использовать свой смайлик изображения. это очень просто, учитывая есть только один.
Проверить https://github.com/akzhan/jwysiwyg#quick-start, чтобы лучше понять его, как это работает
Какую ОС вы нацеливаете? – mvp
Я намерен создать WYSIWYG-редактор для Интернета, спасибо. :) –