簡單實現富文本編輯器

下載地址：http://kindeditor.net/
ssm+angular+bootstarp

一、下載

• 將下載的文件解壓放在項目中靜態目錄下如：

---

二、在數據庫中找到相應的字段，進行綁定，再調用editor.html（）就可以獲取裏面的數據

• 1.在js代碼中寫入獲取編輯器中的值

$scope.setEditerValue=function(){    
      $scope.entity.goodDesc.introduction=editor.html()
}

introduction對應數據庫中相應表的相應字段，entity代表組合實體類

• 2.前端頁面代碼實現

1)引入插件

<!-- 富文本編輯器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

2)頁面編輯

<div class="col-md-2 title editer">商品介紹</div>
<div class="col-md-10 data editer">                                               
   <textarea name="content" ng-model="entity.goodsDesc.introduction"style="width:800px;height:400px;visibility:hidden;">
   </textarea>
</div>

3)調取插件

<!-- 正文區域 /-->
<script type="text/javascript">	
    var editor;	KindEditor.ready(function(K) {	
	        editor = K.create('textarea[name="content"]', {	
			    allowFileManager : true		
			});	
	});
</script>

• 3.頁面調用js代碼方法，是在保存的時候觸發的，所以先找到保存按鈕，添入setEditorValue()方法

<button class="btn btn-primary" ng-click="setEditerValue();save()"><i class="fa fa-save"></i>保存<button> 

• 4.在這裏是後端代碼都實現的情況下，還有一個小問題，就是保存之後清空編輯器中的數據，這時將editor.html()
  
• 5.將editor.html(’ ');方法放到如下js代碼中(保存成功之後清除編輯器中的數據)

//保存 	
$scope.save=function(){			
	var serviceObject;//服務層對象  						
	if($scope.entity.id!=null){//如果有ID			
	serviceObject=goodsService.update( $scope.entity ); //修改  		
	}else{		
		serviceObject=goodsService.add( $scope.entity  );//增加 		}						
		serviceObject.success(function(response){				
		if(response.success){			
			  alert("添加成功");				
			  $scope.entity={};			    
			  editor.html('');//添加完之後要清空				
			  }else{		
			  		alert(response.message);		
			  		}			
			  });					
		}

小結：$scopt.entity={}清空對象。
~~這裏後端代碼很簡單就不再敖述了