www.gusucode.com > KPPW众包威客PHP开源建站系统 v3.0源码程序 > KPPW/public/themes/default/assets/plugins/ace/js/ace/elements.wysiwyg.js
/**
<b>Wysiwyg</b>. A wrapper for Bootstrap wyswiwyg plugin.
It's just a wrapper so you still need to include Bootstrap wysiwyg script first.
*/
(function($ , undefined) {
$.fn.ace_wysiwyg = function($options , undefined) {
var options = $.extend( {
speech_button:true,
wysiwyg:{}
}, $options);
var color_values = [
'#ac725e','#d06b64','#f83a22','#fa573c','#ff7537','#ffad46',
'#42d692','#16a765','#7bd148','#b3dc6c','#fbe983','#fad165',
'#92e1c0','#9fe1e7','#9fc6e7','#4986e7','#9a9cff','#b99aff',
'#c2c2c2','#cabdbf','#cca6ac','#f691b2','#cd74e6','#a47ae2',
'#444444'
]
var button_defaults =
{
'font' : {
values:['Arial', 'Courier', 'Comic Sans MS', 'Helvetica', 'Open Sans', 'Tahoma', 'Verdana'],
icon:'fa fa-font',
title:'字体'
},
'fontSize' : {
values:{5:'Huge', 3:'Normal', 1:'Small'},
icon:'fa fa-text-height',
title:'Font Size'
},
'bold' : {
icon : 'fa fa-bold',
title : 'Bold (Ctrl/Cmd+B)'
},
'italic' : {
icon : 'fa fa-italic',
title : 'Italic (Ctrl/Cmd+I)'
},
'strikethrough' : {
icon : 'fa fa-strikethrough',
title : 'Strikethrough'
},
'underline' : {
icon : 'fa fa-underline',
title : 'Underline'
},
'insertunorderedlist' : {
icon : 'fa fa-list-ul',
title : 'Bullet list'
},
'insertorderedlist' : {
icon : 'fa fa-list-ol',
title : 'Number list'
},
'outdent' : {
icon : 'fa fa-outdent',
title : 'Reduce indent (Shift+Tab)'
},
'indent' : {
icon : 'fa fa-indent',
title : 'Indent (Tab)'
},
'justifyleft' : {
icon : 'fa fa-align-left',
title : 'Align Left (Ctrl/Cmd+L)'
},
'justifycenter' : {
icon : 'fa fa-align-center',
title : 'Center (Ctrl/Cmd+E)'
},
'justifyright' : {
icon : 'fa fa-align-right',
title : 'Align Right (Ctrl/Cmd+R)'
},
'justifyfull' : {
icon : 'fa fa-align-justify',
title : 'Justify (Ctrl/Cmd+J)'
},
'createLink' : {
icon : 'fa fa-link',
title : 'Hyperlink',
button_text : 'Add',
placeholder : 'URL',
button_class : 'btn-primary'
},
'unlink' : {
icon : 'fa fa-chain-broken',
title : 'Remove Hyperlink'
},
'insertImage' : {
icon : 'fa fa-picture-o',
title : 'Insert picture',
button_text : '<i class="'+ ace.vars['icon'] + 'fa fa-file"></i> Choose Image …',
placeholder : 'Image URL',
button_insert : 'Insert',
button_class : 'btn-success',
button_insert_class : 'btn-primary',
choose_file: true //show the choose file button?
},
'foreColor' : {
values : color_values,
title : 'Change Color'
},
'backColor' : {
values : color_values,
title : 'Change Background Color'
},
'undo' : {
icon : 'fa fa-undo',
title : 'Undo (Ctrl/Cmd+Z)'
},
'redo' : {
icon : 'fa fa-repeat',
title : 'Redo (Ctrl/Cmd+Y)'
},
'viewSource' : {
icon : 'fa fa-code',
title : 'View Source'
}
}
var toolbar_buttons =
options.toolbar ||
[
'font',
null,
'fontSize',
null,
'bold',
'italic',
'strikethrough',
'underline',
null,
'insertunorderedlist',
'insertorderedlist',
'outdent',
'indent',
null,
'justifyleft',
'justifycenter',
'justifyright',
'justifyfull',
null,
'createLink',
'unlink',
null,
'insertImage',
null,
'foreColor',
null,
'undo',
'redo',
null,
'viewSource'
]
this.each(function() {
var toolbar = ' <div class="wysiwyg-toolbar btn-toolbar center"> <div class="btn-group"> ';
for(var tb in toolbar_buttons) if(toolbar_buttons.hasOwnProperty(tb)) {
var button = toolbar_buttons[tb];
if(button === null){
toolbar += ' </div> <div class="btn-group"> ';
continue;
}
if(typeof button == "string" && button in button_defaults) {
button = button_defaults[button];
button.name = toolbar_buttons[tb];
} else if(typeof button == "object" && button.name in button_defaults) {
button = $.extend(button_defaults[button.name] , button);
}
else continue;
var className = "className" in button ? button.className : 'btn-default';
switch(button.name) {
case 'font':
toolbar += ' <a class="btn btn-sm '+className+' dropdown-toggle" data-toggle="dropdown" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i><i class="' + ace.vars['icon'] + 'fa fa-angle-down icon-on-right"></i></a> ';
toolbar += ' <ul class="dropdown-menu dropdown-light dropdown-caret">';
for(var font in button.values)
if(button.values.hasOwnProperty(font))
toolbar += ' <li><a data-edit="fontName ' + button.values[font] +'" style="font-family:\''+ button.values[font] +'\'">'+button.values[font] + '</a></li> '
toolbar += ' </ul>';
break;
case 'fontSize':
toolbar += ' <a class="btn btn-sm '+className+' dropdown-toggle" data-toggle="dropdown" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i> <i class="'+ ace.vars['icon'] + 'fa fa-angle-down icon-on-right"></i></a> ';
toolbar += ' <ul class="dropdown-menu dropdown-light dropdown-caret"> ';
for(var size in button.values)
if(button.values.hasOwnProperty(size))
toolbar += ' <li><a data-edit="fontSize '+size+'"><font size="'+size+'">'+ button.values[size] +'</font></a></li> '
toolbar += ' </ul> ';
break;
case 'createLink':
toolbar += ' <div class="btn-group"> <a class="btn btn-sm '+className+' dropdown-toggle" data-toggle="dropdown" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i></a> ';
toolbar += ' <div class="dropdown-menu dropdown-caret dropdown-menu-right">\
<div class="input-group">\
<input class="form-control" placeholder="'+button.placeholder+'" type="text" data-edit="'+button.name+'" />\
<span class="input-group-btn">\
<button class="btn btn-sm '+button.button_class+'" type="button">'+button.button_text+'</button>\
</span>\
</div>\
</div> </div>';
break;
case 'insertImage':
toolbar += ' <div class="btn-group"> <a class="btn btn-sm '+className+' dropdown-toggle" data-toggle="dropdown" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i></a> ';
toolbar += ' <div class="dropdown-menu dropdown-caret dropdown-menu-right">\
<div class="input-group">\
<input class="form-control" placeholder="'+button.placeholder+'" type="text" data-edit="'+button.name+'" />\
<span class="input-group-btn">\
<button class="btn btn-sm '+button.button_insert_class+'" type="button">'+button.button_insert+'</button>\
</span>\
</div>';
if( button.choose_file && 'FileReader' in window ) toolbar +=
'<div class="space-2"></div>\
<label class="center block no-margin-bottom">\
<button class="btn btn-sm '+button.button_class+' wysiwyg-choose-file" type="button">'+button.button_text+'</button>\
<input type="file" data-edit="'+button.name+'" />\
</label>'
toolbar += ' </div> </div>';
break;
case 'foreColor':
case 'backColor':
toolbar += ' <select class="hide wysiwyg_colorpicker" title="'+button.title+'"> ';
for(var color in button.values)
toolbar += ' <option value="'+button.values[color]+'">'+button.values[color]+'</option> ';
toolbar += ' </select> ';
toolbar += ' <input style="display:none;" disabled class="hide" type="text" data-edit="'+button.name+'" /> ';
break;
case 'viewSource':
toolbar += ' <a class="btn btn-sm '+className+'" data-view="source" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i></a> ';
break;
default:
toolbar += ' <a class="btn btn-sm '+className+'" data-edit="'+button.name+'" title="'+button.title+'"><i class="'+ ace.vars['icon'] + button.icon+'"></i></a> ';
break;
}
}
toolbar += ' </div> ';
////////////
var speech_input;
if (options.speech_button && 'onwebkitspeechchange' in (speech_input = document.createElement('input'))) {
toolbar += ' <input class="wysiwyg-speech-input" type="text" data-edit="inserttext" x-webkit-speech />';
}
speech_input = null;
////////////
toolbar += ' </div> ';
//if we have a function to decide where to put the toolbar, then call that
if(options.toolbar_place) toolbar = options.toolbar_place.call(this, toolbar);
//otherwise put it just before our DIV
else toolbar = $(this).before(toolbar).prev();
toolbar.find('a[title]').tooltip({animation:false, container:'body'});
toolbar.find('.dropdown-menu input[type=text]').on('click', function() {return false})
.on('change', function() {$(this).closest('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle')})
.on('keydown', function (e) {
if(e.which == 27) {
this.value = '';
$(this).change();
}
else if(e.which == 13) {
e.preventDefault();
e.stopPropagation();
$(this).change();
}
});
toolbar.find('input[type=file]').prev().on(ace.click_event, function (e) {
$(this).next().click();
});
toolbar.find('.wysiwyg_colorpicker').each(function() {
$(this).ace_colorpicker({pull_right:true}).change(function(){
$(this).nextAll('input').eq(0).val(this.value).change();
}).next().find('.btn-colorpicker').tooltip({title: this.title, animation:false, container:'body'})
});
var self = $(this);
//view source
var view_source = false;
toolbar.find('a[data-view=source]').on('click', function(e){
e.preventDefault();
if(!view_source) {
$('<textarea />')
.css({'width':self.outerWidth(), 'height':self.outerHeight()})
.val(self.html())
.insertAfter(self)
self.hide();
$(this).addClass('active');
}
else {
var textarea = self.next();
self.html(textarea.val()).show();
textarea.remove();
$(this).removeClass('active');
}
view_source = !view_source;
});
var $options = $.extend({}, { activeToolbarClass: 'active' , toolbarSelector : toolbar }, options.wysiwyg || {})
$(this).wysiwyg( $options );
});
return this;
}
})(window.jQuery);