Last active
August 29, 2015 13:58
-
-
Save jhjguxin/9929427 to your computer and use it in GitHub Desktop.
integrate wysihtml5 with qiniu cloud and jquery file upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function($, wysi) { | |
"use strict"; | |
var tpl = { | |
"font-styles": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li class='dropdown'>" + | |
"<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#'>" + | |
"<i class='icon-font'></i> <span class='current-font'>" + locale.font_styles.normal + "</span> <b class='caret'></b>" + | |
"</a>" + | |
"<ul class='dropdown-menu'>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div' tabindex='-1'>" + locale.font_styles.normal + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1' tabindex='-1'>" + locale.font_styles.h1 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1'>" + locale.font_styles.h2 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3' tabindex='-1'>" + locale.font_styles.h3 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h4'>" + locale.font_styles.h4 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h5'>" + locale.font_styles.h5 + "</a></li>" + | |
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h6'>" + locale.font_styles.h6 + "</a></li>" + | |
"</ul>" + | |
"</li>"; | |
}, | |
"emphasis": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='bold' title='CTRL+B' tabindex='-1'>" + locale.emphasis.bold + "</a>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='italic' title='CTRL+I' tabindex='-1'>" + locale.emphasis.italic + "</a>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='underline' title='CTRL+U' tabindex='-1'>" + locale.emphasis.underline + "</a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"lists": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "' tabindex='-1'><i class='icon-list'></i></a>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "' tabindex='-1'><i class='icon-th-list'></i></a>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-left'></i></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"link": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" + | |
"<div class='modal-header'>" + | |
"<a class='close' data-dismiss='modal'>×</a>" + | |
"<h3>" + locale.link.insert + "</h3>" + | |
"</div>" + | |
"<div class='modal-body'>" + | |
"<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" + | |
"<label class='checkbox'> <input type='checkbox' class='bootstrap-wysihtml5-insert-link-target' checked>" + locale.link.target + "</label>" + | |
"</div>" + | |
"<div class='modal-footer'>" + | |
"<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" + | |
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" + | |
"</div>" + | |
"</div>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='createLink' title='" + locale.link.insert + "' tabindex='-1'><i class='icon-share'></i></a>" + | |
"</li>"; | |
}, | |
"image": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
var fileUploader = options.fileUpload ? | |
"<input name='file' class='file-uploader' type='file' multiple><br />" + locale.image.usage + "<div class='uploaded'></div>" : ""; | |
return "<li>" + | |
"<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" + | |
"<div class='modal-header'>" + | |
"<a class='close' data-dismiss='modal'>×</a>" + | |
"<h3>" + locale.image.insert + "</h3>" + | |
"</div>" + | |
"<div class='modal-body'>" + | |
"<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" + | |
"<br />" + | |
fileUploader + | |
"</div>" + | |
"<div class='modal-footer'>" + | |
"<a href='#' class='btn clear-temp-images' >" + locale.image.clear + "</a>" + | |
"<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" + | |
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" + | |
"</div>" + | |
"</div>" + | |
"<a class='btn" + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='icon-picture'></i></a>" + | |
"</li>"; | |
}, | |
"html": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li>" + | |
"<div class='btn-group'>" + | |
"<a class='btn" + size + "' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='icon-pencil'></i></a>" + | |
"</div>" + | |
"</li>"; | |
}, | |
"color": function(locale, options) { | |
var size = (options && options.size) ? ' btn-'+options.size : ''; | |
return "<li class='dropdown'>" + | |
"<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#' tabindex='-1'>" + | |
"<span class='current-color'>" + locale.colours.black + "</span> <b class='caret'></b>" + | |
"</a>" + | |
"<ul class='dropdown-menu'>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black'>" + locale.colours.black + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver'>" + locale.colours.silver + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray'>" + locale.colours.gray + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon'>" + locale.colours.maroon + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>" + locale.colours.red + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple'>" + locale.colours.purple + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>" + locale.colours.green + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive'>" + locale.colours.olive + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy'>" + locale.colours.navy + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>" + locale.colours.blue + "</a></li>" + | |
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange'>" + locale.colours.orange + "</a></li>" + | |
"</ul>" + | |
"</li>"; | |
} | |
}; | |
var templates = function(key, locale, options) { | |
return tpl[key](locale, options); | |
}; | |
var Wysihtml5 = function(el, options) { | |
this.el = el; | |
var toolbarOpts = options || defaultOptions; | |
for(var t in toolbarOpts.customTemplates) { | |
tpl[t] = toolbarOpts.customTemplates[t]; | |
} | |
this.toolbar = this.createToolbar(el, toolbarOpts); | |
this.editor = this.createEditor(options); | |
window.editor = this.editor; | |
$('iframe.wysihtml5-sandbox').each(function(i, el){ | |
$(el.contentWindow).off('focus.wysihtml5').on({ | |
'focus.wysihtml5' : function(){ | |
$('li.dropdown').removeClass('open'); | |
} | |
}); | |
}); | |
}; | |
Wysihtml5.prototype = { | |
constructor: Wysihtml5, | |
createEditor: function(options) { | |
options = options || {}; | |
// Add the toolbar to a clone of the options object so multiple instances | |
// of the WYISYWG don't break because "toolbar" is already defined | |
options = $.extend(true, {}, options); | |
options.toolbar = this.toolbar[0]; | |
var editor = new wysi.Editor(this.el[0], options); | |
if(options && options.events) { | |
for(var eventName in options.events) { | |
editor.on(eventName, options.events[eventName]); | |
} | |
} | |
return editor; | |
}, | |
createToolbar: function(el, options) { | |
var self = this; | |
var toolbar = $("<ul/>", { | |
'class' : "wysihtml5-toolbar", | |
'style': "display:none" | |
}); | |
var culture = options.locale || defaultOptions.locale || "en"; | |
var fileUploadOpts = options.fileUpload; | |
for(var key in defaultOptions) { | |
var value = false; | |
if(options[key] !== undefined) { | |
if(options[key] === true) { | |
value = true; | |
} | |
} else { | |
value = defaultOptions[key]; | |
} | |
if(value === true) { | |
toolbar.append(templates(key, locale[culture], options)); | |
if(key === "html") { | |
this.initHtml(toolbar); | |
} | |
if(key === "link") { | |
this.initInsertLink(toolbar); | |
} | |
if(key === "image") { | |
this.initInsertImage(toolbar, fileUploadOpts); | |
} | |
} | |
} | |
if(options.toolbar) { | |
for(key in options.toolbar) { | |
toolbar.append(options.toolbar[key]); | |
} | |
} | |
toolbar.find("a[data-wysihtml5-command='formatBlock']").click(function(e) { | |
var target = e.target || e.srcElement; | |
var el = $(target); | |
self.toolbar.find('.current-font').text(el.html()); | |
}); | |
toolbar.find("a[data-wysihtml5-command='foreColor']").click(function(e) { | |
var target = e.target || e.srcElement; | |
var el = $(target); | |
self.toolbar.find('.current-color').text(el.html()); | |
}); | |
this.el.before(toolbar); | |
return toolbar; | |
}, | |
initHtml: function(toolbar) { | |
var changeViewSelector = "a[data-wysihtml5-action='change_view']"; | |
toolbar.find(changeViewSelector).click(function(e) { | |
toolbar.find('a.btn').not(changeViewSelector).toggleClass('disabled'); | |
}); | |
}, | |
initInsertImage: function(toolbar, fileUploadOpts) { | |
var self = this; | |
var insertImageModal = toolbar.find('.bootstrap-wysihtml5-insert-image-modal'); | |
var urlInput = insertImageModal.find('.bootstrap-wysihtml5-insert-image-url'); | |
var insertButton = insertImageModal.find('a.btn-primary'); | |
var clearButton = insertImageModal.find('a.clear-temp-images'); | |
var initialValue = urlInput.val(); | |
var caretBookmark; | |
var imagesToBeInserted = []; | |
var insertImage = function(image) { | |
self.editor.currentView.element.focus(); | |
if (caretBookmark) { | |
self.editor.composer.selection.setBookmark(caretBookmark); | |
caretBookmark = null; | |
} | |
self.editor.composer.commands.exec("insertImage", image); | |
}; | |
urlInput.keypress(function(e) { | |
if(e.which == 13) { | |
insertImage(); | |
insertImageModal.modal('hide'); | |
} | |
}); | |
insertButton.click(function() { | |
var url = urlInput.val(); | |
urlInput.val(initialValue); | |
imagesToBeInserted.push({ | |
src: url | |
}); | |
$.each(imagesToBeInserted, function(index, image) { | |
insertImage(image); | |
}); | |
imagesToBeInserted = []; | |
insertImageModal.find('.uploaded').text(''); | |
}); | |
clearButton.click(function () { | |
imagesToBeInserted = []; | |
insertImageModal.find('.uploaded').text(''); | |
}); | |
insertImageModal.on('shown', function() { | |
urlInput.focus(); | |
}); | |
insertImageModal.on('hide', function() { | |
self.editor.currentView.element.focus(); | |
}); | |
if (fileUploadOpts) { | |
insertImageModal.find('.file-uploader').fileupload($.extend({}, fileUploadOpts, { | |
done: function(e, data) { | |
// Trigger the custom file upload callback that should return an | |
// an object or an array of objects with the following format: | |
// { | |
// src: 'image url', // Note that this should be a full url. | |
// alt: 'image alt' // Optional. | |
// } | |
var images = fileUploadOpts.done(e, data); | |
var uploaded = insertImageModal.find('.uploaded'); | |
if (!$.isArray(images)) images = [images]; | |
imagesToBeInserted = imagesToBeInserted.concat(images); | |
$.each(images, function(index, image) { | |
//image = document.createTextNode(image.alt || image.src); | |
var image_tag = document.createElement('img'); | |
image_tag.src = image.src; | |
//uploaded.append("<br />").append(image_tag); | |
uploaded.append(image_tag); | |
}); | |
}, | |
dropzone: insertImageModal | |
})); | |
} | |
toolbar.find('a[data-wysihtml5-command=insertImage]').click(function() { | |
var activeButton = $(this).hasClass("wysihtml5-command-active"); | |
if (!activeButton) { | |
self.editor.currentView.element.focus(false); | |
caretBookmark = self.editor.composer.selection.getBookmark(); | |
insertImageModal.appendTo('body').modal('show'); | |
insertImageModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) { | |
e.stopPropagation(); | |
}); | |
return false; | |
} | |
else { | |
return true; | |
} | |
}); | |
}, | |
initInsertLink: function(toolbar) { | |
var self = this; | |
var insertLinkModal = toolbar.find('.bootstrap-wysihtml5-insert-link-modal'); | |
var urlInput = insertLinkModal.find('.bootstrap-wysihtml5-insert-link-url'); | |
var targetInput = insertLinkModal.find('.bootstrap-wysihtml5-insert-link-target'); | |
var insertButton = insertLinkModal.find('a.btn-primary'); | |
var initialValue = urlInput.val(); | |
var caretBookmark; | |
var insertLink = function() { | |
var url = urlInput.val(); | |
urlInput.val(initialValue); | |
self.editor.currentView.element.focus(); | |
if (caretBookmark) { | |
self.editor.composer.selection.setBookmark(caretBookmark); | |
caretBookmark = null; | |
} | |
var newWindow = targetInput.prop("checked"); | |
self.editor.composer.commands.exec("createLink", { | |
'href' : url, | |
'target' : (newWindow ? '_blank' : '_self'), | |
'rel' : (newWindow ? 'nofollow' : '') | |
}); | |
}; | |
var pressedEnter = false; | |
urlInput.keypress(function(e) { | |
if(e.which == 13) { | |
insertLink(); | |
insertLinkModal.modal('hide'); | |
} | |
}); | |
insertButton.click(insertLink); | |
insertLinkModal.on('shown', function() { | |
urlInput.focus(); | |
}); | |
insertLinkModal.on('hide', function() { | |
self.editor.currentView.element.focus(); | |
}); | |
toolbar.find('a[data-wysihtml5-command=createLink]').click(function() { | |
var activeButton = $(this).hasClass("wysihtml5-command-active"); | |
if (!activeButton) { | |
self.editor.currentView.element.focus(false); | |
caretBookmark = self.editor.composer.selection.getBookmark(); | |
insertLinkModal.appendTo('body').modal('show'); | |
insertLinkModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) { | |
e.stopPropagation(); | |
}); | |
return false; | |
} | |
else { | |
return true; | |
} | |
}); | |
} | |
}; | |
// these define our public api | |
var methods = { | |
resetDefaults: function() { | |
$.fn.wysihtml5.defaultOptions = $.extend(true, {}, $.fn.wysihtml5.defaultOptionsCache); | |
}, | |
bypassDefaults: function(options) { | |
return this.each(function () { | |
var $this = $(this); | |
$this.data('wysihtml5', new Wysihtml5($this, options)); | |
}); | |
}, | |
shallowExtend: function (options) { | |
var settings = $.extend({}, $.fn.wysihtml5.defaultOptions, options || {}, $(this).data()); | |
var that = this; | |
return methods.bypassDefaults.apply(that, [settings]); | |
}, | |
deepExtend: function(options) { | |
var settings = $.extend(true, {}, $.fn.wysihtml5.defaultOptions, options || {}); | |
var that = this; | |
return methods.bypassDefaults.apply(that, [settings]); | |
}, | |
init: function(options) { | |
var that = this; | |
return methods.shallowExtend.apply(that, [options]); | |
} | |
}; | |
$.fn.wysihtml5 = function ( method ) { | |
if ( methods[method] ) { | |
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); | |
} else if ( typeof method === 'object' || ! method ) { | |
return methods.init.apply( this, arguments ); | |
} else { | |
$.error( 'Method ' + method + ' does not exist on jQuery.wysihtml5' ); | |
} | |
}; | |
$.fn.wysihtml5.Constructor = Wysihtml5; | |
var defaultOptions = $.fn.wysihtml5.defaultOptions = { | |
"font-styles": true, | |
"color": false, | |
"emphasis": true, | |
"lists": true, | |
"html": false, | |
"link": true, | |
"image": true, | |
events: {}, | |
parserRules: { | |
classes: { | |
// (path_to_project/lib/css/wysiwyg-color.css) | |
"wysiwyg-color-silver" : 1, | |
"wysiwyg-color-gray" : 1, | |
"wysiwyg-color-white" : 1, | |
"wysiwyg-color-maroon" : 1, | |
"wysiwyg-color-red" : 1, | |
"wysiwyg-color-purple" : 1, | |
"wysiwyg-color-fuchsia" : 1, | |
"wysiwyg-color-green" : 1, | |
"wysiwyg-color-lime" : 1, | |
"wysiwyg-color-olive" : 1, | |
"wysiwyg-color-yellow" : 1, | |
"wysiwyg-color-navy" : 1, | |
"wysiwyg-color-blue" : 1, | |
"wysiwyg-color-teal" : 1, | |
"wysiwyg-color-aqua" : 1, | |
"wysiwyg-color-orange" : 1 | |
}, | |
tags: { | |
"b": {}, | |
"i": {}, | |
"br": {}, | |
"ol": {}, | |
"ul": {}, | |
"li": {}, | |
"h1": {}, | |
"h2": {}, | |
"h3": {}, | |
"h4": {}, | |
"h5": {}, | |
"h6": {}, | |
"blockquote": {}, | |
"u": 1, | |
"img": { | |
"check_attributes": { | |
"width": "numbers", | |
"alt": "alt", | |
"src": "url", | |
"height": "numbers" | |
} | |
}, | |
"a": { | |
check_attributes: { | |
'href': "url", // important to avoid XSS | |
'target': 'alt', | |
'rel': 'alt' | |
} | |
}, | |
"span": 1, | |
"div": 1, | |
// to allow save and edit files with code tag hacks | |
"code": 1, | |
"pre": 1 | |
} | |
}, | |
stylesheets: ["./lib/css/wysiwyg-color.css"], // (path_to_project/lib/css/wysiwyg-color.css) | |
locale: "en" | |
}; | |
if (typeof $.fn.wysihtml5.defaultOptionsCache === 'undefined') { | |
$.fn.wysihtml5.defaultOptionsCache = $.extend(true, {}, $.fn.wysihtml5.defaultOptions); | |
} | |
var locale = $.fn.wysihtml5.locale = { | |
en: { | |
font_styles: { | |
normal: "Normal text", | |
h1: "Heading 1", | |
h2: "Heading 2", | |
h3: "Heading 3", | |
h4: "Heading 4", | |
h5: "Heading 5", | |
h6: "Heading 6" | |
}, | |
emphasis: { | |
bold: "Bold", | |
italic: "Italic", | |
underline: "Underline" | |
}, | |
lists: { | |
unordered: "Unordered list", | |
ordered: "Ordered list", | |
outdent: "Outdent", | |
indent: "Indent" | |
}, | |
link: { | |
insert: "Insert link", | |
cancel: "Cancel", | |
target: "Open link in new window" | |
}, | |
image: { | |
insert: "Insert image", | |
cancel: "Cancel", | |
clear: "Clear", | |
usage: "Enter URL, drag & drop here, or select from your computer" | |
}, | |
html: { | |
edit: "Edit HTML" | |
}, | |
colours: { | |
black: "Black", | |
silver: "Silver", | |
gray: "Grey", | |
maroon: "Maroon", | |
red: "Red", | |
purple: "Purple", | |
green: "Green", | |
olive: "Olive", | |
navy: "Navy", | |
blue: "Blue", | |
orange: "Orange" | |
} | |
} | |
}; | |
}(window.jQuery, window.wysihtml5); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
<meta charset="utf-8"> | |
<title>bootstrap-wysihtml5</title> | |
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"></link> | |
<link rel="stylesheet" type="text/css" href="src/bootstrap-wysihtml5.css"></link> | |
<style type="text/css" media="screen"> | |
.btn.jumbo { | |
font-size: 20px; | |
font-weight: normal; | |
padding: 14px 24px; | |
margin-right: 10px; | |
-webkit-border-radius: 6px; | |
-moz-border-radius: 6px; | |
border-radius: 6px; | |
} | |
.uploaded img { | |
margin: 5px; | |
max-width: 100px; | |
max-height: 100px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="hero-unit" style="margin-top:40px"> | |
<h1 style="font-size:58px">bootstrap-wysihtml5 <small>Simple, beautiful wysiwyg editors</small></h1> | |
<hr/> | |
<textarea class="textarea" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea> | |
</div> | |
<div class="row"> | |
<p>refer to [bootstrap-wysihtml5](https://github.com/trantorLiu/bootstrap-wysihtml5)</p> | |
<br /> | |
<pre> | |
QINIU_CONFIG = YAML.load_file("#{Rails.root}/config/qiniu.yml")[Rails.env] | |
Qiniu::RS.establish_connection! \ | |
:access_key => QINIU_CONFIG["access_key"], | |
:secret_key => QINIU_CONFIG["secret_key"] | |
BUCKET_PICTURES = QINIU_CONFIG["bucket_pictures"] | |
BUCKET_WX_PICTURES = QINIU_CONFIG["bucket_wx_pictures"] | |
#QINIU_UPLOAD_TOKEN = Qiniu::RS.generate_upload_token scope: QINIU_BUCKET #can not use this ,it will expire | |
def qiniu_pictures_upload_token | |
Qiniu::RS.generate_upload_token scope: BUCKET_PICTURES | |
end | |
def qiniu_wx_pictures_upload_token | |
Qiniu::RS.generate_upload_token scope: BUCKET_WX_PICTURES | |
end | |
</pre> | |
</div> | |
</div> | |
<script src="lib/js/wysihtml5-0.3.0.js"></script> | |
<script src="lib/js/jquery-1.7.2.min.js"></script> | |
<script src="lib/js/bootstrap.min.js"></script> | |
<script src="lib/js/jquery.ui.widget.js"></script> | |
<script src="lib/js/jquery.iframe-transport.js"></script> | |
<script src="lib/js/jquery.fileupload.js"></script> | |
<script src="src/bootstrap-wysihtml5.js"></script> | |
<script> | |
$('.textarea').wysihtml5({ | |
// options passed to jQuery-File-Upload. | |
fileUpload: { | |
dataType: 'json', | |
url: 'http://up.qiniu.com', | |
limitMultiFileUploads: 10, | |
limitMultiFileUploadSize: 2000000, | |
formData: {"token":"eePG33EPxBQEYeuPbzQ8siZfi-pklcvzocOt1XPm:yNoIjswfAW0Am4-KhXd8vALe9E4=:eyJzY29wZSI6IndzaG9wMTgiLCJkZWFkbGluZSI6MTM5NjQyODQ0N30="}, | |
autoUpload: true, | |
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, | |
maxFileSize: 5000000, // 5 MB | |
// Enable image resizing, except for Android and Opera, | |
// which actually support image resizing, but fail to | |
// send Blob objects via XHR requests: | |
disableImageResize: /Android(?!.*Chrome)|Opera/ | |
.test(window.navigator.userAgent), | |
done: function(e, data) { | |
var images = []; | |
images.push({ | |
src: "http://wshop18.qiniudn.com/" + data.result.key, | |
alt: "filename" | |
}) | |
/*$.each(data.result, function(index, r) { | |
images.push({ | |
src: "http://wshop18.qiniudn.com/" + r, | |
alt: "filename" | |
}); | |
});*/ | |
return images; | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment