mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-17 15:53:28 +00:00
[sf edit] use 'bootstrap-wysiwyg' as the editor, and rm 'experimental'
This commit is contained in:
llj
77
media/css/sf_editor_toolbar.css
Normal file
77
media/css/sf_editor_toolbar.css
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
/*!
|
||||||
|
* Bootstrap v2.3.1
|
||||||
|
*
|
||||||
|
* Copyright 2012 Twitter, Inc
|
||||||
|
* Licensed under the Apache License v2.0
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||||
|
*/
|
||||||
|
/* modified according to the need of our project */
|
||||||
|
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
|
||||||
|
a:hover,a:active{outline:0;}
|
||||||
|
#sf img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
|
||||||
|
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
|
||||||
|
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
|
||||||
|
button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer;}
|
||||||
|
input[type="file"],input[type="image"],input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
|
||||||
|
input[type="file"]{height:30px;*margin-top:4px;line-height:30px;}
|
||||||
|
.input-append input{position:relative;margin:0;*margin-left:0;vertical-align:top;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; padding:3px; width:200px;}.input-append input:focus,.input-prepend input:focus,.input-append select:focus,.input-prepend select:focus,.input-append .uneditable-input:focus,.input-prepend .uneditable-input:focus{z-index:2;}
|
||||||
|
.input-append .btn,.input-prepend .btn,.input-append .btn-group>.dropdown-toggle,.input-prepend .btn-group>.dropdown-toggle{vertical-align:top;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
|
||||||
|
.input-append .active,.input-prepend .active{background-color:#a9dba9;border-color:#46a546;}
|
||||||
|
.input-append .add-on,.input-append .btn,.input-append .btn-group{margin-left:-1px;}
|
||||||
|
.input-append .add-on:last-child,.input-append .btn:last-child,.input-append .btn-group:last-child>.dropdown-toggle{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||||
|
.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #cccccc;*border:0;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333333;background-color:#e6e6e6;*background-color:#d9d9d9;}
|
||||||
|
.btn:active,.btn.active{background-color:#cccccc \9;}
|
||||||
|
.btn:first-child{*margin-left:0;}
|
||||||
|
.btn:hover,.btn:focus{color:#333333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
|
||||||
|
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
|
||||||
|
.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}
|
||||||
|
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%;}
|
||||||
|
button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0;}
|
||||||
|
.btn-group{position:relative;display:inline-block;*display:inline;*zoom:1;font-size:0;vertical-align:middle;white-space:nowrap;*margin-left:.3em;}.btn-group:first-child{*margin-left:0;}
|
||||||
|
.btn-group+.btn-group{margin-left:5px;}
|
||||||
|
.btn-toolbar{font-size:0;margin:5px 0;text-align:center;}.btn-toolbar>.btn+.btn,.btn-toolbar>.btn-group+.btn,.btn-toolbar>.btn+.btn-group{margin-left:5px;}
|
||||||
|
.btn-group>.btn{position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
|
||||||
|
.btn-group>.btn+.btn{margin-left:-1px;}
|
||||||
|
.btn-group>.btn,.btn-group>.dropdown-menu,.btn-group>.popover{font-size:14px;}
|
||||||
|
.btn-group>.btn-mini{font-size:10.5px;}
|
||||||
|
.btn-group>.btn-small{font-size:11.9px;}
|
||||||
|
.btn-group>.btn-large{font-size:17.5px;}
|
||||||
|
.btn-group>.btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
|
||||||
|
.btn-group>.btn:last-child,.btn-group>.dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
|
||||||
|
.btn-group>.btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;}
|
||||||
|
.btn-group>.btn.large:last-child,.btn-group>.large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
|
||||||
|
.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active{z-index:2;}
|
||||||
|
.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0;}
|
||||||
|
.btn-group>.btn+.dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);*padding-top:5px;*padding-bottom:5px;}
|
||||||
|
.btn-group>.btn-mini+.dropdown-toggle{padding-left:5px;padding-right:5px;*padding-top:2px;*padding-bottom:2px;}
|
||||||
|
.btn-group>.btn-small+.dropdown-toggle{*padding-top:5px;*padding-bottom:4px;}
|
||||||
|
.btn-group>.btn-large+.dropdown-toggle{padding-left:12px;padding-right:12px;*padding-top:7px;*padding-bottom:7px;}
|
||||||
|
.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}
|
||||||
|
.btn-group.open .btn.dropdown-toggle{background-color:#e6e6e6;}
|
||||||
|
.btn .caret{margin:8px 0 0 4px;}
|
||||||
|
.tooltip{position:absolute;z-index:1030;display:block;visibility:visible;font-size:11px;line-height:1.4;opacity:0;filter:alpha(opacity=0);}.tooltip.in{opacity:0.8;filter:alpha(opacity=80);}
|
||||||
|
.tooltip.top{margin-top:-3px;padding:5px 0;}
|
||||||
|
.tooltip.right{margin-left:3px;padding:0 5px;}
|
||||||
|
.tooltip.bottom{margin-top:3px;padding:5px 0;}
|
||||||
|
.tooltip.left{margin-left:-3px;padding:0 5px;}
|
||||||
|
.tooltip-inner{max-width:200px;padding:8px;color:#ffffff;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||||
|
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;}
|
||||||
|
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000000;}
|
||||||
|
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000000;}
|
||||||
|
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000000;}
|
||||||
|
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000000;}
|
||||||
|
.dropup,.dropdown{position:relative;}
|
||||||
|
.dropdown-toggle{*margin-bottom:-3px;}
|
||||||
|
.dropdown-toggle:active,.open .dropdown-toggle{outline:0;}
|
||||||
|
.caret{display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid #000000;border-right:4px solid transparent;border-left:4px solid transparent;content:"";}
|
||||||
|
.dropdown .caret{margin-top:8px;margin-left:2px;}
|
||||||
|
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#ffffff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.dropdown-menu.pull-right{right:0;left:auto;}
|
||||||
|
.input-append {padding-left:5px; padding-right:5px;}
|
||||||
|
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333333;white-space:nowrap; text-align:left; cursor:pointer;}
|
||||||
|
.dropdown-menu>li>a .color-block { display:inline-block; width:100%; height:1.1em; }
|
||||||
|
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{text-decoration:none;color:#ffffff;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
|
||||||
|
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
|
||||||
|
.open{*z-index:1000;}.open>.dropdown-menu{display:block;}
|
||||||
|
.fade{opacity:0;-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;}.fade.in{opacity:1;}
|
||||||
182
media/js/bootstrap-wysiwyg.js
vendored
Normal file
182
media/js/bootstrap-wysiwyg.js
vendored
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
/* http://github.com/mindmup/bootstrap-wysiwyg */
|
||||||
|
/*global jQuery, $, FileReader*/
|
||||||
|
/*jslint browser:true*/
|
||||||
|
jQuery(function ($) {
|
||||||
|
'use strict';
|
||||||
|
var readFileIntoDataUrl = function (fileInfo) {
|
||||||
|
var loader = $.Deferred(),
|
||||||
|
fReader = new FileReader();
|
||||||
|
fReader.onload = function (e) {
|
||||||
|
loader.resolve(e.target.result);
|
||||||
|
};
|
||||||
|
fReader.onerror = loader.reject;
|
||||||
|
fReader.onprogress = loader.notify;
|
||||||
|
fReader.readAsDataURL(fileInfo);
|
||||||
|
return loader.promise();
|
||||||
|
};
|
||||||
|
$.fn.cleanHtml = function () {
|
||||||
|
var html = $(this).html();
|
||||||
|
return html && html.replace(/(<br>|\s|<div><br><\/div>| )*$/, '');
|
||||||
|
};
|
||||||
|
$.fn.wysiwyg = function (userOptions) {
|
||||||
|
var editor = this,
|
||||||
|
selectedRange,
|
||||||
|
defaultOptions = {
|
||||||
|
hotKeys: {
|
||||||
|
'ctrl+b meta+b': 'bold',
|
||||||
|
'ctrl+i meta+i': 'italic',
|
||||||
|
'ctrl+u meta+u': 'underline',
|
||||||
|
'ctrl+z meta+z': 'undo',
|
||||||
|
'ctrl+y meta+y meta+shift+z': 'redo',
|
||||||
|
'ctrl+l meta+l': 'justifyleft',
|
||||||
|
'ctrl+r meta+r': 'justifyright',
|
||||||
|
'ctrl+e meta+e': 'justifycenter',
|
||||||
|
'ctrl+j meta+j': 'justifyfull',
|
||||||
|
'shift+tab': 'outdent',
|
||||||
|
'tab': 'indent'
|
||||||
|
},
|
||||||
|
toolbarSelector: '[data-role=editor-toolbar]',
|
||||||
|
commandRole: 'edit',
|
||||||
|
activeToolbarClass: 'btn-info',
|
||||||
|
selectionMarker: 'edit-focus-marker',
|
||||||
|
selectionColor: 'darkgrey'
|
||||||
|
},
|
||||||
|
options,
|
||||||
|
updateToolbar = function () {
|
||||||
|
if (options.activeToolbarClass) {
|
||||||
|
$(options.toolbarSelector).find('.btn[data-' + options.commandRole + ']').each(function () {
|
||||||
|
var command = $(this).data(options.commandRole);
|
||||||
|
if (document.queryCommandState(command)) {
|
||||||
|
$(this).addClass(options.activeToolbarClass);
|
||||||
|
} else {
|
||||||
|
$(this).removeClass(options.activeToolbarClass);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
execCommand = function (commandWithArgs, valueArg) {
|
||||||
|
var commandArr = commandWithArgs.split(' '),
|
||||||
|
command = commandArr.shift(),
|
||||||
|
args = commandArr.join(' ') + (valueArg || '');
|
||||||
|
document.execCommand(command, 0, args);
|
||||||
|
updateToolbar();
|
||||||
|
},
|
||||||
|
bindHotkeys = function (hotKeys) {
|
||||||
|
$.each(hotKeys, function (hotkey, command) {
|
||||||
|
editor.keydown(hotkey, function (e) {
|
||||||
|
if (editor.attr('contenteditable') && editor.is(':visible')) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
execCommand(command);
|
||||||
|
}
|
||||||
|
}).keyup(hotkey, function (e) {
|
||||||
|
if (editor.attr('contenteditable') && editor.is(':visible')) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getCurrentRange = function () {
|
||||||
|
var sel = window.getSelection();
|
||||||
|
if (sel.getRangeAt && sel.rangeCount) {
|
||||||
|
return sel.getRangeAt(0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveSelection = function () {
|
||||||
|
selectedRange = getCurrentRange();
|
||||||
|
},
|
||||||
|
restoreSelection = function () {
|
||||||
|
var selection = window.getSelection();
|
||||||
|
if (selectedRange) {
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(selectedRange);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insertFiles = function (files) {
|
||||||
|
editor.focus();
|
||||||
|
$.each(files, function (idx, fileInfo) {
|
||||||
|
if (/^image\//.test(fileInfo.type)) {
|
||||||
|
$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
|
||||||
|
execCommand('insertimage', dataUrl);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
markSelection = function (input, color) {
|
||||||
|
restoreSelection();
|
||||||
|
document.execCommand('hiliteColor', 0, color || 'transparent');
|
||||||
|
saveSelection();
|
||||||
|
input.data(options.selectionMarker, color);
|
||||||
|
},
|
||||||
|
bindToolbar = function (toolbar, options) {
|
||||||
|
toolbar.find('a[data-' + options.commandRole + ']').click(function () {
|
||||||
|
restoreSelection();
|
||||||
|
editor.focus();
|
||||||
|
execCommand($(this).data(options.commandRole));
|
||||||
|
saveSelection();
|
||||||
|
});
|
||||||
|
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
|
||||||
|
|
||||||
|
toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
|
||||||
|
var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
|
||||||
|
this.value = '';
|
||||||
|
restoreSelection();
|
||||||
|
if (newValue) {
|
||||||
|
editor.focus();
|
||||||
|
execCommand($(this).data(options.commandRole), newValue);
|
||||||
|
}
|
||||||
|
saveSelection();
|
||||||
|
}).on('focus', function () {
|
||||||
|
var input = $(this);
|
||||||
|
if (!input.data(options.selectionMarker)) {
|
||||||
|
markSelection(input, options.selectionColor);
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
|
}).on('blur', function () {
|
||||||
|
var input = $(this);
|
||||||
|
if (input.data(options.selectionMarker)) {
|
||||||
|
markSelection(input, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
|
||||||
|
restoreSelection();
|
||||||
|
if (this.type === 'file' && this.files && this.files.length > 0) {
|
||||||
|
insertFiles(this.files);
|
||||||
|
}
|
||||||
|
saveSelection();
|
||||||
|
this.value = '';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initFileDrops = function () {
|
||||||
|
editor.on('dragenter dragover', false)
|
||||||
|
.on('drop', function (e) {
|
||||||
|
var dataTransfer = e.originalEvent.dataTransfer;
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
|
||||||
|
insertFiles(dataTransfer.files);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
options = $.extend({}, defaultOptions, userOptions);
|
||||||
|
bindHotkeys(options.hotKeys);
|
||||||
|
initFileDrops();
|
||||||
|
bindToolbar($(options.toolbarSelector), options);
|
||||||
|
editor.attr('contenteditable', true)
|
||||||
|
.on('mouseup keyup mouseout', function () {
|
||||||
|
saveSelection();
|
||||||
|
updateToolbar();
|
||||||
|
});
|
||||||
|
$(window).bind('touchend', function (e) {
|
||||||
|
var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
|
||||||
|
currentRange = getCurrentRange(),
|
||||||
|
clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
|
||||||
|
if (!clear || isInside) {
|
||||||
|
saveSelection();
|
||||||
|
updateToolbar();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
});
|
||||||
7
media/js/bootstrap.min.js
vendored
Normal file
7
media/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9
media/js/jq.min.js
vendored
9
media/js/jq.min.js
vendored
File diff suppressed because one or more lines are too long
100
media/js/jquery.hotkeys.js
Normal file
100
media/js/jquery.hotkeys.js
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
/*
|
||||||
|
* jQuery Hotkeys Plugin
|
||||||
|
* Copyright 2010, John Resig
|
||||||
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||||
|
*
|
||||||
|
* Based upon the plugin by Tzury Bar Yochay:
|
||||||
|
* http://github.com/tzuryby/hotkeys
|
||||||
|
*
|
||||||
|
* Original idea by:
|
||||||
|
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function(jQuery){
|
||||||
|
|
||||||
|
jQuery.hotkeys = {
|
||||||
|
version: "0.8",
|
||||||
|
|
||||||
|
specialKeys: {
|
||||||
|
8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
|
||||||
|
20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
|
||||||
|
37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
|
||||||
|
96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
|
||||||
|
104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
|
||||||
|
112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
|
||||||
|
120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 191: "/", 224: "meta"
|
||||||
|
},
|
||||||
|
|
||||||
|
shiftNums: {
|
||||||
|
"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
|
||||||
|
"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
|
||||||
|
".": ">", "/": "?", "\\": "|"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function keyHandler( handleObj ) {
|
||||||
|
// Only care when a possible input has been specified
|
||||||
|
if ( typeof handleObj.data !== "string" ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var origHandler = handleObj.handler,
|
||||||
|
keys = handleObj.data.toLowerCase().split(" "),
|
||||||
|
textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color"];
|
||||||
|
|
||||||
|
handleObj.handler = function( event ) {
|
||||||
|
// Don't fire in text-accepting inputs that we didn't directly bind to
|
||||||
|
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
|
||||||
|
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keypress represents characters, not special keys
|
||||||
|
var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ],
|
||||||
|
character = String.fromCharCode( event.which ).toLowerCase(),
|
||||||
|
key, modif = "", possible = {};
|
||||||
|
|
||||||
|
// check combinations (alt|ctrl|shift+anything)
|
||||||
|
if ( event.altKey && special !== "alt" ) {
|
||||||
|
modif += "alt+";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( event.ctrlKey && special !== "ctrl" ) {
|
||||||
|
modif += "ctrl+";
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Need to make sure this works consistently across platforms
|
||||||
|
if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
|
||||||
|
modif += "meta+";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( event.shiftKey && special !== "shift" ) {
|
||||||
|
modif += "shift+";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( special ) {
|
||||||
|
possible[ modif + special ] = true;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
possible[ modif + character ] = true;
|
||||||
|
possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
|
||||||
|
|
||||||
|
// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
|
||||||
|
if ( modif === "shift+" ) {
|
||||||
|
possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for ( var i = 0, l = keys.length; i < l; i++ ) {
|
||||||
|
if ( possible[ keys[i] ] ) {
|
||||||
|
return origHandler.apply( this, arguments );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
jQuery.each([ "keydown", "keyup", "keypress" ], function() {
|
||||||
|
jQuery.event.special[ this ] = { add: keyHandler };
|
||||||
|
});
|
||||||
|
|
||||||
|
})( jQuery );
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
{% block extra_style %}
|
{% block extra_style %}
|
||||||
{% if filetype == 'Sf' %}
|
{% if filetype == 'Sf' %}
|
||||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}aloha-0.22.7/css/aloha.css" />
|
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_editor_toolbar.css" />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if filetype == 'Text' %}
|
{% if filetype == 'Text' %}
|
||||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
|
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
|
||||||
@@ -52,6 +52,7 @@
|
|||||||
}
|
}
|
||||||
#sf {
|
#sf {
|
||||||
min-height:620px;
|
min-height:620px;
|
||||||
|
outline:none;
|
||||||
}
|
}
|
||||||
#edit-tip {
|
#edit-tip {
|
||||||
min-height:200px;
|
min-height:200px;
|
||||||
@@ -183,6 +184,69 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if filetype == 'Sf' %}
|
{% if filetype == 'Sf' %}
|
||||||
|
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#sf">
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn dropdown-toggle" data-toggle="dropdown" title="{% trans "Font" %}"><i class="icon-font"></i><span class="caret"></span></a>
|
||||||
|
<ul class="dropdown-menu"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn dropdown-toggle" data-toggle="dropdown" title="{% trans "Font Size" %}"><i class="icon-text-height"></i><span class="caret"></span></a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a data-edit="fontSize 5"><font size="5">{% trans "Huge" %}</font></a></li>
|
||||||
|
<li><a data-edit="fontSize 3"><font size="3">{% trans "Normal" %}</font></a></li>
|
||||||
|
<li><a data-edit="fontSize 1"><font size="1">{% trans "Small" %}</font></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn dropdown-toggle" data-toggle="dropdown" title="{% trans "Font Color" %}"><i class="icon-tint" style="color:#e83;"></i><span class="caret"></span></a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a data-edit="forecolor #333" title="{% trans "defaut color" %}"><span class="color-block" style="background:#333;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #FF0000"><span class="color-block" style="background:#FF0000;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #FF704F"><span class="color-block" style="background:#FF704F;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #007000"><span class="color-block" style="background:#007000;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #4D90FE"><span class="color-block" style="background:#4D90FE;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #999999"><span class="color-block" style="background:#999999;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #811201"><span class="color-block" style="background:#811201;"></span></a></li>
|
||||||
|
<li><a data-edit="forecolor #1E4152"><span class="color-block" style="background:#1E4152;"></span></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn" data-edit="bold" title="{% trans "Bold (Ctrl/Cmd+B)" %}"><i class="icon-bold"></i></a>
|
||||||
|
<a class="btn" data-edit="italic" title="{% trans "Italic (Ctrl/Cmd+I)" %}"><i class="icon-italic"></i></a>
|
||||||
|
<a class="btn" data-edit="strikethrough" title="{% trans "Strikethrough" %}"><i class="icon-strikethrough"></i></a>
|
||||||
|
<a class="btn" data-edit="underline" title="{% trans "Underline (Ctrl/Cmd+U)" %}"><i class="icon-underline"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn" data-edit="insertunorderedlist" title="{% trans "Bullet list" %}"><i class="icon-list-ul"></i></a>
|
||||||
|
<a class="btn" data-edit="insertorderedlist" title="{% trans "Number list" %}"><i class="icon-list-ol"></i></a>
|
||||||
|
<a class="btn" data-edit="outdent" title="{% trans "Reduce indent (Shift+Tab)" %}"><i class="icon-indent-left"></i></a>
|
||||||
|
<a class="btn" data-edit="indent" title="{% trans "Indent (Tab)" %}"><i class="icon-indent-right"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn" data-edit="justifyleft" title="{% trans "Align Left (Ctrl/Cmd+L)" %}"><i class="icon-align-left"></i></a>
|
||||||
|
<a class="btn" data-edit="justifycenter" title="{% trans "Center (Ctrl/Cmd+E)" %}"><i class="icon-align-center"></i></a>
|
||||||
|
<a class="btn" data-edit="justifyright" title="{% trans "Align Right (Ctrl/Cmd+R)" %}"><i class="icon-align-right"></i></a>
|
||||||
|
<a class="btn" data-edit="justifyfull" title="{% trans "Justify (Ctrl/Cmd+J)" %}"><i class="icon-align-justify"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn dropdown-toggle" data-toggle="dropdown" title="{% trans "Hyperlink" %}"><i class="icon-link"></i></a>
|
||||||
|
<div class="dropdown-menu input-append">
|
||||||
|
<input placeholder="URL" type="text" data-edit="createLink" />
|
||||||
|
<button class="btn" type="button">{% trans "Add" %}</button>
|
||||||
|
</div>
|
||||||
|
<a class="btn" data-edit="unlink" title="{% trans "Remove Hyperlink" %}"><i class="icon-cut"></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn" id="pictureBtn"><i class="icon-picture"></i></a>
|
||||||
|
<input type="file" title="{% trans "Insert picture (or just drag & drop)" %}" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn" data-edit="undo" title="{% trans "Undo (Ctrl/Cmd+Z)" %}"><i class="icon-undo"></i></a>
|
||||||
|
<a class="btn" data-edit="redo" title="{% trans "Redo (Ctrl/Cmd+Y)" %}"><i class="icon-repeat"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="sf" class="article">{{ file_content|safe }}</div>
|
<div id="sf" class="article">{{ file_content|safe }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -206,17 +270,9 @@
|
|||||||
{% if not err and file_content != None %}
|
{% if not err and file_content != None %}
|
||||||
|
|
||||||
{% if filetype == 'Sf' %}
|
{% if filetype == 'Sf' %}
|
||||||
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.7/lib/require.js"></script>
|
<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.hotkeys.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript" src="{{MEDIA_URL}}js/bootstrap.min.js"></script>
|
||||||
//settings must be before aloha.js
|
<script type="text/javascript" src="{{MEDIA_URL}}js/bootstrap-wysiwyg.js"></script>
|
||||||
Aloha = window.Aloha || {};
|
|
||||||
Aloha.settings = Aloha.settings || {};
|
|
||||||
switch($('#lang-context').data('lang')) {
|
|
||||||
case 'zh-cn': Aloha.settings.locale = "zh-hans";break;
|
|
||||||
case 'ru': Aloha.settings.locale = "ru";break;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.7/lib/aloha.js" data-aloha-plugins="common/format, common/abbr, common/align, common/characterpicker, common/dom-to-xhtml, common/image, common/link, common/list, common/table, common/undo, common/ui, extra/textcolor"></script>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if filetype == 'Text' %}
|
{% if filetype == 'Text' %}
|
||||||
@@ -234,6 +290,7 @@ switch($('#lang-context').data('lang')) {
|
|||||||
{% if not err and file_content != None %}
|
{% if not err and file_content != None %}
|
||||||
$(window).scroll(function() {
|
$(window).scroll(function() {
|
||||||
var offset = $('#edit-hd').offset();
|
var offset = $('#edit-hd').offset();
|
||||||
|
// VS coordinate of an element that's not 'fixed'
|
||||||
if ($(window).scrollTop() > offset.top + $('#edit-hd').height()) {
|
if ($(window).scrollTop() > offset.top + $('#edit-hd').height()) {
|
||||||
$('#edit-hd').css('margin-bottom', $('#path-op').outerHeight(true));
|
$('#edit-hd').css('margin-bottom', $('#path-op').outerHeight(true));
|
||||||
$('#path-op').addClass('fixed-path-op').css({'left':0, 'top':0, 'padding-left':offset.left, 'padding-right':offset.left});
|
$('#path-op').addClass('fixed-path-op').css({'left':0, 'top':0, 'padding-left':offset.left, 'padding-right':offset.left});
|
||||||
@@ -241,16 +298,19 @@ $(window).scroll(function() {
|
|||||||
$('#path-op').removeClass('fixed-path-op').removeAttr('style');
|
$('#path-op').removeClass('fixed-path-op').removeAttr('style');
|
||||||
$('#edit-hd').css('margin-bottom', 0);
|
$('#edit-hd').css('margin-bottom', 0);
|
||||||
}
|
}
|
||||||
});
|
{% if filetype == 'Sf' %}
|
||||||
{% if filetype == 'Sf' %}
|
var toolbar = $('.btn-toolbar');
|
||||||
Aloha.ready(function() {
|
var sf_editor = $('#sf');
|
||||||
if ($.browser.msie) {
|
if ($(window).scrollTop() > sf_editor.offset().top - toolbar.outerHeight(true) - $('.fixed-path-op').outerHeight(true)) {
|
||||||
$('#sf').aloha();
|
$('#sf').css('margin-top', toolbar.outerHeight(true));
|
||||||
|
toolbar.css({'position':'fixed'}); //'fixed' before get the right 'left' value
|
||||||
|
toolbar.css({'left':($(window).width() - toolbar.width())/2, 'top':$('#path-op').outerHeight(true)});
|
||||||
} else {
|
} else {
|
||||||
$('#sf').aloha().focus();
|
toolbar.removeAttr('style');
|
||||||
|
$('#sf').css('margin-top', 0);
|
||||||
}
|
}
|
||||||
|
{% endif %}
|
||||||
});
|
});
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if filetype == 'Text' %}
|
{% if filetype == 'Text' %}
|
||||||
var editor = CodeMirror.fromTextArea($('#docu-view')[0], {
|
var editor = CodeMirror.fromTextArea($('#docu-view')[0], {
|
||||||
@@ -305,6 +365,32 @@ function mdEditHelp() {
|
|||||||
}
|
}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if filetype == 'Sf' %}
|
||||||
|
$(function() {
|
||||||
|
function initToolbarBootstrapBindings() {
|
||||||
|
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
|
||||||
|
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
|
||||||
|
'Times New Roman', 'Verdana'],
|
||||||
|
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
|
||||||
|
$.each(fonts, function (idx, fontName) {
|
||||||
|
fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
|
||||||
|
});
|
||||||
|
$('a[title]').tooltip({container:'body'});
|
||||||
|
$('.dropdown-menu input').click(function() {return false;})
|
||||||
|
.change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
|
||||||
|
.keydown('esc', function () {this.value='';$(this).change();});
|
||||||
|
|
||||||
|
$('[data-role=magic-overlay]').each(function () {
|
||||||
|
var overlay = $(this), target = $(overlay.data('target'));
|
||||||
|
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
initToolbarBootstrapBindings();
|
||||||
|
$('#sf').wysiwyg();
|
||||||
|
window.prettyPrint && prettyPrint();
|
||||||
|
});
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
$('#op-after-edit').removeClass('vh');
|
$('#op-after-edit').removeClass('vh');
|
||||||
|
|
||||||
$('#file-edit-submit').click(function () {
|
$('#file-edit-submit').click(function () {
|
||||||
|
|||||||
@@ -284,7 +284,7 @@
|
|||||||
<h3>{% trans "New File" %}</h3>
|
<h3>{% trans "New File" %}</h3>
|
||||||
<div id="featured-filetype">
|
<div id="featured-filetype">
|
||||||
<label>{% trans "Featured File Type" %}</label><br />
|
<label>{% trans "Featured File Type" %}</label><br />
|
||||||
<button type="button" data="seaf" title="{% trans "Click to choose" %}">seaf</button> <span>{% trans "online Rich Text format (experimental)." %}</span>
|
<button type="button" data="seaf" title="{% trans "Click to choose" %}">seaf</button> <span>{% trans "online Rich Text format." %}</span>
|
||||||
{% if LANGUAGE_CODE == 'zh-cn' %}
|
{% if LANGUAGE_CODE == 'zh-cn' %}
|
||||||
<a href="http://www.seafile.com/help/seaf/" target="_blank">{% trans 'Details' %}</a><br />
|
<a href="http://www.seafile.com/help/seaf/" target="_blank">{% trans 'Details' %}</a><br />
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
Reference in New Issue
Block a user