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:;padding:;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:;width:;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:;left:50%;margin-left:-260px;width:520px;height:290px;overflow:hidden}.trumbowyg-modal-box{position:absolute;top:;left:50%;margin-left:-250px;width:400px;padding: 10px 10px 35px 30px;z-index:;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:;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:;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:;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:;
padding:;
}
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)： http://files.cnblogs.com/files/007sx/assets.zip
jquery轻量级富文本编辑器Trumbowyg的更多相关文章
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 轻量级富文本编辑器wangEditor
开发公司一个系统的时候需要一个富文本编辑器,找了几个,最后选择这个,蛮不错的. 百度搜索wangEditor,进入官网根据所介绍的使用进行开发就可以了,很不错的一个工具.
- 【前端】wangEditor（富文本编辑器） 简易使用示例
转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...
- react-quill 富文本编辑器
适合react的一款轻量级富文本编辑器 1.http://blog.csdn.net/xiaoxiao23333/article/details/62055128 (推荐一款Markdown富文本编辑 ...
- 10个免费的javascript富文本编辑器（jQuery and non-jQuery）
祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...
- wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- 前端轻量级、简单、易用的富文本编辑器 wangEditor 的基本用法
1.富文本编辑器市面上有很多,但是综合考虑之后wangEditor是最易用的框架,推荐使用 首先进入官网 http://www.wangeditor.com 基本是2中方式引入: 使用CDN://un ...
- 我为什么要做富文本编辑器【wangEditor5个月总结】
请访问wangEditor官网:www.wangEditor.com ----------------------------------------------------------------- ...
- web 富文本编辑器总结
前言 富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器 产地 稳定 ...
随机推荐
- Re-ID with Triplet Loss
一篇讲Person Re-ID的论文,与人脸识别(认证)有非常多相通的地方. 文章链接: <In Defense of the Triplet Loss for Person Re-Identi ...
- HDU 4670 Cube number on a tree ( 树的点分治 )
题意 : 给你一棵树 . 树的每一个结点都有一个权值 . 问你有多少条路径权值的乘积是一个全然立方数 . 题目中给了你 K 个素数 ( K <= 30 ) , 全部权值都能分解成这k个素数 思路 ...
- 每日英语：Why 'The Voice' Is China's No. 1 TV Show
U.S. fans of the hit talent show 'The Voice' may take for granted that its judges sit with their bac ...
- hdoj1010 Temperor of the bone
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- jquery50个代码段
1. 如何创建嵌套的过滤器 ? 1 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class ...
- java web 中 读取windows图标并显示
java web中读取windows对应文件名的 系统图标 ....显示 1.获取系统图标工具类 package utils; import java.awt.Graphics; import j ...
- eclipse memory内存溢出
eclipse 跑web程序时候 内存溢出..解决方式 设置 jvm内存分配方案: -Xms800m -Xmx800m -XX:MaxNewSize=256m -XX:MaxPermSize=256m
- asp.net显示用户信息
web.config <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应 ...
- 一款纯css实现的漂亮导航
今天给大家分享一款纯css实现的漂亮导航.之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心.还带来图标,效果不错.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- Elasticsearch的javaAPI之get,delete,bulk
Elsasticsearch的javaAPI之get get API同意依据其id获得指定index中的基于json document.以下的样例得到一个JSON document(index为twi ...