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

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("保存失败！");
            }
        }
    );
};

更多资料，搜索或扫码关注公众号：数说Cloud

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

vue管理后台项目中使用wangEditor富文本编辑器
背景公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器前言一.富文本编辑器介绍二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
富文本编辑器原理 - 学习/实践
1.介绍富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 HTM ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
《React后台管理系统实战：五》产品管理（二）：产品添加页面及验证等、富文本编辑器、提交商品
一.产品添加基础部分 1 home.jsx点添加按钮动作跳转到添加商品页点击:onClick={() => this.props.history.push('/product/add-upda ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
layui后台管理、图片裁切、cropper富文本编辑器实现
需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现:还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很 ...