cdeditor 使用

jsp 代码

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    

<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../../js/jquery_validate/jquery.validate.js"></script>
<script type="text/javascript">
	$(function(){
		
		var editor = CKEDITOR.replace('content', {
			width:620 
		});

		
		$("#articleInfoForm").validate({ 
			onfocusin: function(element) { $(element).valid(); },  
		    onfocusout: function(element) { $(element).valid(); }, 
			errorElement:"errorMsg",
			errorClass: "errorMsg",
			rules : {  
				name: {  
					required: true,  
					rangelength: [0,50],
				}, 
				
			},  
			messages:{  
				name : {  
					required : "文章标题必填",  
					rangelength:"文章标题长度范围在[0-50]之间", 
				}, 
				
			}  
		}); 
		
		
		$("#articleInfoForm").submit(function() {  
		    var isValidate = 1;  
		    $("#articleInfoForm").find("input").each(function(){  
		        isValidate = isValidate & $(this).valid();  
		    })  
		    if(isValidate){  
		    	
		    	//解决 ckeditor使用提交表单获取不到值得问题
		    	for (instance in CKEDITOR.instances){
					CKEDITOR.instances[instance].updateElement();
				}
		       	
		       	var data = $('#articleInfoForm').serialize();
		        alert(data); 
		    }  
		    return false;  
		});  
		
		
		
		
		
		
	});
</script>


<div align="center">
<table>
	<tr>
		<td>
			<div id="tab1" class="tabson" >
		 	<form id="articleInfoForm" method="post">
		 		<input type="hidden" name="id" value="${article.id }" />
				<ul class="forminfo">
					<li>
						<label>文章标题<b>*</b></label> 
						<input id="name" name="name" value="${article.title }" type="text" class="dfinput" style="width:380px;"/>
					</li>
					<li><label>文章类型:</label>
				    	<div class="vocation">
				    	<select class="type" id="type" name="type">
	   						<option value="0"  >公告</option>
			   				<option value="1"  >新闻资讯</option>
			   				<option value="2"  >党务要闻</option>
			   				<option value="3"  >招生简章</option>
			   				<option value="4"  >招生动态</option>
					   	</select>
					   	</div>
				    </li>
					<li><label>是否置顶:</label>
				    	<div class="vocation">
				    	<select class="isTop" id="isTop" name="isTop">
	   						<option value="false"  >否</option>
			   				<option value="true" >是</option>
					   	</select>
					   	</div>
				    </li>
				    
					<li>文章内容: <br/> 
						<textarea name="content" class="dfinput" style="width:380px;height: 70px" rows="5" cols="10">${article.content }</textarea>
					</li>
					<li>
						<label>&nbsp;</label>
					 	<input name="" type="submit" id="articleAdd" class="btn" value="确定"/> 
					 	<input name="" onclick="javascript:history.back(-1);" type="button" id="roleAddCancle" class="btn" value="取消"/>
					 </li>
				</ul>
			</form>
			</div> 
		</td>
	</tr>
</table>
</div>

 

 

2、配置 ckeditor 显示选项

在config.js中配置

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' },
		
		
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Strike,Subscript,Superscript,Styles,Format,Find,Replace,SelectAll,Flash,Smiley,PageBreak,Iframe,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,ShowBlocks,Source,Print,Templates,CopyFormatting,CreateDiv,BidiLtr,BidiRtl,Language,TextColor,BGColor,About';
}

 

 

另外附上ckeditor 插件