（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

http://blog.csdn.net/u012453843/article/details/70184155

上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题，这节课我们一起学习下富文本编辑器与淘淘商城相结合的使用方法。

我们在发表一篇博客或者微博的时候，都会用到富文本编辑器，因为它提供的功能非常丰富，不仅能写文字，还能设置字体大小、颜色，还能插入图片、音频、视频等等。现在流行的编辑器有三个，第一个是KindEditor，这是国内人写的；第二个是百度编辑器，这个不用说了，是百度开源的产品；第三个是ceditor编辑器(http://ckeditor.com/)这是个外国的产品。大家可以根据自己的喜好选择，本节我们便使用KindEditor作为学习的例子。

既然要使用KindEditor那么就要下载它的源码，大家可以去GitHub上下载KindEditor的源码，网址：https://github.com/kindsoft/kindeditor，如下图所示，可以看到最新的版本是4.1.12，已经3年没更新过新版本了。如果大家想下载以前的版本，可以点击下图的"10 releases"按钮。

历史版本页面如下图所示，这里我选择下载4.1.10版本的源码，点击"Source code(zip)"进行下载。

我们解压后可以看到如下图所示的文件，这么多文件不是都需要的，我们留下圈住的文件，剩下的可以删除掉。

然后我们将文件放到taotao-manager-web工程的webapp下的js的目录下。如下图所示。

下面我们看看taotao-manager-web工程是如何使用KindEditor工程的。

由于是添加商品页面需要使用kindeditor，因此我们需要在list-add.jsp页面的头部添加kindeditor的css、js、语言包的引用。如下图所示。

我们是在商品描述的时候用的富文本编辑器，需要添加<textarea>组件来初始化我们的编辑器页面，可以看到它是个隐藏域，它的作用有两个，第一个是当在富文本编辑器编辑完内容后，将内容赋值给这个textarea，然后就可以随着表单提交给数据库处理了。第二个作用是当修改编辑内容的时候，需要先加载以前的内容，kindeditor便可以从这个隐藏域中获取到原来的数据并展示出来。

下面通过js来看下使用流程，当页面加载后，会执行下图创建文本编辑器的操作，其中所传的参数是textarea组件（通过id找到form，然后再找到名称为desc的textarea）。TAOTAO是在common.js中定义的。

common.js当中createEditor方法如下图所示，该方法接收一个组件，然后使用KindEditor的create方法来初始化文本编辑器，其中TT.kingEditorParams在var TT=TAOTAO的下面定义。可以看到和我们上传图片按钮是同样的参数，准确的说是同一个组件。

我们点击富文本编辑器的上传图片按钮，可以看到回显的图片显示在富文本编辑框中。如下图所示。

当我们编辑完之后，在提交表单前会将编辑框中的内容与textarea进行同步。如下图所示。

转载于:https://www.cnblogs.com/telwanggs/p/6963830.html

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）相关推荐

(转）淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
OpenGL教程翻译第二十二课使用Assimp加载模型
第二十二课使用Assimp加载模型原文地址:http://ogldev.atspace.co.uk/(源码请从原文主页下载) 背景到现在为止我们都在使用手动生成的模型.正如你所想的,指明每个顶点 ...
第二十二课php注入,第二十二课生命的痛苦及其解脱
第二十二课:生命的痛苦及其解脱导师做了两个开示: 一.造成生命痛苦的原因二.获得幸福的方法上节课导师开示过,以迷惑和烦恼为基础的人生是痛苦的,而以觉醒和觉性为基础的人生则是幸福快乐的. 所以这节 ...
学习整理在php中使用KindEditor富文本编辑器
学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...
淘淘商城第三天—完成商品添加功能商品类目选择图片上传图片服务器搭建 kindEditor富文本编辑器的使用商品添加功能
1.实现商品类目选择功能 1.1需求在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...
学习淘淘商城第二十四课（前台系统工程搭建）
上节课我们一起学习了添加商品的实现,这节课我们学习搭建前台系统工程. 我们先来看一下淘淘商城的首页,如下图所示. 我们再来看看淘淘商城的系统架构图,我们目前只是完成了后台管理系统和商品服务,还有很多没 ...
第二十二课.XGBoost
目录模型公式优化算法目标函数树的生成预测值的确定特征空间的划分使用 XGBoost 实现波士顿房价预测使用 XGBoost 完成乳腺癌诊断的二分类问题模型公式 XGBoost 在集成 ...
第二十二课.DeepGraphLibrary(三)
目录节点分类与回归概述定义GNN模型模型训练异构图上的节点分类模型训练边分类与回归概述模型训练异构图上的边预测模型训练(边的回归) 在异构图中预测已有边的类型链接预测概述模型训 ...
【问链财经-区块链基础知识系列】第二十二课贸易金融区块链平台的技术机理与现实意义
简介:贸易金融区块链平台的技术机理.模式.优势与现实意义都有哪些?对湾区贸易金融区块链平台的未来建设有何展望?本文将进行详述. 小微企业贡献了我国60%以上的GDP.50%以上的税收以及80%的城镇就 ...

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

（转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）相关推荐

最新文章

热门文章