简单实现富文本编辑器

下载地址：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={}清空对象。
~~这里后端代码很简单就不再敖述了