jquery轻量级富文本编辑器Trumbowyg
html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="renderer" content="webkit"> <title></title> <link rel="stylesheet" href="assets/trumbowyg.css"> ...... <script type="text/javascript" src="js/jquery.js"></script> ...... <script type="text/javascript" src="assets/trumbowyg.js"></script> ...... <script type="text/javascript" src="assets/trumbowyg.upload.js"></script> </head> <body> <div id="odiv" style="display:none;position:absolute;z-index:100;"> <img src="assets/pic/sx.png" title="缩小" border="0" alt="缩小" onclick="sub(-1);"/> <img src="assets/pic/fd.png" title="放大" border="0" alt="放大" onclick="sub(1)"/> <img src="assets/pic/cz.png" title="重置" border="0" alt="重置" onclick="sub(0)"/> <img src="assets/pic/sc.png" title="删除" border="0" alt="删除" onclick="del();odiv.style.display='none';"/> </div> <div onmousedown="show_element(event)" style="clear:both" id="customized-buttonpane" class="editor"></div> </body> </head>
trumbowyg.css
.trumbowyg-box,.editor{clear:both;display:block;position:relative;border:1px solid #DDD;width:100%;min-height:300px;margin:17px auto}.trumbowyg-box .editor{margin:0 auto;background:#FEFEFE}.trumbowyg-box.trumbowyg-fullscreen{background:#FEFEFE}.trumbowyg-editor,.trumbowyg-textarea{position:relative;padding:1% 2%;min-height:300px;width:96%;border-style:none;resize:none;outline:none}.trumbowyg-box-blur .trumbowyg-editor *{color:transparent !important;text-shadow:0 0 7px #333}.trumbowyg-box-blur .trumbowyg-editor img{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:0.2}.trumbowyg-textarea{position:relative;display:block;overflow:auto;border:none;white-space:normal}.trumbowyg-button-pane{position:relative;width:100%;background:#ecf0f1;border-bottom:1px solid #d7e0e2;margin:0;padding:0;list-style-type:none;line-height:10px}.trumbowyg-button-pane li{display:inline-block;text-align:center;overflow:hidden}.trumbowyg-button-pane li.trumbowyg-separator{width:1px;background:#d7e0e2;margin:0 5px;height:35px}.trumbowyg-button-pane.trumbowyg-disable li:not(.trumbowyg-not-disable) button{opacity:.2;cursor:default}.trumbowyg-button-pane.trumbowyg-disable li.trumbowyg-separator{background:#e3e9eb}.trumbowyg-button-pane:not(.trumbowyg-disable) li button:hover,.trumbowyg-button-pane:not(.trumbowyg-disable) li button:focus,.trumbowyg-button-pane li button.trumbowyg-active,.trumbowyg-button-pane li.trumbowyg-not-disable button:hover,.trumbowyg-button-pane li.trumbowyg-not-disable button:focus{outline:none}.trumbowyg-button-pane li .trumbowyg-open-dropdown:after{display:block;content:" ";position:absolute;top:25px;right:3px;height:0;width:0;border:3px solid transparent;border-top-color:#555}.trumbowyg-button-pane .trumbowyg-buttons-right{float:right;width:auto}.trumbowyg-button-pane .trumbowyg-buttons-right button{float:left}.trumbowyg-dropdown{width:200px;border:1px solid #ecf0f1;padding:5px 0;border-top:none;background:#FFF;margin-left:-1px;-moz-box-shadow:rgba(0,0,0,0.1) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.1) 0 2px 3px;box-shadow:rgba(0,0,0,0.1) 0 2px 3px}.trumbowyg-dropdown button{display:block;width:100%;height:35px;line-height:35px;text-decoration:none;background:#FFF;padding:0 14px;color:#333;border:none;cursor:pointer;text-align:left;font-size:15px;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-dropdown button:hover,.trumbowyg-dropdown button:focus{background:#ecf0f1}.trumbowyg-modal{position:absolute;top:0;left:50%;margin-left:-260px;width:520px;height:290px;overflow:hidden}.trumbowyg-modal-box{position:absolute;top:0;left:50%;margin-left:-250px;width:400px;padding: 10px 10px 35px 30px;z-index:1;background-color:#FFF;text-align:center;-moz-box-shadow:rgba(0,0,0,0.2) 0 2px 3px;-webkit-box-shadow:rgba(0,0,0,0.2) 0 2px 3px;box-shadow:rgba(0,0,0,0.2) 0 2px 3px}.trumbowyg-modal-box .trumbowyg-modal-title{font-size:24px;font-weight:bold;margin:0 0 20px;padding:15px 0 13px;display:block;border-bottom:1px solid #EEE;color:#333;background:#fbfcfc}.trumbowyg-modal-box .trumbowyg-progress{width:80%;background:#F00;height:3px;position:absolute;top:58px}.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar{background:#2BC06A;height:100%;-moz-transition:width 0.15s linear;-o-transition:width 0.15s linear;-webkit-transition:width 0.15s linear;transition:width 0.15s linear}.trumbowyg-modal-box input,input[type=text]{width:100%;}.trumbowyg-modal-box label{display:block;position:relative;margin:15px 12px;height:27px;line-height:27px;overflow:hidden}.trumbowyg-modal-box label .trumbowyg-input-infos{display:block;text-align:left;height:25px;line-height:25px;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-modal-box label .trumbowyg-input-infos span{display:block;color:#859fa5;background-color:#fbfcfc;border:1px solid #DEDEDE;padding:0 2%;width:19.5%}.trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error{color:#e74c3c}.trumbowyg-modal-box label.trumbowyg-input-error input,.trumbowyg-modal-box label.trumbowyg-input-error textarea{border:1px solid #e74c3c}.trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos{margin-top:-27px}.trumbowyg-modal-box label input{position:absolute;top:0;right:20px;height:25px;line-height:25px;border:1px solid #DEDEDE;background:transparent;width:72%;padding:0 2%;margin:0 0 0 23%;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s}.trumbowyg-modal-box label input:hover,.trumbowyg-modal-box label input:focus{outline:none;border:1px solid #95a5a6}.trumbowyg-modal-box label input:focus{background:rgba(230,230,255,0.1)}.trumbowyg-modal-box .error{margin-top:25px;display:block;color:red}.trumbowyg-modal-box .trumbowyg-modal-button{position:absolute;bottom:10px;right:0;text-decoration:none;color:#FFF;display:block;width:70px; height:35px;line-height:33px;margin:0 10px;background-color:#333;border:none;border-top:none;cursor:pointer;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s;margin-right: 100px;}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit{right:110px;background:#2bc06a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus{background:#40d47e;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active{background:#25a25a}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset{background:#b33528}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover,.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus{background:#d14233;outline:none}.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active{background:#962d22}.trumbowyg-overlay{position:absolute;background-color:rgba(255,255,255,0.5);width:100%;left:0;display:none}.trumbowyg-fullscreen.trumbowyg-box,.trumbowyg-fullscreen .editor{border:none}.trumbowyg-fullscreen .trumbowyg-overlay{height:100% !important}.trumbowyg-editor object,.trumbowyg-editor embed,.trumbowyg-editor video,.trumbowyg-editor img{max-width:100%}.trumbowyg-editor video,.trumbowyg-editor img{cursor:move}.trumbowyg-editor.trumbowyg-reset-css{background:#FEFEFE !important;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif !important;font-size:14px !important;line-height:1.45em !important;white-space:normal !important;color:#333}.trumbowyg-editor.trumbowyg-reset-css a{color:#15c !important;text-decoration:underline !important}.trumbowyg-editor.trumbowyg-reset-css div,.trumbowyg-editor.trumbowyg-reset-css p,.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css blockquote{box-shadow:none !important;background:none !important;margin:0 !important;margin-bottom:15px !important;line-height:1.4em !important;font-family:"Trebuchet MS", Helvetica, Verdana, sans-serif !important;font-size:14px !important;border:none}.trumbowyg-editor.trumbowyg-reset-css iframe,.trumbowyg-editor.trumbowyg-reset-css object,.trumbowyg-editor.trumbowyg-reset-css hr{margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css blockquote{margin-left:32px !important;font-style:italic !important;color:#555}.trumbowyg-editor.trumbowyg-reset-css ul,.trumbowyg-editor.trumbowyg-reset-css ol{padding-left:20px !important}.trumbowyg-editor.trumbowyg-reset-css ul ul,.trumbowyg-editor.trumbowyg-reset-css ol ol,.trumbowyg-editor.trumbowyg-reset-css ul ol,.trumbowyg-editor.trumbowyg-reset-css ol ul{border:none;margin:2px !important;padding:0 !important;padding-left:24px !important}.trumbowyg-editor.trumbowyg-reset-css hr{display:block;height:1px;border:none;border-top:1px solid #CCC}.trumbowyg-editor.trumbowyg-reset-css h1,.trumbowyg-editor.trumbowyg-reset-css h2,.trumbowyg-editor.trumbowyg-reset-css h3,.trumbowyg-editor.trumbowyg-reset-css h4{color:#111;background:none;margin:0 !important;padding:0 !important;font-weight:bold}.trumbowyg-editor.trumbowyg-reset-css h1{font-size:32px !important;line-height:38px !important;margin-bottom:20px !important}.trumbowyg-editor.trumbowyg-reset-css h2{font-size:26px !important;line-height:34px !important;margin-bottom:15px !important}.trumbowyg-editor.trumbowyg-reset-css h3{font-size:22px !important;line-height:28px !important;margin-bottom:7px !important}.trumbowyg-editor.trumbowyg-reset-css h4{font-size:16px !important;line-height:22px !important;margin-bottom:7px !important}.trumbowyg-button-pane li button{display:block;position:relative;text-indent:-9999px;width:35px;height:35px;overflow:hidden;background:transparent url('icons-sa75ce98b2b.png') no-repeat;border:none;cursor:pointer;-moz-transition:all 0.15s;-o-transition:all 0.15s;-webkit-transition:all 0.15s;transition:all 0.15s;transition:background-color .15s, background-image .15s, opacity .15s}.trumbowyg-button-pane li button.trumbowyg-viewHTML-button{background-position:5px -545px}.trumbowyg-button-pane li button.trumbowyg-formatting-button{background-position:5px -120px}.trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-button-pane li button.trumbowyg-strong-button{background-position:5px -45px}.trumbowyg-button-pane li button.trumbowyg-italic-button,.trumbowyg-button-pane li button.trumbowyg-em-button{background-position:5px -270px}.trumbowyg-button-pane li button.trumbowyg-underline-button{background-position:5px -470px}.trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-button-pane li button.trumbowyg-del-button{background-position:5px -445px}.trumbowyg-button-pane li button.trumbowyg-link-button{background-position:5px -345px}.trumbowyg-button-pane li button.trumbowyg-insertImage-button{background-position:5px -245px}.trumbowyg-button-pane li button.trumbowyg-justifyLeft-button{background-position:5px -320px}.trumbowyg-button-pane li button.trumbowyg-justifyCenter-button{background-position:5px -70px}.trumbowyg-button-pane li button.trumbowyg-justifyRight-button{background-position:5px -395px}.trumbowyg-button-pane li button.trumbowyg-justifyFull-button{background-position:5px -295px}.trumbowyg-button-pane li button.trumbowyg-unorderedList-button{background-position:5px -495px}.trumbowyg-button-pane li button.trumbowyg-orderedList-button{background-position:5px -370px}.trumbowyg-button-pane li button.trumbowyg-horizontalRule-button{background-position:5px -220px}.trumbowyg-button-pane li button.trumbowyg-fullscreen-button{background-position:5px -170px}.trumbowyg-button-pane li button.trumbowyg-close-button{background-position:5px -95px}.trumbowyg-fullscreen .trumbowyg-button-pane li button.trumbowyg-fullscreen-button{background-position:5px -145px}.trumbowyg-button-pane li:first-child button{margin-left:6px}.trumbowyg-button-pane li:last-child button{margin-right:6px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button{background-position:5px -195px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button{background-position:5px -420px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button{background-position:5px -20px}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){.trumbowyg-button-pane li button{background-size:72%;background-image:url('../images/icons-2x-s9034954e6d.png')}.trumbowyg-button-pane li button.trumbowyg-viewHTML-button{background-position:5px -545px}.trumbowyg-button-pane li button.trumbowyg-formatting-button{background-position:5px -120px}.trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-button-pane li button.trumbowyg-strong-button{background-position:5px -45px}.trumbowyg-button-pane li button.trumbowyg-italic-button,.trumbowyg-button-pane li button.trumbowyg-em-button{background-position:5px -270px}.trumbowyg-button-pane li button.trumbowyg-underline-button{background-position:5px -470px}.trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-button-pane li button.trumbowyg-del-button{background-position:5px -445px}.trumbowyg-button-pane li button.trumbowyg-link-button{background-position:5px -345px}.trumbowyg-button-pane li button.trumbowyg-insertImage-button{background-position:5px -245px}.trumbowyg-button-pane li button.trumbowyg-justifyLeft-button{background-position:5px -320px}.trumbowyg-button-pane li button.trumbowyg-justifyCenter-button{background-position:5px -70px}.trumbowyg-button-pane li button.trumbowyg-justifyRight-button{background-position:5px -395px}.trumbowyg-button-pane li button.trumbowyg-justifyFull-button{background-position:5px -295px}.trumbowyg-button-pane li button.trumbowyg-unorderedList-button{background-position:5px -495px}.trumbowyg-button-pane li button.trumbowyg-orderedList-button{background-position:5px -370px}.trumbowyg-button-pane li button.trumbowyg-horizontalRule-button{background-position:5px -220px}.trumbowyg-button-pane li button.trumbowyg-fullscreen-button{background-position:5px -170px}.trumbowyg-button-pane li button.trumbowyg-close-button{background-position:5px -95px}.trumbowyg-fullscreen .trumbowyg-button-pane li a.trumbowyg-fullscreen-button{background-position:5px -145px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-bold-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strong-button{background-position:5px -195px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-underline-button{background-position:5px -420px}.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-strikethrough-button,.trumbowyg-fr .trumbowyg-button-pane li button.trumbowyg-del-button{background-position:5px -20px}} html, body { margin: 0; padding: 0; } header { text-align: center; } #main { max-width: 960px; margin: 0 auto; }
trumbowyg.js
/* =========================================================== * trumbowyg.js v1.0 * Core code of Trumbowyg plugin * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Alexandre Demode (Alex-D) * Twitter : @AlexandreDemode * Website : alex-d.fr */ $.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($){ $.fn.trumbowyg = function(opts, params){ if($.isObject(opts) || opts == null){ return this.each(function(){ if(!$(this).data('trumbowyg')) $(this).data('trumbowyg', new Trumbowyg(this, opts)); }); } else if(this.length == 1){ try { var t = $(this).data('trumbowyg'); switch(opts){ // Modal box case 'openModal': return t.openModal(params.title, params.content); case 'closeModal': return t.closeModal(); case 'openModalInsert': return t.openModalInsert(params.title, params.fields, params.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(params); } } catch(e){} } return false; }; var Trumbowyg = function(editorElem, opts){ // jQuery object of the editor this.$e = $(editorElem); this.$creator = $(editorElem); // Extend with options opts = $.extend(true, {}, opts, $.trumbowyg.opts); // Localization management if(typeof opts.lang === 'undefined' || typeof $.trumbowyg.langs[opts.lang] === 'undefined') this.lang = $.trumbowyg.langs['en']; else this.lang = $.extend(true, {}, $.trumbowyg.langs['en'], $.trumbowyg.langs[opts.lang]); // Defaults Options this.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, semantic: false, resetCss: false, autogrow: false, prefix: 'trumbowyg-', convertLink: true, 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: this.lang.header + ' 1' }, h2: { func: 'formatBlock', title: this.lang.header + ' 2' }, h3: { func: 'formatBlock', title: this.lang.header + ' 3' }, h4: { func: 'formatBlock', title: this.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(this.o.semantic && !opts.btns) this.o.btns = [ 'viewHTML', '|', 'formatting', '|', $.trumbowyg.btnsGrps.semantic, '|', 'link', '|', 'insertImage', '|', $.trumbowyg.btnsGrps.justify, '|', $.trumbowyg.btnsGrps.lists, '|', 'horizontalRule' ]; else if(opts && opts.btns) this.o.btns = opts.btns; this.init(); } Trumbowyg.prototype = { init: function(){ this.height = this.$e.css('height'); if(this.isEnabled()){ this.buildEditor(true); return; } this.buildEditor(); this.buildBtnPane(); this.fixedBtnPaneEvents(); this.buildOverlay(); }, buildEditor: function(disable){ if(disable === true){ if(!this.$e.is('textarea')){ var textarea = this.buildTextarea().val(this.$e.val()); this.$e.hide().after(textarea); } return; } this.$box = $('<div/>', { 'class': this.o.prefix + 'box ' + this.o.prefix + this.o.lang + ' trumbowyg' }); this.isTextarea = true; if(this.$e.is('textarea')) this.$editor = $('<div/>'); else { this.$editor = this.$e; this.$e = this.buildTextarea().val(this.$e.val()); this.isTextarea = false; } this.$e.hide() .addClass(this.o.prefix + 'textarea'); var html = ''; if(this.isTextarea){ html = this.$e.val(); this.$box.insertAfter(this.$e) .append(this.$editor) .append(this.$e); } else { html = this.$editor.html(); this.$box.insertAfter(this.$editor) .append(this.$e) .append(this.$editor); this.syncCode(); } this.$editor.addClass(this.o.prefix + 'editor') .attr('contenteditable', true) .attr('dir', this.o.dir) .html(html); if(this.o.resetCss) this.$editor.addClass(this.o.prefix + 'reset-css'); if(!this.o.autogrow){ $.each([this.$editor, this.$e], $.proxy(function(i, $el){ $el.css({ overflow: 'auto' }); }, this)); } if(this.o.semantic){ this.$editor.html( this.$editor.html() .replace("<br>", "</p><p>") .replace("&nsbp;", "") ); this.semanticCode(); } var that = this; this.$editor .on('dblclick', 'img', function(){ var $img = $(this); that.openModalInsert(that.lang.insertImage, { url: { label: 'URL', value: $img.attr('src'), required: true }, alt: { label: 'description', value: $img.attr('alt') } }, function(values){ $img.attr('src', values['url']); $img.attr('alt', values['alt']); }); return false; }) .on('keyup', function(e){ that.semanticCode(false, e.which === 13); }) .on('blur', function(){ that.syncCode(); }); }, // Build the Textarea which contain HTML generated code buildTextarea: function(){ return $('<textarea/>', { 'name': this.$e.attr('id'), 'height': this.height }); }, // Build button pane, use o.btns and o.btnsAdd options buildBtnPane: function(){ var t = this; if(t.o.btns === false) return; var pfx = t.o.prefix; t.$btnPane = $('<ul/>', { 'class': pfx + 'button-pane' }); $.each(t.o.btns.concat(t.o.btnsAdd), $.proxy(function(i, btn){ // Managment of group of buttons try { var b = btn.split('btnGrp-'); if(b[1] != undefined) btn = $.trumbowyg.btnsGrps[b[1]]; } catch(e){} if(!$.isArray(btn)) btn = [btn]; $.each(btn, $.proxy(function(i, btn){ try { // Prevent buildBtn error var $li = $('<li/>'); if(btn === '|') // It's a separator $li.addClass(pfx + 'separator'); else if(t.isSupportedBtn(btn)){ // It's a supported button if(btn === 'viewHTML') $li.addClass(pfx + 'not-disable'); $li.append(t.buildBtn(btn)); } t.$btnPane.append($li); } catch(e){} }, t)); }, t)); // Build right li for fullscreen and close buttons var $liRight = $('<li/>', { 'class': pfx + 'not-disable ' + pfx + 'buttons-right' }); // Add the fullscreen button if(t.o.fullscreenable) $liRight .append(t.buildRightBtn('fullscreen') .on('click', $.proxy(function(e){ var cssClass = pfx + 'fullscreen'; t.$box.toggleClass(cssClass); if(t.$box.hasClass(cssClass)){ $('body').css('overflow', 'hidden'); t.$box.css({ position: 'fixed', top: 0, left: 0, width: '100%', margin: 0, padding: 0, zIndex: 99999 }); $([t.$editor, t.$e]).each(function(){ $(this).css({ overflow: 'auto' }); }); t.$btnPane.css('width', '100%'); $(".trumbowyg-fullscreen .editor").css("height",$(window).height()-65); } else { $('body').css('overflow', 'auto'); t.$box.removeAttr('style'); if(!t.o.autogrow){ h = t.height; $([t.$editor, t.$e]).each(function(i, $el){ $el.css('height', h); }); } } $(window).trigger('scroll'); }, t))); // Build and add close button if(t.o.closable) $liRight .append(t.buildRightBtn('close') .on('click', $.proxy(function(e){ var cssClass = pfx + 'fullscreen'; if(t.$box.hasClass(cssClass)) $('body').css('overflow', 'auto'); t.destroy(); }, t))); // Add right li only if isn't empty if($liRight.not(':empty')) t.$btnPane.append($liRight); t.$box.prepend(t.$btnPane); }, // Build a button and his action buildBtn: function(name){ var pfx = this.o.prefix, btnDef = this.o.btnsDef[name], t = this, textDef = this.lang[name] || name.charAt(0).toUpperCase() + name.slice(1); var $btn = $('<button/>', { 'type': 'button', 'class': pfx + name +'-button' + (btnDef.ico ? ' '+ pfx + btnDef.ico +'-button' : ''), 'text': btnDef.text || btnDef.title || textDef, 'title': btnDef.title || btnDef.text || textDef, 'mousedown': function(e){ if(!btnDef.dropdown || t.$box.find('.'+name+'-'+pfx + 'dropdown').is(':hidden')) $('body').trigger('mousedown'); if(t.$btnPane.hasClass(pfx + 'disable') && !$(this).parent().hasClass(pfx + 'not-disable')) return false; t.execCommand((btnDef.dropdown ? 'dropdown' : false) || btnDef.func || name, btnDef.param || name); e.stopPropagation(); e.preventDefault(); return false; } }); if(btnDef.dropdown){ $btn.addClass(pfx + 'open-dropdown'); var cssClass = pfx + 'dropdown'; var dropdown = $('<div/>', { 'class': name + '-' + cssClass + ' ' + cssClass + ' ' + pfx + 'fixed-top' }); for(var i = 0, c = btnDef.dropdown.length; i < c; i++){ if(t.o.btnsDef[btnDef.dropdown[i]] && t.isSupportedBtn(btnDef.dropdown[i])) dropdown.append(t.buildSubBtn(btnDef.dropdown[i])); } this.$box.append(dropdown.hide()); } return $btn; }, // Build a button for dropdown menu buildSubBtn: function(name){ var btnDef = this.o.btnsDef[name]; return $('<button/>', { 'type': 'button', 'text': btnDef.text || btnDef.title || this.lang[name] || name, 'mousedown': $.proxy(function(e){ $('body').trigger('mousedown'); this.execCommand(btnDef.func || name, btnDef.param || name); e.stopPropagation(); e.preventDefault(); return false; }, this) }); }, // Build a button for right li buildRightBtn: function(name){ return $('<button/>', { 'type': 'button', 'class': this.o.prefix + name+'-button', 'title': this.lang[name], 'text': this.lang[name] }); }, // Check if button is supported isSupportedBtn: function(btn){ return typeof this.o.btnsDef[btn].isSupported !== 'function' || this.o.btnsDef[btn].isSupported() }, // Build overlay for modal box buildOverlay: function(){ return this.$overlay = $('<div/>', { 'class': this.o.prefix + 'overlay' }).css({ top: this.$btnPane.outerHeight(), height: (parseInt(this.$editor.outerHeight()) + 1) + 'px' }).appendTo(this.$box); }, showOverlay: function(){ $(window).trigger('scroll'); this.$overlay.fadeIn(this.o.duration); this.$box.addClass(this.o.prefix + 'box-blur'); }, hideOverlay: function(){ this.$overlay.fadeOut(this.o.duration/4); this.$box.removeClass(this.o.prefix + 'box-blur'); }, // Management of fixed button pane fixedBtnPaneEvents: function(){ if(!this.o.fixedBtnPane) return; this.isFixed = false; $(window).on('scroll', $.proxy(function(e){ if(!this.$box) return; this.syncCode(); var wScroll = $(window).scrollTop(), offset = this.$box.offset().top + 1, toFixed = (wScroll - offset > 0) && ((wScroll - offset - parseInt(this.height)) < 0); if(toFixed){ if(!this.isFixed){ this.isFixed = true; this.$btnPane.css({ position: 'fixed', top: 0, left: (this.o.fixedFullWidth) ? '0' : 'auto', width: (this.o.fixedFullWidth) ? '100%' : ((parseInt(this.$box.css('width'))-1) + 'px'), zIndex: 7 }); this.$editor.css({ marginTop: this.$btnPane.css('height') }); this.$e.css({ marginTop: this.$btnPane.css('height') }); } $('.' + this.o.prefix + 'fixed-top', this.$box).css({ position: this.o.fixedFullWidth ? 'fixed' : 'absolute', top: this.o.fixedFullWidth ? this.$btnPane.outerHeight() : parseInt(this.$btnPane.outerHeight()) + (wScroll - offset) + 'px', zIndex: 15 }); } else if(this.isFixed) { this.isFixed = false; this.$btnPane.css({ position: 'relative' }); this.$editor.css({ marginTop: 0 }); this.$e.css({ marginTop: 0 }); $('.' + this.o.prefix + 'fixed-top', this.$box).css({ position: 'absolute', top: this.$btnPane.outerHeight() }); } }, this)); }, // Destroy the editor destroy: function(){ var html = this.html(); if(this.isTextarea) this.$box.after(this.$e.css({height: this.height}) .val(html) .removeClass(this.o.prefix + 'textarea') .show()); else this.$box.after(this.$editor.css({height: this.height}) .removeClass(this.o.prefix + 'editor') .attr('contenteditable', false) .html(html) .show()); this.$box.remove(); this.$creator.removeData('trumbowyg'); }, // Empty the editor empty: function(){ this.$e.val(''); this.syncCode(true); }, // Function call when click on viewHTML button toggle: function(){ this.semanticCode(false, true); this.$editor.toggle(); this.$e.toggle(); this.$btnPane.toggleClass(this.o.prefix + 'disable'); this.$btnPane.find('.'+this.o.prefix + 'viewHTML-button').toggleClass(this.o.prefix + 'active'); }, // Open dropdown when click on a button which open that dropdown: function(name){ var pfx = this.o.prefix; var $dropdown = this.$box.find('.'+name+'-'+pfx + 'dropdown'), $btn = this.$btnPane.find('.'+pfx+name+'-button'); if($dropdown.is(':hidden')){ $btn.addClass(this.o.prefix + 'active'); $dropdown.css({ position: 'absolute', top: this.$btnPane.outerHeight(), left: (this.o.fixedFullWidth && this.isFixed) ? $btn.offset().left+'px' : ($btn.offset().left - this.$btnPane.offset().left)+'px' }).show(); $(window).trigger('scroll'); $('body').on('mousedown', $.proxy(function(e){ $('.' + pfx + 'dropdown').hide(); $('.' + pfx + 'active').removeClass(pfx + 'active'); $('body').off('mousedown'); }, this)); } else { $('body').trigger('mousedown'); } }, // HTML Code management html: function(html){ if(html){ this.$e.val(html); this.syncCode(true); return tbw; } else return this.$e.val(); }, syncCode: function(force){ if(!force && this.$editor.is(':visible')) this.$e.val(this.$editor.html()); else this.$editor.html(this.$e.val()); if(this.o.autogrow){ this.height = this.$editor.css('height'); this.$e.css({ height: this.height }); } }, // Analyse and update to semantic code // @param force : force to sync code from textarea // @param full : wrap text nodes in <p> semanticCode: function(force, full){ this.syncCode(force); if(this.o.semantic){ this.semanticTag('b', 'strong'); this.semanticTag('i', 'em'); this.semanticTag('strike', 'del'); if(full){ // Wrap text nodes in p this.$editor.contents() .filter(function(){ // Only non-empty text nodes return this.nodeType === 3 && $.trim(this.nodeValue).length > 0; }).wrap('<p></p>').end() // Remove all br .filter("br").remove(); this.saveSelection(); this.semanticTag('div', 'p'); this.restoreSelection(); } this.$e.val(this.$editor.html()); } }, semanticTag: function(oldTag, newTag){ $(oldTag, this.$editor).each(function(){ $(this).replaceWith(function(){ return '<'+newTag+'>' + $(this).html() + '</'+newTag+'>'; }); }); }, // Function call when user click on « Insert Link » createLink: function(){ var that = this; this.saveSelection(); this.openModalInsert(this.lang.createLink, { url: { label: 'URL', value: 'http://', required: true }, title: { label: this.lang.title, value: this.selection }, text: { label: this.lang.text, value: this.selection } }, function(values){ that.execCommand('createLink', values['url']); var link = $(['a[href="', values['url'], '"]:not([title])'].join(''), that.$box); if($.trim(values['text']).length !== 0) link.text(values['text']); if($.trim(values['title']).length !== 0) link.attr('title', values['title']); return true; }); }, insertImage: function(){ //图片上传 var that = this; this.saveSelection(); this.openModalInsert(this.lang.insertImage, { url: { label: 'URL', value: '', required: true }, alt: { label: 'description', value: this.selection } }, function(values){ that.execCommand('insertImage', values['url']); $(['img[src="', values['url'], '"]:not([alt])'].join(''), that.$box).attr('alt', values['alt']); return true; }); }, /* * Call method of trumbowyg if exist * else try to call anonymous function * and finaly native execCommand */ execCommand: function(cmd, param){ if(cmd != 'dropdown') this.$editor.focus(); try { this[cmd](param); } catch(e){ try { cmd(param, this); } catch(e){ this.$editor.focus(); if(cmd == 'insertHorizontalRule') param = null; document.execCommand(cmd, false, param); } } this.syncCode(); }, formatBlock: function(param){ if($.browser.msie) param = '<' + param + '>'; document.execCommand('formatBlock', false, param); }, // Open a modal box openModal: function(title, content){ var pfx = this.o.prefix; // No open a modal box when exist other modal box if($('.' + pfx + 'modal-box', this.$box).size() > 0) return false; this.saveSelection(); this.showOverlay(); // Disable all btnPane btns this.$btnPane.addClass(pfx + 'disable'); $('.' + pfx + 'not-disable', this.$btnPane) .not('.' + pfx + 'buttons-right') .removeClass(pfx + 'not-disable') .addClass(pfx + 'not-disable-old'); // Build out of ModalBox, it's the mask for animations var $modal = $('<div/>', { 'class': pfx + 'modal ' + pfx + 'fixed-top' }).css({ top: (parseInt(this.$btnPane.css('height')) + 1) + 'px' }).appendTo(this.$box); // Click on overflay close modal by cancelling them this.$overlay.one('click', function(e){ e.preventDefault(); $modal.trigger(pfx + 'cancel'); }); $e = this.$editor; // Build the form $form = $('<form/>', { action: 'javascript:void(null);', html: content }) .on('submit', function(e){ e.preventDefault(); $modal.trigger(pfx + 'confirm'); }) .on('reset', function(e){ e.preventDefault(); $modal.trigger(pfx + 'cancel'); }); // Build ModalBox and animate to show them var $modalBox = $('<div/>', { 'class': pfx + 'modal-box', html: $form }) .css({ top: '-' + parseInt(this.$btnPane.outerHeight()) + 'px', opacity: 0 }) .appendTo($modal) .animate({ top: 0, opacity: 1 }, this.o.duration / 2); // Append title $('<span/>', { text: title, 'class': pfx + 'modal-title' }).prependTo($modalBox); // Focus in modal box $modalBox.find('input:first').focus(); // Append Confirm and Cancel buttons this.buildModalBtn('submit', $modalBox); this.buildModalBtn('reset', $modalBox); $('body').trigger('scroll'); return $modal; }, buildModalBtn: function(name, modal){ return $('<button/>', { 'class': this.o.prefix + 'modal-button ' + this.o.prefix + 'modal-' + name, 'type': name, 'text': this.lang[name] || name }).appendTo(modal.find('form')); }, // close current modal box closeModal: function(){ var pfx = this.o.prefix; this.$btnPane.removeClass(pfx + 'disable'); this.$overlay.off(); $('.' + this.o.prefix + 'not-disable-old', this.$btnPane) .removeClass(pfx + 'not-disable-old') .addClass(pfx + 'not-disable'); var that = this, $modalBox = $('.' + pfx + 'modal-box', this.$box); $modalBox.animate({ top: '-' + $modalBox.css('height') }, this.o.duration/2, function(){ $(this).parent().remove(); that.hideOverlay(); }); }, // Preformated build and management modal openModalInsert: function(title, fields, cmd){ var html = '', pfx = this.o.prefix; for(f in fields){ var fd = fields[f]; label = (fd.label == undefined) ? (this.lang[f] ? this.lang[f] : f.charAt(0).toUpperCase() + f.slice(1)) : (this.lang[fd.label] ? this.lang[fd.label] : fd.label) ; if(fd.name == undefined) fd.name = f; if(!fd.pattern && f == 'url'){ fd.pattern = /^(http|https):\/\/([\w~#!:.?+=&%@!\-\/]+)$/; fd.patternError = this.lang.invalidUrl; } html += '<label><input type="'+(fd.type || 'text')+'" name="'+fd.name+'" value="'+(fd.value || '')+'"><span class="'+pfx+'input-infos"><span>'+label+'</span></span></label>'; } var modBox = this.openModal(title, html), that = this; modBox .on(pfx + 'confirm', function(){ var $form = $(this).find('form'), valid = true, values = {}; for(f in fields) { var $field = $('input[name="'+f+'"]', $form); values[f] = $field.val(); // Validate value if(fields[f].required && (values[f] == null || values[f] == undefined || $.trim(values[f]) == "")) { valid = false; that.addErrorOnModalField($field, that.lang.required); } else if(fields[f].pattern && !fields[f].pattern.test(values[f])) { valid = false; that.addErrorOnModalField($field, fields[f].patternError); } } if(valid) { that.restoreSelection(); if(cmd(values, fields)) { that.syncCode(); that.closeModal(); modBox.off(pfx + 'confirm'); } } }) .one(pfx + 'cancel', function(){ modBox.off(pfx + 'confirm'); that.closeModal(); that.restoreSelection(); }); return modBox; }, addErrorOnModalField: function($field, err){ var $label = $field.parent(), pfx = this.o.prefix; $label.addClass(pfx + 'input-error'); $field.on('change keyup', function(){ $label.removeClass(pfx + 'input-error'); }); $label.find('input+span').append('<span class="'+ pfx +'msg-error">'+ err +'</span>'); }, // Selection management saveSelection: function(){ this.selection = null; if(window.getSelection){ var sel = window.getSelection(); if(sel.getRangeAt && sel.rangeCount) this.selection = sel.getRangeAt(0); } else if(document.selection && document.selection.createRange){ this.selection = document.selection.createRange(); } }, restoreSelection: function(){ range = this.selection; if(range){ if(window.getSelection){ var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if(document.selection && range.select){ range.select(); } } }, // Return true if must enable Trumbowyg on this mobile device isEnabled: function(){ var mobile = "iPhone|iPod|Android|BlackBerry|Windows\sPhone|ZuneWP7"; var exprTablet = new RegExp("(iPad|webOS)"); var exprMobile = new RegExp("("+mobile+")"); return (this.o.tablet === true && exprTablet.test(navigator.userAgent)) || (this.o.mobile === true && exprMobile.test(navigator.userAgent)); } }; /* isObject */ var toString = Object.prototype.toString, hasOwnProp = Object.prototype.hasOwnProperty; $.isObject = function(obj) { if(toString.call(obj) !== "[object Object]") return false; var key; for(key in obj){} return !key || hasOwnProp.call(obj, key); }; $.isString = function(str){ return typeof(str) === 'string' }; })(jQuery); function del() { var element=document.getElementById("demoImage"); if(element) { element.parentNode.removeChild(element); } } function show_element(e) { if(!e) { var e = window.event; } //获取事件点击元素 var targ = e.target; //获取元素名称 var tname = targ.tagName; var oDiv=document.getElementById('odiv'); if(tname=="IMG") { var scrollTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop); oDiv.style.left=e.clientX+5+'px'; oDiv.style.top=e.clientY+5+scrollTop+'px'; oDiv.style.display="inline"; targ.width=targ.width; var s=document.getElementById('demoImage'); if(s!=null) { s.id=""; } targ.id='demoImage' }else{ var wait = setInterval(function(){ if (oDiv != 0 && oDiv != null && oDiv != undefined) { clearInterval(wait); oDiv.style.display="none"; } },50); } } function tim(m) { var s=document.getElementById('demoImage'); s.width=s.width+m; s.width=s.width; } function sub(m) { var s=document.getElementById('demoImage'); if(s!=null) { if(m!=0) { var t=s.width/10; while(t>0) { if(m==1) setTimeout('tim(1)','50'); else setTimeout('tim(-1);','50'); t=t-1; } } else s.width=-1; s.width=s.width; } } /* =========================================================== * zh_cn.js * Simplified Chinese translation for Trumbowyg * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Liu Kai (akai) * Twitter : @akai404 * Github : https://github.com/akai */ $.trumbowyg.langs.zh_cn = { viewHTML: "源代码", formatting: "格式", p: "段落", blockquote: "引用", code: "代码", header: "标题", bold: "加粗", italic: "斜体", strikethrough: "删除线", underline: "下划线", strong: "加粗", em: "斜体", del: "删除线", unorderedList: "无序列表", orderedList: "有序列表", image: "图片", insertImage: "网络图片", upload: "本地上传", uploadError: "上传失败", insertVideo: "插入视频", link: "超链接", createLink: "插入链接", unlink: "取消链接", align: "对齐方式", justifyLeft: "居左对齐", justifyCenter: "居中对齐", justifyRight: "居右对齐", justifyFull: "两端对齐", horizontalRule: "插入分隔线", fullscreen: "全屏", close: "关闭", submit: "确定", reset: "取消", invalidUrl: "无效的 URL", required: "必需的", description: "描述", title: "标题", text: "文字" } $(function(){ $.trumbowyg.btnsGrps.test = ['bold','italic','underline','link']; $('#customized-buttonpane').trumbowyg({ lang: 'zh_cn', fixedBtnPane: true, btnsDef: { align: { dropdown: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], ico: 'justifyLeft' }, image: { dropdown: ['insertImage', 'upload'], ico: 'insertImage' } }, btns: ['viewHTML', '|', 'formatting', '|', 'btnGrp-test', '|', 'align', '|', 'btnGrp-lists', '|', 'image'] }); $('.editor').on('dblclick', function(e){ $(this).trumbowyg({ lang: 'zh_cn', closable: false, fixedBtnPane: true }); }); });
trumbowyg.upload.js
/* =========================================================== * trumbowyg.upload.js v1.0 * Upload plugin for Trumbowyg * http://alex-d.github.com/Trumbowyg * =========================================================== * Author : Alexandre Demode (Alex-D) * Twitter : @AlexandreDemode * Website : alex-d.fr */ (function($){ addXhrProgressEvent(); $.extend(true, $.trumbowyg, { upload: { serverPath: urlcore + '/file/upload/batch' }, opts: { btnsDef: { upload: { func: function(params, tbw){ var file, pfx = tbw.o.prefix; var $modal = tbw.openModalInsert( // Title tbw.lang['upload'], // Fields { file: { type: 'file', required: true }, alt: { label: 'description' } }, // Callback function(values, fields){ var data = new FormData(); data.append('files', file); if($('.' + pfx +'progress', $modal).length == 0) $('.' + pfx + 'modal-title', $modal) .after( $('<div/>', { 'class': pfx +'progress' }) .append( $('<div/>', { 'class': pfx +'progress-bar' }) ) ); $.ajax({ url: $.trumbowyg.upload.serverPath, type: 'POST', data: data, cache: false, dataType: 'json', processData: false, contentType: false, progressUpload: function(e){ $('.' + pfx + 'progress').html( '<div class="trumbowyg-progress-bar" style="overflow: hidden; width: '+e.loaded * 100 / e.total+'%;"></div>'+ parseInt(e.loaded * 100 / e.total) + '%' ); }, success: function(data){ if (data.success == true) { for(var i in data.data){ tbw.execCommand('insertImage', data.data[i]); } setTimeout(function(){ tbw.closeModal(); }, 250); } else { tbw.addErrorOnModalField( $('input[type=file]', $modal), tbw.lang[data.message] ); } }, error: function(data){ tbw.addErrorOnModalField( $('input[type=file]', $modal), tbw.lang['uploadError'] ); } }); } ); $('input[type=file]').on('change', function(e){ file = e.target.files[0]; }); } } } } }); function addXhrProgressEvent(){ var originalXhr = $.ajaxSettings.xhr; $.ajaxSetup({ xhr: function() { var req = originalXhr(), that = this; if(req && typeof req.upload == "object" && that.progressUpload !== undefined) req.upload.addEventListener("progress", function(e){ that.progressUpload(e); }, false); return req; } }); } })(jQuery);
附件下载地址(包含图标和js)： https://files.cnblogs.com/files/007sx/assets.zip
