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进行同步。如下图所示。

(转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)的更多相关文章

  1. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  2. NeHe OpenGL教程 第二十二课:凹凸映射

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. Python学习第二十二课——Mysql 表记录的一些基本操作 (增删改)

    记录基本操作: 增:(insert into) 基本语法: insert into 表名(字段) values(对应字段的值): 例子1: insert into employee(id,name,a ...

  4. 第二十二课:js事件原理以及addEvent.js的详解

    再看这篇博客之前,希望你已经对js高级程序编程一书中的事件模块进行了详读,不然我只能呵呵了. document.createEventObject,在IE下创建事件对象event. elem.fire ...

  5. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  6. python第二十二课——list函数

    演示list类型中常用的一些函数: 1.append(obj):将obj元素追加到列表的末尾 lt=['路费','佐罗','山治','乔巴','乌索普','纳米桑'] #append(): lt.ap ...

  7. Spring入门第二十二课

    重用切面表达式 我们有的时候在切面里面有多个函数,大部分函数的切入点都是一样的,所以我们可以声明切入点表达式,来重用. package logan.study.aop.impl; public int ...

  8. 快学Scala 第二十二课 (apply和unapply)

    apply和unapply: apply方法经常用在伴生对象中,用来构造对象而不用显式地使用new. unapply是当做是伴生对象的apply方法的反向操作.apply方法接受构造参数,然后将他们变 ...

  9. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

随机推荐

  1. 函数式语言(functional language)定义、函数式语言的种类以及为什么函数式语言会流行起来的学习笔记

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...

  2. BZOJ(3) 1051: [HAOI2006]受欢迎的牛

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7365  Solved: 3937[Submit][Sta ...

  3. new出来的对象无法调用@Autowired注入的Spring Bean

    @Autowired注入Spring Bean,则当前类必须也是Spring Bean才能调用它,不能用new xxx()来获得对象,这种方式获得的对象无法调用@Autowired注入的Bean. 1 ...

  4. pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等

    pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等 pojo类对应的就是数据库中的表,pojo类属性类型一定要用包装类Integer等 pojo类对应的就是数据库中的表 ...

  5. BP神经网络及其在教学质量评价中 的应用

    本文学习笔记是自己的理解,如有错误的地方,请大家指正批评.共同进步.谢谢! 之前的教学质量评价,仅仅是通过对教学指标的简单处理.如求平均值或人为的给出各指标的权值来加权求和,其评价结果带有非常大主观性 ...

  6. [JavaEE] Implement a REST Endpoint

    1. Create a rest folder with JAXRSConfiguration.java: package com.pluralsight.bookstore.rest; import ...

  7. JMeter—丰富报表功能PerfMon插件

    可能有童鞋不知道PerfMon插件是干啥的.这里简要说一下: 在做负载測试时,我们要时刻关注server的CPU.MEM--的使用情况,可是JMeter本身对这些信息是不做收集的,这个时候PerfMo ...

  8. 命令行下mysql的部分操作

    远程链接数据库: mysql –u用户名 [–h主机名或者IP地址] –p密码 (用户名是登录的用 户,主机名或者IP地址为可选项,如果是本地连接则不需要,远程连接需要填写,密码是对应用户的密码.) ...

  9. bzoj3894: 文理分科(还是那道最小割)

    3894: 文理分科 题目:传送门 感谢波老师没有来D飞我,让我做出了这题... 题解: 这题其实和我做的上一题(bzoj2132)很像,所以就不写题意了. 依然是那最小割... 这题给出了四个利益矩 ...

  10. MSP430 使用时 RST引脚一定拉高

    因为这次省去了RESET按键,RST没做任何处理,程序下载完之后插上电池无法运行,最终原因:RST引脚没有拉高.呼呼切记啊