上节课我们将文件上传和商品详情写完了,这节课我们使用富文本和图表进行代码优化。
主要任务:富文本和图标的使用
一、富文本域
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&