Предисловие:
Поскольку проект развития компании требует использования плагинов смайликов, он был на Baidu в течение длительного времени. Многие плагины смайликов должны ссылаться на многие файлы JS, и нет готовых демонстраций. Некоторые плагины относятся к множеству изображений, и каждого смайлика нужно снова запросить. Для такой функции не стоит усилий, чтобы представить много JS и IMG ...
Таким образом, блоггер закодировал небольшой «плагин экспрессии» для легкого использования в будущем.
Функция
Функция: передайте формат символа, соответствующий выражению на фоне, фон возвращает строку, и передний конец анализирует строку в соответствующее выражение, чтобы отобразить ее на странице.
Как использовать:
Настроить необходимые параметры в опции
var option = {emojiarray: ['angry'], // заполнить массив строк эмодзи, [Примечание: значок под изображением исходного файла, вам нужно только написать строку в красной коробке, см. Рисунок ниже для подробностей] Textareaid: 'emoji-editor', // IdloadId of IdemOnti-eDitor «emojicontainer», // объект контейнера, который хранит Emoji SendId: «Отправить», // кнопка для отправки информации IdemojitransLateCls: 'emoji-comment', // Имя класса контейнера, которое необходимо преобразовать в Emoji (IMG), только необходимо добавить класс к автоматическому рендеринге. = новый эмодзи (опция); text.init ();Скриншот приблизительного эффекта: (пользовательский интерфейс может украсить в соответствии с их потребностями)
После нажатия отправлена данные, отправленные на фоновый
Три принципа плагина смайлика:
• Как отображать выражения?
Спрайты CSS (технология интеграции изображений) сначала установите значок фона, затем определите положение, ширину, высоту каждого маленького значка и отобразите выражение, которое вы хотите отобразить. Проблемы, столкнутые в течение этого периода: как контролировать размер отображаемого выражения? Первое, о чем я подумал,-это метод размером с фонового размера, но очень «физический» переопределить его положение. Позже, когда будущее темное, я обнаружил преобразование свойства: масштаб (1,5); Чтобы управлять текущим коэффициентом масштабирования элемента, хаха, выполняется одна строка кода ~ Вы хотите, чтобы выражение было большим или маленьким, и вы не удовлетворены размером? Выполните весь код • Как отображать смайлики в поле ввода?
Сначала я выбрал Textarea of Input, но когда я помещаю смайлику «добавление» в поле ввода, значок не отображался. Позже я попробовал Div, а затем «добавить» и обнаружил, что выражение может быть успешно отображаться, но Div не мог ввести текст, который был бесплодным ...
Предварительная идея: используйте входной прослушивание, чтобы добавить значение Textarea в Div в режиме реального времени. Точно так же, это спасибо ~ продолжайте исследовать ...
Позже я обнаружил большое количество атрибутов. Довольствоваемое = "true" и с радостью выбрал довольный.
Вначале вы используете SPAN для размещения значка смайликов, но если вы поместите изображение с тегами Div или SPAN, довольные, которые будут добавлены в последний Div/SPAN по умолчанию ..., поэтому он заставит вас ввести значок смайликов, а затем ввести текст. Последний текст будет в последнем div/span, что не приведет к отсутствию текста. Хорошо ... я так устал ...
Поскольку div/span невозможен, используйте тег IMG, чтобы разместить выражение, и теперь вы наконец -то можете ввести его обычно.
[Довольствоваемое имеет проблему, он поддерживает богатый текст, небезопасен и имеет плохой пользовательский опыт. 】
Например: когда пользователи вставлены, они автоматически принесут формат. Примеры следующие:
Это код из онлайн -мастера для удаления богатой текстовой функции. Для конкретной ссылки: мастер -пост в блоге
• Как преобразовать изображения и текст?
В настоящее время вам нужно использовать мощные правила. Сначала используйте html (), чтобы получить контент, а затем обработать контент. Преобразовать в текст:
1 content.replace (/<img/b [^>]*/, imgobj [j]) // Сопоставление всех <img/> и заменить его на соответствующий формат
2 imgobj.push (формат + img [i] .getattribute ("alt") + format); // Я использую формат здесь: так что это формат, похожий на это: страх: преобразовать его в изображение:
var keys = '//+|-|||| ball | a | ab | abc | abcd | abcd | Принять ...' // Только какое-то зарегистрирование указано здесь. regex = new Regexp (':(' + keys + '):', 'g'), // Сопоставление формата, подобного следующему: $ (obj [i]). html (). Заменить (regex, emoji) // Заменить функцию emoji () {var key = arguments [] return '<img src = "class =" emoji emoJI_'/"/'/"/eMoji emo_'/'/"/emoji_'/''/eMoJI '/' '/eMoJ Соответствующий формат IMG}Формат кода всего плагина также является общим методом инкапсуляции.
// Emoji объект Mitable Attribute Function Emoji (Option) {this.emoji = option.emojiarray, this.textareaid = option.textareaid, this.loadid = option.loadid, this.sendid = option.sendid, this.emojicontainer = option.emojontainer, this.emojitranslatecls = = emojitras option.emojitranslatecls;}// Каждый раз, когда генерируется экземпляр, приведенные выше атрибуты будут регенерированы, так что для фиксированных методов он будет потреблять больше памяти. Это ни экологически, ни эффективно. Следовательно, эти неизменные свойства и методы могут быть непосредственно определены на объекте прототипа. В настоящее время все фиксированные методы на самом деле являются одним и тем же адресом памяти, указывая на объект прототипа, что повышает эффективность работы.
Emoji.prototype = {init: function () {// Поместите некоторые методы инициализации this.toemoji (); this.loademoji (); this.bindevent ();}, bindevent: function () {}, toemoji: function () {}, // преобразование данных сервера в emoticons totext: function () {} // конвертировать в Text loademoji: function () {} // Загрузить emoticons}Хорошо, даже если такой плагин для выражения завершен, легко ли привязать к нему или нет? В настоящее время вам нужно полагаться на jQuery на данный момент. Если у вас есть энергия, продолжайте расти с O (∩_∩) O на основе родного JS. Конкретный код реализации находится на GitHub. Наконец, прикрепите адрес github: https://github.com/beidan/emoji
Выше приведено введение JavaScript, которое редактор представил вам, начиная с 0, и я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!