富文本和图表

上节课我们将文件上传和商品详情写完了，这节课我们使用富文本和图表进行代码优化。

---

主要任务：富文本和图标的使用

---

一、富文本域

1. 上节课我们运行后的页面如下：

2. 富文本插件，一般用在新增商品时，商品详情

我们用的富文本插件叫ueditor

（1）下载：

https://ueditor.baidu.com/website/onlinedemo.html（下载最新版本即可）；

（2）改名：

解压后将整个文件夹放到项目WebContent中，直接在压缩文件里面复制/黏贴过来，名字叫utf8-jsp，utf8-jsp文件夹上右键—Refator—Rename—改成ueditor；

（3）引包：

上面复制进去的文件夹在报错，因为jsp文件夹里面有用到的类没引入需要的jar包将uedotor/jsp/lib下面的jar包复制到WebContent/Web-inf/lib下；

（4）实例：

editor/下面有个index.html，启动项目，访问一下看看：http://localhost:8080/shop

（5）使用插件：

我们要在goods.jsp使用插件，使用前必须引入以下3个文件，从index.html上面拷贝，然后改下文件引入的路径

<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/lang/zh-cn/zh-cn.js"></script>

（6）调用富文本编辑器：

在新增的那个div里面，将商品详情表单文本框注释，改成下面的写法（可取index,html里面复制）稍微改下宽和高，然后在<script>标签里面启用一下

	<div class="formInput">
		<span>商品状态 1-正常 2-下架 3-删除 默认下架：</span> 
		<input type="text" name="goodStatus" id="goodStatus" />
	</div>	
	<input class="btn2 formButton" type="button" value="保存"	onClick="create()" />
	<input class="btn2 formButton" type="button" value="关闭"	onClick&