Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
/** * emojiarea - A rich textarea control that supports emojis, WYSIWYG-style. * Copyright (c) 2012 DIY Co * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * * @author Brian Reavis <brian@diy.org> */ (function($, window, document) { var ELEMENT_NODE = 1; var TEXT_NODE = 3; var TAGS_BLOCK = ['p', 'div', 'pre', 'form']; var KEY_ESC = 27; var KEY_TAB = 9; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - $.emojiarea = { path: '', icons: {}, defaults: { button: null, buttonLabel: 'Emojis', buttonPosition: 'after' } }; $.fn.emojiarea = function(options) { options = $.extend({}, $.emojiarea.defaults, options); return this.each(function() { var $textarea = $(this); if ('contentEditable' in document.body && options.wysiwyg !== false) { new EmojiArea_WYSIWYG($textarea, options); } else { new EmojiArea_Plain($textarea, options); } }); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var util = {}; util.restoreSelection = (function() { if (window.getSelection) { return function(savedSelection) { var sel = window.getSelection(); sel.removeAllRanges(); for (var i = 0, len = savedSelection.length; i < len; ++i) { sel.addRange(savedSelection[i]); } }; } else if (document.selection && document.selection.createRange) { return function(savedSelection) { if (savedSelection) { savedSelection.select(); } }; } })(); util.saveSelection = (function() { if (window.getSelection) { return function() { var sel = window.getSelection(), ranges = []; if (sel.rangeCount) { for (var i = 0, len = sel.rangeCount; i < len; ++i) { ranges.push(sel.getRangeAt(i)); } } return ranges; }; } else if (document.selection && document.selection.createRange) { return function() { var sel = document.selection; return (sel.type.toLowerCase() !== 'none') ? sel.createRange() : null; }; } })(); util.replaceSelection = (function() { if (window.getSelection) { return function(content) { var range, sel = window.getSelection(); var node = typeof content === 'string' ? document.createTextNode(content) : content; if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(' ')); range.insertNode(node); range.setStart(node, 0); window.setTimeout(function() { range = document.createRange(); range.setStartAfter(node); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); }, 0); } } } else if (document.selection && document.selection.createRange) { return function(content) { var range = document.selection.createRange(); if (typeof content === 'string') { range.text = content; } else { range.pasteHTML(content.outerHTML); } } } })(); util.insertAtCursor = function(text, el) { text = ' ' + text; var val = el.value, endIndex, startIndex, range; if (typeof el.selectionStart != 'undefined' && typeof el.selectionEnd != 'undefined') { startIndex = el.selectionStart; endIndex = el.selectionEnd; el.value = val.substring(0, startIndex) + text + val.substring(el.selectionEnd); el.selectionStart = el.selectionEnd = startIndex + text.length; } else if (typeof document.selection != 'undefined' && typeof document.selection.createRange != 'undefined') { el.focus(); range = document.selection.createRange(); range.text = text; range.select(); } }; util.extend = function(a, b) { if (typeof a === 'undefined' || !a) { a = {}; } if (typeof b === 'object') { for (var key in b) { if (b.hasOwnProperty(key)) { a[key] = b[key]; } } } return a; }; util.escapeRegex = function(str) { return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); }; util.htmlEntities = function(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var EmojiArea = function() {}; EmojiArea.prototype.setup = function() { var self = this; this.$editor.on('focus', function() { self.hasFocus = true; }); this.$editor.on('blur', function() { self.hasFocus = false; }); this.setupButton(); }; EmojiArea.prototype.setupButton = function() { var self = this; var $button; if (this.options.button) { $button = $(this.options.button); } else if (this.options.button !== false) { $button = $('<a href="javascript:void(0)">'); $button.html(this.options.buttonLabel); $button.addClass('emoji-button'); $button.attr({title: this.options.buttonLabel}); this.$editor[this.options.buttonPosition]($button); } else { $button = $(''); } $button.on('click', function(e) { EmojiMenu.show(self); e.stopPropagation(); }); this.$button = $button; }; EmojiArea.createIcon = function(emoji) { var filename = $.emojiarea.icons[emoji]; var path = $.emojiarea.path || ''; if (path.length && path.charAt(path.length - 1) !== '/') { path += '/'; } return '<img src="' + path + filename + '" alt="' + util.htmlEntities(emoji) + '">'; }; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /** * Editor (plain-text) * * @constructor * @param {object} $textarea * @param {object} options */ var EmojiArea_Plain = function($textarea, options) { this.options = options; this.$textarea = $textarea; this.$editor = $textarea; this.setup(); }; EmojiArea_Plain.prototype.insert = function(emoji) { if (!$.emojiarea.icons.hasOwnProperty(emoji)) return; util.insertAtCursor(emoji, this.$textarea[0]); this.$textarea.trigger('change'); }; EmojiArea_Plain.prototype.val = function() { return this.$textarea.val(); }; util.extend(EmojiArea_Plain.prototype, EmojiArea.prototype); // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /** * Editor (rich) * * @constructor * @param {object} $textarea * @param {object} options */ var EmojiArea_WYSIWYG = function($textarea, options) { var self = this; this.options = options; this.$textarea = $textarea; this.$editor = $('<div>').addClass('emoji-wysiwyg-editor'); this.$editor.text($textarea.val()); this.$editor.attr({contenteditable: 'true'}); this.$editor.on('blur keyup paste', function() { return self.onChange.apply(self, arguments); }); this.$editor.on('mousedown focus', function() { document.execCommand('enableObjectResizing', false, false); }); this.$editor.on('blur', function() { document.execCommand('enableObjectResizing', true, true); }); var html = this.$editor.text(); var emojis = $.emojiarea.icons; for (var key in emojis) { if (emojis.hasOwnProperty(key)) { html = html.replace(new RegExp(util.escapeRegex(key), 'g'), EmojiArea.createIcon(key)); } } this.$editor.html(html); $textarea.hide().after(this.$editor); this.setup(); this.$button.on('mousedown', function() { if (self.hasFocus) { self.selection = util.saveSelection(); } }); }; EmojiArea_WYSIWYG.prototype.onChange = function() { this.$textarea.val(this.val()).trigger('change'); }; EmojiArea_WYSIWYG.prototype.insert = function(emoji) { var content; var $img = $(EmojiArea.createIcon(emoji)); if ($img[0].attachEvent) { $img[0].attachEvent('onresizestart', function(e) { e.returnValue = false; }, false); } this.$editor.trigger('focus'); if (this.selection) { util.restoreSelection(this.selection); } try { util.replaceSelection($img[0]); } catch (e) {} this.onChange(); }; EmojiArea_WYSIWYG.prototype.val = function() { var lines = []; var line = []; var flush = function() { lines.push(line.join('')); line = []; }; var sanitizeNode = function(node) { if (node.nodeType === TEXT_NODE) { line.push(node.nodeValue); } else if (node.nodeType === ELEMENT_NODE) { var tagName = node.tagName.toLowerCase(); var isBlock = TAGS_BLOCK.indexOf(tagName) !== -1; if (isBlock && line.length) flush(); if (tagName === 'img') { var alt = node.getAttribute('alt') || ''; if (alt) line.push(alt); return; } else if (tagName === 'br') { flush(); } var children = node.childNodes; for (var i = 0; i < children.length; i++) { sanitizeNode(children[i]); } if (isBlock && line.length) flush(); } }; var children = this.$editor[0].childNodes; for (var i = 0; i < children.length; i++) { sanitizeNode(children[i]); } if (line.length) flush(); return lines.join('\n'); }; util.extend(EmojiArea_WYSIWYG.prototype, EmojiArea.prototype); // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /** * Emoji Dropdown Menu * * @constructor * @param {object} emojiarea */ var EmojiMenu = function() { var self = this; var $body = $(document.body); var $window = $(window); this.visible = false; this.emojiarea = null; this.$menu = $('<div>'); this.$menu.addClass('emoji-menu'); this.$menu.hide(); this.$items = $('<div>').appendTo(this.$menu); $body.append(this.$menu); $body.on('keydown', function(e) { if (e.keyCode === KEY_ESC || e.keyCode === KEY_TAB) { self.hide(); } }); $body.on('mouseup', function() { self.hide(); }); $window.on('resize', function() { if (self.visible) self.reposition(); }); this.$menu.on('mouseup', 'a', function(e) { e.stopPropagation(); return false; }); this.$menu.on('click', 'a', function(e) { var emoji = $('.label', $(this)).text(); window.setTimeout(function() { self.onItemSelected.apply(self, [emoji]); }, 0); e.stopPropagation(); return false; }); this.load(); }; EmojiMenu.prototype.onItemSelected = function(emoji) { this.emojiarea.insert(emoji); this.hide(); }; EmojiMenu.prototype.load = function() { var html = []; var options = $.emojiarea.icons; var path = $.emojiarea.path; if (path.length && path.charAt(path.length - 1) !== '/') { path += '/'; } for (var key in options) { if (options.hasOwnProperty(key)) { var filename = options[key]; html.push('<a href="javascript:void(0)" title="' + util.htmlEntities(key) + '">' + EmojiArea.createIcon(key) + '<span class="label">' + util.htmlEntities(key) + '</span></a>'); } } this.$items.html(html.join('')); }; EmojiMenu.prototype.reposition = function() { var $button = this.emojiarea.$button; var offset = $button.offset(); offset.top += $button.outerHeight(); offset.left += Math.round($button.outerWidth() / 2); this.$menu.css({ top: offset.top, left: offset.left }); }; EmojiMenu.prototype.hide = function(callback) { if (this.emojiarea) { this.emojiarea.menu = null; this.emojiarea.$button.removeClass('on'); this.emojiarea = null; } this.visible = false; this.$menu.hide(); }; EmojiMenu.prototype.show = function(emojiarea) { if (this.emojiarea && this.emojiarea === emojiarea) return; this.emojiarea = emojiarea; this.emojiarea.menu = this; this.reposition(); this.$menu.show(); this.visible = true; }; EmojiMenu.show = (function() { var menu = null; return function(emojiarea) { menu = menu || new EmojiMenu(); menu.show(emojiarea); }; })(); })(jQuery, window, document);
document.getElementById('id').innerHtml = newContent;
$('#id').html(newContent);
document.getElementById('id').value = newContent; $('#id').val(newContent);
