http://blog.csdn.net/yerenyuan_pku/article/details/72809794

通过上文的学习,我们知道了怎样解决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目录下,如下图所示。 
 
下面我们看看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进行同步,如下图所示。 

(转)淘淘商城系列——KindEditor富文本编辑器的使用的更多相关文章

  1. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  2. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  3. KindEditor富文本编辑器使用

    我的博客本来打算使用layui的富文本编辑器,但是出了一个问题,无法获取编辑器内容,我参考官方文档,获取内容也就那几个方法而已,但是引入进去后始终获取的值为空,百度和bing都试过了,但是始终还是获取 ...

  4. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...

  5. coding++:快速构建 kindeditor 富文本编辑器(一)

    此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html ...

  6. springboot中使用kindeditor富文本编辑器实现博客功能

    kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理 ...

  7. 配置KindEditor富文本编辑器

    第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...

  8. kindEditor 富文本编辑器 使用介绍

    第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 <scr ...

  9. 20180310 KindEditor 富文本编辑器

    问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...

随机推荐

  1. Oracle - 数据更新 - 增删改

    /* 数据的更新 增加 删除 修改 */ -----------------------------------增加(一次只能插入一条数据) --自定义插入数据列的顺序 ,,); --按照数据库默认的 ...

  2. YTU 2439: C++习题 复数类--重载运算符+

    2439: C++习题 复数类--重载运算符+ 时间限制: 1 Sec  内存限制: 128 MB 提交: 1022  解决: 669 题目描述 定义一个复数类Complex,重载运算符"+ ...

  3. YTU 2952: A代码填充--谁挡住了我

    2952: A代码填充--谁挡住了我 时间限制: 1 Sec  内存限制: 128 MB 提交: 135  解决: 38 题目描述 n个人前后站成一列,对于队列中的任意一个人,如果排在他前面的人的身高 ...

  4. YTU 2913: 距离产生美

    2913: 距离产生美 时间限制: 1 Sec  内存限制: 128 MB 提交: 152  解决: 133 题目描述 小明和静静是大学同学,毕业后要去两个不同的城市工作.小明要静静做他的女朋友,静静 ...

  5. jfreechart应用3--饼状图 学习(作者:百度 被风吹过的日子)

    jfreechart应用3--饼状图 三. 饼图 在WebRoot目录下建立名为pie的子目录,用来存放本教程中饼图的实例jsp页面.下面让我们来看一个简单的三维饼图.首先在pie目录下建立一个名为s ...

  6. BZOJ2874 训练士兵 主席树

    [啊 首先 这是道权限题,然后本人显然是没有权限的  23咳3] 最近数据结构做的越来越少..然后 就跟上次一样 ,一做就是三四种不同写法. 等价的题面: 最近GY大神在sc2的天梯中被神族虐得很惨, ...

  7. logback 使用详解 (转)

    详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透彻的理解其配置 logback 常用配置详解(序)logback 简介 logback 常用配置详解(一)<c ...

  8. 10款Web开发最佳的Python框架

    Python是跻身于当代IT世界最流行和代码最高效的编程语言之一.Python框架能帮助你快速启动Web应用. 1.CubicWeb CubicWeb的最重要的功能是其代码的可重用性,由一个个代码单元 ...

  9. Javaweb的9大内置对象

    request(请求) response(响应) session(一个用户存放数据,安全) application(一个项目一般有一个,多用户共享存简单数据) out(输出,在页面输出内容) conf ...

  10. bzoj 2151: 种树【贪心+堆】

    和数据备份差不多 设二元组(i,a[i]),开一个大根堆把二元组塞进去,以len排序,每次取出一个二元组 因为单纯的贪心是不行的,所以设计一个"反悔"操作. 记录二元组的前驱pr后 ...