使用富文本编辑器完成商品录入

富文本编辑器介绍

富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器:
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
例示:(图1)
在这里插入图片描述
在这里插入图片描述
1.初始化kindeditor编辑器
在页面中添加JS代码,用于初始化kindeditor

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

allowFileManager 【是否允许浏览服务器已上传文件】 默认值是:false

HTML代码:显示效果如图1

<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>

2提取kindeditor编辑器的内容
在goodsController.js中的add()方法中添加

$scope.entity.goodsDesc.introduction=editor.html();

3清空kindeditor编辑器的内容
修改goodsController.js的add方法

function(response){
		if(response.success){
			alert("保存成功");
			$scope.entity={};
			editor.html('');//清空富文本编辑器
		}else{
			alert(response.message);
		}
}	

猜你喜欢

转载自blog.csdn.net/Marion158/article/details/86532952
今日推荐