富文本框的使用

相关资料下载地址

首先引进相关的js、css

至于jQuery和bootstrap相关的js、css自己加入。然后我把文本框的html代码封装为一个wysiwyg.jsp：

 

    

        

            

        
        

            

                
Huge
                
Normal
                
Small
            
        
        

        
        

        

        
        


            

                Add
            
            
        


            

            
    
     

 
     
    
    

然后封装相应的初始化js，可以分装为一个js然后把他引进wysiwyg.jsp中（我 这里只贴我分装的一个方法）：

function showWysiwyg() {
	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($('
' + fontName
					+ '
'));
		});
		$('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());
				});
		$('#voiceBtn').hide();

	}
	;
	initToolbarBootstrapBindings();
	$('#editor').wysiwyg();
	window.prettyPrint && prettyPrint();
}

现在我们所有准备工作都做好了，我们只需在需要文本框的jsp页面把文本框jsp页面include进来即可