05. 富文本编辑器的使用

1.介绍

  1. 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器:
        KindEditor http://kindeditor.net/
        UEditor http://ueditor.baidu.com/website/
        CKEditor http://ckeditor.com/
    05. 富文本编辑器的使用_第1张图片

2.如何使用

  1. 初始化kindeditor编辑器(在页面中添加JS代码,用于初始化kindeditor)(前端显示)
<!-- 这里是添加富文本编辑器的地方 -->
<div class="col-md-2 title editer">商品介绍</div>
<div class="col-md-10 data editer">
	<textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
</div>


<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});
</script>
  1. 提取kindeditor编辑器的内容(在goodsController.js中的add()方法中添加)(提取内容)
$scope.entity.goodsDesc.introduction=editor.html();//把富文本编辑器中的文本存到相应的表单列中
  1. 修改goodsController.js的add方法
function(response){
		if(response.success){
			alert("保存成功");
			$scope.entity={};//获取富文本编辑器,这个名称是前端定义好的(上面有)
			editor.html('');//清空富文本编辑器
		}else{
			alert(response.message);
		}
}	

你可能感兴趣的:(05. 富文本编辑器的使用)