Add 'jquery.microedit.js'
This commit is contained in:
parent
723d84b089
commit
64dcb58fbf
298
jquery.microedit.js
Normal file
298
jquery.microedit.js
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
|
||||
/*
|
||||
* 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){}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user