淘淘商城——KindEditor富文本编辑器的使用
通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏览器兼容性问题,至于本文,我将为大家介绍一下KindEditor富文本编辑器与淘淘商城相结合的使用方法。
我们在发表一篇博客或者微博的时候,都会用到富文本编辑器,因为它提供的功能非常丰富,不仅能写文字,还能设置字体大小、颜色,还能插入图片、音频、视频等等。现在流行的编辑器有三个,第一个是KindEditor,这是国人写的;第二个是UEditor百度编辑器,这个不用说了,是百度开源的产品;第三个是CKEditor编辑器(http://ckeditor.com/),这是个外国的产品。大家可以根据自己的喜好选择,本文我将使用KindEditor作为学习的例子。
既然要使用KindEditor富文本编辑器,那么就要下载它的源码,大家可以去GitHub上下载KindEditor的源码,这里我就不在赘述,如有不会,可参考学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)这篇博客,这篇博客已经写的非常详细了。注意,在淘淘商城这个项目中,我们使用的是4.1.10版本的KindEditor富文本编辑器。
下载完之后,我们将kindeditor-4.1.10文件放到taotao-manager-web工程的webapp下的js目录下,如下图所示。
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI3NS9hZGI1YmMxYzk3OGYwMWZjMWU2NzVhZDg5Y2NhYWY1Yi5wbmc=)
下面我们看看taotao-manager-web工程是如何使用KindEditor富文本编辑器的。
由于是添加商品页面需要使用kindeditor,因此我们需要在item-add.jsp页面的头部添加kindeditor的css、js、语言包的引用,如下图所示。
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ4MS80ZTkyYzIzZjVhNTk2YTViZGY1NmM0NDU0Yzk0NzY3MS5wbmc=)
我们是在商品描述的时候用的富文本编辑器,需要添加
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzUzMy85MDM5MjliMTkzYTM2YzA4YmQ3NGI2ZDY1YmM1ODk0ZC5wbmc=)
下面我们通过js代码来看下使用流程,当页面加载后,会执行下图创建文本编辑器的操作,其中所传的参数是textarea组件(通过id找到form,然后再找到名称为desc的textarea)。TAOTAO是在common.js文件中定义的。
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzcyNC9lOWMxZDdjOTUyYzQwZjA5ODRkNTA3MjY0YjhlYzlkNC5wbmc=)
common.js文件当中createEditor方法如下图所示,该方法接收一个组件,然后使用KindEditor的create方法来初始化文本编辑器。
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU4My85ZDJhMGM5NDgxMTViOTQxOWQ2ZDNiZjNmMWQwN2MxNy5wbmc=)
其中TT.kingEditorParams在
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI0Ni80ZjMxNTlmODU1NTQ1MGE3YmMwNTE3YWQwODFlZmE0ZS5wbmc=)
我们点击富文本编辑器的上传图片按钮,可以看到回显的图片显示在富文本编辑框中,如下图所示。
![淘淘商城——KindEditor富文本编辑器的使用 淘淘商城——KindEditor富文本编辑器的使用](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIwNi85NGY0ZWMwNjlmMDEzMWYyM2JmYzk2NGU2ZDA5NGU3ZS5wbmc=)
当我们编辑完之后,在提交表单前会将编辑框中的内容与textarea进行同步,如下图所示。
我们在发表一篇博客或者微博的时候,都会用到富文本编辑器,因为它提供的功能非常丰富,不仅能写文字,还能设置字体大小、颜色,还能插入图片、音频、视频等等。现在流行的编辑器有三个,第一个是KindEditor,这是国人写的;第二个是UEditor百度编辑器,这个不用说了,是百度开源的产品;第三个是CKEditor编辑器(http://ckeditor.com/),这是个外国的产品。大家可以根据自己的喜好选择,本文我将使用KindEditor作为学习的例子。
既然要使用KindEditor富文本编辑器,那么就要下载它的源码,大家可以去GitHub上下载KindEditor的源码,这里我就不在赘述,如有不会,可参考学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)这篇博客,这篇博客已经写的非常详细了。注意,在淘淘商城这个项目中,我们使用的是4.1.10版本的KindEditor富文本编辑器。
下载完之后,我们将kindeditor-4.1.10文件放到taotao-manager-web工程的webapp下的js目录下,如下图所示。
下面我们看看taotao-manager-web工程是如何使用KindEditor富文本编辑器的。
由于是添加商品页面需要使用kindeditor,因此我们需要在item-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进行同步,如下图所示。