/** * Trumbowyg v1.1.6 - A lightweight WYSIWYG editor * Trumbowyg core file * ------------------------ * @link http://alex-d.github.io/Trumbowyg * @license MIT * @author Alexandre Demode (Alex-D) * Twitter : @AlexandreDemode * Website : alex-d.fr */ jQuery.trumbowyg = { langs: { en: { viewHTML: "View HTML", formatting: "Formatting", p: "Paragraph", blockquote: "Quote", code: "Code", header: "Header", bold: "Bold", italic: "Italic", strikethrough: "Stroke", underline: "Underline", strong: "Strong", em: "Emphasis", del: "Deleted", unorderedList: "Unordered list", orderedList: "Ordered list", insertImage: "Insert Image", insertVideo: "Insert Video", link: "Link", createLink: "Insert link", unlink: "Remove link", justifyLeft: "Align Left", justifyCenter: "Align Center", justifyRight: "Align Right", justifyFull: "Align Justify", horizontalRule: "Insert horizontal rule", fullscreen: "fullscreen", close: "Close", submit: "Confirm", reset: "Cancel", invalidUrl: "Invalid URL", required: "Required", description: "Description", title: "Title", text: "Text" } }, // User default options opts: {}, btnsGrps: { design: ['bold', 'italic', 'underline', 'strikethrough'], semantic: ['strong', 'em', 'del'], justify: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], lists: ['unorderedList', 'orderedList'] } }; (function(window, document, $, undefined){ 'use strict'; // @param : o are options // @param : p are params $.fn.trumbowyg = function(o, p){ if(o === Object(o) || !o){ return this.each(function(){ if(!$(this).data('trumbowyg')) $(this).data('trumbowyg', new Trumbowyg(this, o)); }); } else if(this.length === 1){ try { var t = $(this).data('trumbowyg'); switch(o){ // Modal box case 'openModal': return t.openModal(p.title, p.content); case 'closeModal': return t.closeModal(); case 'openModalInsert': return t.openModalInsert(p.title, p.fields, p.callback); // Selection case 'saveSelection': return t.saveSelection(); case 'getSelection': return t.selection; case 'getSelectedText': return t.selection+''; case 'restoreSelection': return t.restoreSelection(); // Destroy case 'destroy': return t.destroy(); // Empty case 'empty': return t.empty(); // Public options case 'lang': return t.lang; case 'duration': return t.o.duration; // HTML case 'html': return t.html(p); } } catch(e){} } return false; }; var Trumbowyg = function(editorElem, opts){ var t = this; // Get the document of the element. It use to makes the plugin // compatible on iframes. t.doc = editorElem.ownerDocument || document; // jQuery object of the editor t.$e = $(editorElem); t.$creator = $(editorElem); // Extend with options opts = $.extend(true, {}, opts, $.trumbowyg.opts); // Localization management if(typeof opts.lang === 'undefined' || typeof $.trumbowyg.langs[opts.lang] === 'undefined') t.lang = $.trumbowyg.langs.en; else t.lang = $.extend(true, {}, $.trumbowyg.langs.en, $.trumbowyg.langs[opts.lang]); // Defaults Options t.o = $.extend(true, {}, { lang: 'en', dir: 'ltr', duration: 200, // Duration of modal box animations mobile: false, tablet: true, closable: false, fullscreenable: true, fixedBtnPane: false, fixedFullWidth: false, autogrow: false, prefix: 'trumbowyg-', // WYSIWYG only convertLink: true, // TODO semantic: false, resetCss: false, btns: [ 'viewHTML', '|', 'formatting', '|', $.trumbowyg.btnsGrps.design, '|', 'link', '|', 'insertImage', '|', $.trumbowyg.btnsGrps.justify, '|', $.trumbowyg.btnsGrps.lists, '|', 'horizontalRule' ], btnsAdd: [], /** * When the button is associated to a empty object * func and title attributs are defined from the button key value * * For example * foo: {} * is equivalent to : * foo: { * func: 'foo', * title: this.lang.foo * } */ btnsDef: { viewHTML: { func: 'toggle' }, p: { func: 'formatBlock' }, blockquote: { func: 'formatBlock' }, h1: { func: 'formatBlock', title: t.lang.header + ' 1' }, h2: { func: 'formatBlock', title: t.lang.header + ' 2' }, h3: { func: 'formatBlock', title: t.lang.header + ' 3' }, h4: { func: 'formatBlock', title: t.lang.header + ' 4' }, bold: {}, italic: {}, underline: {}, strikethrough: {}, strong: { func: 'bold' }, em: { func: 'italic' }, del: { func: 'strikethrough' }, createLink: {}, unlink: {}, insertImage: {}, justifyLeft: {}, justifyCenter: {}, justifyRight: {}, justifyFull: {}, unorderedList: { func: 'insertUnorderedList' }, orderedList: { func: 'insertOrderedList' }, horizontalRule: { func: 'insertHorizontalRule' }, // Dropdowns formatting: { dropdown: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4'] }, link: { dropdown: ['createLink', 'unlink'] } } }, opts); if(t.o.semantic && !opts.btns) t.o.btns = [ 'viewHTML', '|', 'formatting', '|', $.trumbowyg.btnsGrps.semantic, '|', 'link', '|', 'insertImage', '|', $.trumbowyg.btnsGrps.justify, '|', $.trumbowyg.btnsGrps.lists, '|', 'horizontalRule' ]; else if(opts && opts.btns) t.o.btns = opts.btns; t.init(); }; Trumbowyg.prototype = { init: function(){ var t = this; t.height = t.$e.css('height'); if(t.isEnabled()){ t.buildEditor(true); return; } t.buildEditor(); t.buildBtnPane(); t.fixedBtnPaneEvents(); t.buildOverlay(); }, buildEditor: function(disable){ var t = this, pfx = t.o.prefix, html = ''; if(disable === true){ if(!t.$e.is('textarea')){ var textarea = t.buildTextarea().val(t.$e.val()); t.$e.hide().after(textarea); } return; } t.$box = $('
', { class: pfx + 'box ' + pfx + t.o.lang + ' trumbowyg' }); t.isTextarea = true; if(t.$e.is('textarea')) t.$editor = $('
'); else { t.$editor = t.$e; t.$e = t.buildTextarea().val(t.$e.val()); t.isTextarea = false; } if(t.$creator.is('[placeholder]')) t.$editor.attr('placeholder', t.$creator.attr('placeholder')); t.$e.hide() .addClass(pfx + 'textarea'); if(t.isTextarea){ html = t.$e.val(); t.$box.insertAfter(t.$e) .append(t.$editor) .append(t.$e); } else { html = t.$editor.html(); t.$box.insertAfter(t.$editor) .append(t.$e) .append(t.$editor); t.syncCode(); } t.$editor.addClass(pfx + 'editor') .attr('contenteditable', true) .attr('dir', t.lang._dir || t.o.dir) .html(html); if(t.o.resetCss) t.$editor.addClass(pfx + 'reset-css'); if(!t.o.autogrow){ $.each([t.$editor, t.$e], function(i, $el){ $el.css({ height: t.height, overflow: 'auto' }); }); } if(t.o.semantic){ t.$editor.html( t.$editor.html() .replace('
', '

') .replace(' ', '') ); t.semanticCode(); } t.$editor .on('dblclick', 'img', function(e){ var $img = $(this); t.openModalInsert(t.lang.insertImage, { url: { label: 'URL', value: $img.attr('src'), required: true }, alt: { label: 'description', value: $img.attr('alt') } }, function(v){ $img.attr({ src: v.url, alt: v.alt }); }); e.stopPropagation(); }) .on('keyup', function(e){ t.semanticCode(false, e.which === 13); }) .on('focus', function(){ t.$creator.trigger('tbwfocus'); }) .on('blur', function(){ t.syncCode(); t.$creator.trigger('tbwblur'); }); }, // Build the Textarea which contain HTML generated code buildTextarea: function(){ return $('