富文本和图表

最新推荐文章于 2025-06-20 09:40:24 发布

原创

最新推荐文章于 2025-06-20 09:40:24 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在项目中集成富文本编辑器ueditor和使用highcharts进行图表统计分析。首先，详细讲解了ueditor的下载、改名、引包、实例化及配置等步骤，然后展示了在后台存储富文本内容的方法。接着，通过创建highcharts.jsp页面，利用ajax获取后台数据并展示商品数量统计分析图表，同时提到了路径设置和数据模拟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

一、富文本域

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 /ueditor/index.html

（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="closeDiv()" />
	<div class="formInput">
		<span>商品详情：</span> 
		<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>