298 lines
8.3 KiB
JavaScript
298 lines
8.3 KiB
JavaScript
|
|
/*
|
|
* MicroEdit 1.0
|
|
* Daniele Callari
|
|
* Daxtech.net
|
|
*
|
|
* Require jQuery, awesomeFont
|
|
*/
|
|
|
|
(function($){
|
|
var methods = {
|
|
toggleCodeEditor : function(){
|
|
console.log('toggled');
|
|
},
|
|
|
|
init : function(options) {
|
|
var defaults = {
|
|
controls : ['undo', 'redo', '|', 'bold', 'italic', 'underline', '|', 'unlink', 'removeformat', '|', 'fontcolor', 'backcolor' , '|', 'justifyFull', 'justifyLeft', 'justifyRight', 'justifyCenter', '|' ,'code'],
|
|
height : '200px',
|
|
width : '100%',
|
|
borderColor : '1px solid #ccc',
|
|
denyLinks : false,
|
|
commandsAlign : 'left'
|
|
};
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
|
|
return this.each(function() {
|
|
var content = $(this).html();
|
|
|
|
$(this).html('');
|
|
|
|
var cmdBar = $('<div>');
|
|
var editor = $('<div>');
|
|
var sourceCode = $('<textarea>');
|
|
|
|
settings.controls.forEach(function(o)
|
|
{
|
|
var btn = $('<button>');
|
|
$(btn)
|
|
.css('width', '30px')
|
|
.css('height', '30px')
|
|
.css('background-color', 'transparent')
|
|
.css('border', '0')
|
|
;
|
|
|
|
switch (o.toLowerCase())
|
|
{
|
|
case '|':
|
|
case 'separator':
|
|
var sep = $('<span>');
|
|
$(sep).css('border-left','1px solid #ccc');
|
|
$(cmdBar).append(sep);
|
|
return;
|
|
break;
|
|
case 'unlink':
|
|
$(btn)
|
|
.html('<i class="fa fa-unlink"></i>')
|
|
.attr('title', 'Rimuovi link')
|
|
.bind('click', function(){ document.execCommand( 'unlink', true) })
|
|
;
|
|
break;
|
|
case 'bold':
|
|
$(btn)
|
|
.html('<i class="fa fa-bold"></i>')
|
|
.attr('title', 'Grassetto')
|
|
.bind('click', function(){ document.execCommand( 'bold',false,'<strong>') })
|
|
;
|
|
break;
|
|
case 'italic':
|
|
$(btn)
|
|
.html('<i class="fa fa-italic"></i>')
|
|
.attr('title', 'Corsivo')
|
|
.bind('click', function(){ document.execCommand( 'italic',false, null) })
|
|
;
|
|
break;
|
|
case 'underline':
|
|
$(btn)
|
|
.html('<i class="fa fa-underline"></i>')
|
|
.attr('title', 'Sottolineato')
|
|
.bind('click', function(){ document.execCommand( 'underline',false, null) })
|
|
;
|
|
break;
|
|
case 'justifycenter':
|
|
$(btn)
|
|
.html('<i class="fa fa-align-center"></i>')
|
|
.attr('title', 'Allinea al centro')
|
|
.bind('click', function(){ document.execCommand( 'justifyCenter',false, null) })
|
|
;
|
|
break;
|
|
case 'justifyfull':
|
|
$(btn)
|
|
.html('<i class="fa fa-align-justify"></i>')
|
|
.attr('title', 'Giustifica')
|
|
.bind('click', function(){ document.execCommand( 'justifyFull',false, null) })
|
|
;
|
|
break;
|
|
case 'justifyleft':
|
|
$(btn)
|
|
.html('<i class="fa fa-align-left"></i>')
|
|
.attr('title', 'Allinea a sinistra')
|
|
.bind('click', function(){ document.execCommand( 'justifyLeft',false, null) })
|
|
;
|
|
break;
|
|
case 'justifyright':
|
|
$(btn)
|
|
.html('<i class="fa fa-align-right"></i>')
|
|
.attr('title', 'Allinea a destra')
|
|
.bind('click', function(){ document.execCommand( 'justifyRight',false, null) })
|
|
;
|
|
break;
|
|
case 'undo':
|
|
$(btn)
|
|
.html('<i class="fa fa-undo"></i>')
|
|
.attr('title', 'Annulla azione')
|
|
.bind('click', function(){ document.execCommand( 'undo',false, null) })
|
|
;
|
|
break;
|
|
case 'redo':
|
|
$(btn)
|
|
.html('<i class="fa fa-repeat"></i>')
|
|
.attr('title', 'Ripeti azione')
|
|
.bind('click', function(){ document.execCommand( 'redo',false, null) })
|
|
;
|
|
break;
|
|
case 'removeformat':
|
|
$(btn)
|
|
.html('<i class="fa fa-eraser"></i>')
|
|
.attr('title', 'Rimuovi formattazione')
|
|
.bind('click', function(){ document.execCommand( 'removeFormat',false, null) })
|
|
;
|
|
break;
|
|
case 'fontcolor':
|
|
$(btn)
|
|
.html('<i class="fa fa-font"></i>')
|
|
.attr('title', 'Colore testo')
|
|
.css('padding-right', '0')
|
|
.css('width', '21px')
|
|
.addClass('fontColor')
|
|
.bind('click', function(){
|
|
document.execCommand('styleWithCSS', false, true);
|
|
document.execCommand( 'foreColor',false, $(cmdBar).find('.fontColor').css('color') );
|
|
});
|
|
$(cmdBar).append(btn);
|
|
|
|
btn = $('<button>');
|
|
t = this;
|
|
$(btn)
|
|
.css('width', '15px')
|
|
.css('height', '30px')
|
|
.css('background-color', 'transparent')
|
|
.css('border', '0')
|
|
.css('fotn-size', '12px')
|
|
.css('padding-left', '2px')
|
|
.html('<i class="fa fa-sort-desc"></i>')
|
|
.attr('title', 'Colore testo')
|
|
.bind('click', function(){
|
|
|
|
var c = $('<input>').attr('type', 'color').bind('change', function(){
|
|
$(cmdBar).find('.fontColor').css('color', c.val() );
|
|
}).click();
|
|
|
|
});
|
|
|
|
$(cmdBar).append(btn);
|
|
return;
|
|
;
|
|
break;
|
|
case 'backcolor':
|
|
$(btn)
|
|
.html('<i class="fa fa-paint-brush" style="padding:2px;"></i>')
|
|
.attr('title', 'Colore evidenziazione')
|
|
.addClass('backColor')
|
|
.css('padding-right', '0')
|
|
.css('width', '21px')
|
|
.bind('click', function(){
|
|
document.execCommand('styleWithCSS', false, true);
|
|
document.execCommand( 'backColor', false, $(cmdBar).find('.backColor').css('color') );
|
|
});
|
|
$(cmdBar).append(btn);
|
|
|
|
btn = $('<button>');
|
|
t = this;
|
|
$(btn)
|
|
.css('width', '15px')
|
|
.css('height', '30px')
|
|
.css('background-color', 'transparent')
|
|
.css('border', '0')
|
|
.css('fotn-size', '12px')
|
|
.css('padding-left', '2px')
|
|
.html('<i class="fa fa-sort-desc"></i>')
|
|
.attr('title', 'Colore evidenziazione')
|
|
.bind('click', function(){
|
|
|
|
var c = $('<input>').attr('type', 'color').bind('change', function(){
|
|
$(cmdBar).find('.backColor').css('color', c.val() );
|
|
}).click();
|
|
|
|
});
|
|
|
|
$(cmdBar).append(btn);
|
|
return;
|
|
;
|
|
break;
|
|
case 'code':
|
|
$(btn)
|
|
.html('<i class="fa fa-code"></i>')
|
|
.attr('title', 'Editor HTML')
|
|
.bind('click', function(){
|
|
|
|
if( $(editor).css('display') == 'none' ){
|
|
$(editor).html( $(sourceCode).val() );
|
|
}else{
|
|
$(sourceCode).val( $(editor).html() );
|
|
}
|
|
$(editor).toggle();
|
|
$(sourceCode).toggle();
|
|
})
|
|
;
|
|
break;
|
|
}
|
|
$(cmdBar).append(btn);
|
|
});
|
|
|
|
$(editor)
|
|
.attr('contenteditable', 'true')
|
|
.addClass('contentDiv')
|
|
.css('height', settings.height )
|
|
.css('width', settings.width )
|
|
.css('border', settings.borderColor)
|
|
.css('padding', '3px')
|
|
.css('resize', 'both')
|
|
.css('overflow', 'auto')
|
|
.css('display','inline-block')
|
|
.html(content)
|
|
;
|
|
|
|
$(sourceCode)
|
|
.css('display', 'none')
|
|
.addClass('contentTextarea')
|
|
.css('height', settings.height )
|
|
.css('width', settings.width )
|
|
.css('border', settings.borderColor )
|
|
.css('font-size', '12px' )
|
|
.css('resize', 'none')
|
|
;
|
|
|
|
$(cmdBar)
|
|
.css('text-align', settings.commandsAlign )
|
|
.addClass('barTools')
|
|
;
|
|
|
|
$(this).append(cmdBar);
|
|
$(this).append(editor);
|
|
$(this).append(sourceCode);
|
|
|
|
if( settings.denyLinks )
|
|
{
|
|
$(editor).bind('keyup', function(){
|
|
$(editor).find('a').remove();
|
|
});
|
|
}
|
|
/*
|
|
$(editor).keydown(function(e) {
|
|
console.log(e.keyCode);
|
|
if (e.keyCode == 13) {
|
|
document.execCommand('insertHTML', true, "<br>");
|
|
return false;
|
|
}
|
|
});
|
|
*/
|
|
});
|
|
|
|
},
|
|
getHTML : function() {
|
|
return $( this ).children( '.contentDiv' ).html();
|
|
},
|
|
getHTMLcharCount : function() {
|
|
return $( this ).children( '.contentDiv' ).html().length;
|
|
}
|
|
};
|
|
|
|
$.fn.microEdit = function(methodOrOptions) {
|
|
if ( methods[methodOrOptions] ) {
|
|
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
|
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
|
|
return methods.init.apply( this, arguments );
|
|
} else {
|
|
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.microEdit' );
|
|
}
|
|
};
|
|
})( jQuery );
|
|
|
|
$(document).ready(function(){
|
|
try{
|
|
CKEDITOR.disableAutoInline = true;
|
|
}catch(ex){}
|
|
}); |