商家后台-商品录入【商品介绍】、富文本编辑器

1.1 需求分析

实现商品介绍的录入，要求使用富文本编辑器。

1.2 富文本编辑器介绍

富文本编辑器，Rich Text Editor，简称RTE，它提供类似于Microsoft Word 的编辑功能，容易被不会编写HTML的用户并设置各种文本格式的用户所喜爱。常用的富文本编辑器：

KindEditor http://kindeditor.net/

UEditor http://ueditor.baidu.com/website/

CKEditor http://ckeditor.com/

1.3 使用Kindeditor完成商品介绍的录入

1.3.1 初始化Kindeditor编辑器

在sunny-shop-web/src/main/webapp/admin/goods_edit.html页面引入kindeditor的css与js


<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
<script src="/plugins/kindeditor/kindeditor-min.js"></script>
<script src="/plugins/kindeditor/lang/zh_CN.js"></script>

goods_edit.html页面中添加JS代码，用于初始化kindeditor：


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

说明：kindEditor常用的一个方法html()，可用于获取编辑器的内容，与设置编辑器的内容。

1.3.2 获取Kindeditor编辑器的内容

sunny-shop-web/src/main/webapp/js/controller/goodsController.js的saveOrUpdate()方法中第一行添加

/** 保存商品 */

$scope.saveOrUpdate = function(){

       /** 获取富文本编辑器的内容 */

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

}

1.3.3 清空Kindeditor编辑器的内容

修改goodsController.js的saveOrUpdate()方法

function(response){
   if(response.data){
      alert("保存成功！");
      /** 清空表单 */
      $scope.goods = {};
      /** 清空富文本编辑器 */
      editor.html('');
   }else{
      alert("保存失败！");
   }
}

完整代码

/** 保存商品 */
$scope.saveOrUpdate = function(){

/** 获取富文本编辑器的内容 */

$scope.goods.goodsDesc.introduction = editor.html();
    // 发送异步请求
    baseService.sendPost("/goods/save", $scope.goods).then(
        function(response){
            if(response.data){
                alert("保存成功！");
                /** 清空表单 */
                $scope.goods = {};

/** 清空富文本编辑器 */
  editor.html('');
            }else{
                alert("保存失败！");
            }
        }
    );
};

商家后台-商品录入【商品介绍】、富文本编辑器

1.1 需求分析

1.2 富文本编辑器介绍

1.3 使用Kindeditor完成商品介绍的录入

相关推荐