リッチテキストボックスの使用

5208 ワード

関連資料のダウンロードアドレス
まず関連するjs,cssを導入する



jQueryとbootstrapに するjs、cssは で する.テキストボックスのhtmlコードをwysiwygにカプセル しましたjsp:
 
    
は、その 、 する jsをカプセル する、jsに してwysiwygに することができる.jsp(ここでは の の1つの しか っていません):
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