SSM使用Ueditor
富文本编辑器（UEditor）
1. 下载UEditor富文本编辑器
建议下载 utf8-jsp 版本的，结构目录如下：
- 下载地址：链接：https://pan.baidu.com/s/1Nq0oJBAXI8QqM2JU_Bczsg 提取码：sjxy
下载解压完成后打开 index.html 可查看 ueditor 庐山真面目
2. 创建测试项目
注意：在以下步骤之前，你得有一个搭建完成的SSM框架的项目
2.1 在 SSM 项目的 web 目录下创建 ueditor 目录 ，将下载好的目录解压并导入
2.2 在 jsp 文件加下的 lib 目录下包含ueditor开发所需jar包，将jar包导入SSM项目中
- 导入项目后可删除，减小项目的所占内存
3. 创建测试项目
3.1 在web目录下创建一个 ueditor.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>UEditor测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
div {
width: 100%;
}
</style>
</head>
<body>
<h1>UEditor测试</h1>
<form action="${pageContext.request.contextPath}/ueditor/uploading">
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>
<input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
// 实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>
</html>
在下载的 utf8-jsp 中的 index.html 有 ueditor 初始化的内容，上述代码只是选择了本次案例所需的内容并进行修改，如果内容不符合读者所需，可以自行 copy 进行修改
3.2 配置 springmvc.xml
- 因为
SpringMVC会把ueditor加载所需是资源拦截了，所以需要在springmvc的配置文件中把资源放行
<!--过滤静态资源-->
<mvc:resources mapping="/ueditor/**" location="/ueditor/"/>
启动Web项目，你会看到如下
说明此时 ueditor 可以在页面显示了
随便填点东西提交，此时可以发现导航栏如下有以 editorValue 提交的属性
3.3 创建 UeditorController.java
package com.itheima.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/uploading")
public String uploading(String editorValue, Model model){
// editorValue 为接收富文本编辑器提交的内容
model.addAttribute("editorValue", editorValue);
return "ueditorList";
}
}
3.4 编写 ueditorList.jsp 页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ueditor接收页面</title>
</head>
<body>
${editorValue}
</body>
</html>
3.5 测试
在 ueditor.jsp 页面填写信息并点击 提交
会跳转到 ueditroList.jsp 页面显示信息
此时说明 ueditor 测试完成
注意：如果使用IDEA，并且打包的方式是 war ， 则需要到项目下的 class 路径去寻找上传的文件
如下是我的上传路径：
你也可以继续往下看，按照步骤自定义文件上传路径
4. UEditor配置属性（需要注意）
1.config.json
1.1 在 config.json 中可以配置 ueditor 的其他属性，可以根据自己需求进行更改
1.2 从这可以看出我的 Web 项目没有项目名
SSM使用Ueditor的更多相关文章
- 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- ssm架构添加maven、shiro、lucene、ueditor、druid支持
1.pom.xml文件配置: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- ssm项目中ueditor富文本编辑器的使用
一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...
- springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪
获取下载地址 QQ 313596790 A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技术:31359679 ...
- springmvc 多数据源 SSM java redis
A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,servic ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合
日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...
- SSM博客登录注册
我的博客采用的是 spring+springmvc+mybatis框架,用maven和git管理项目,之后的其他功能还有待进一步的学习. 首先新建一个maven项目,我的项目组成大概就这样, 建立好项 ...
- 基于SSM框架贺州学院校园二手交易平台设计与实现
前言 这个是我当时的毕业论文,分享出来,给同学们参考. 绪论 随着中国新四大发明的诞生,网购成了千千万万网友们购物的新方式,新的购物方式促进商业的发展,但随着人们生活水平的提高,许多新购置的物品用了没 ...
- 很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...
随机推荐
- Windows 系统蓝屏错误小全
0 0x00000000 作业完成. 1 0x00000001 不正确的函数. 2 0x00000002 系统找不到指定的档案. 3 0x00000003 系统找不到指定的路径. 4 0x000000 ...
- 《流畅的Python》第二部分 数据结构 【序列构成的数组】【字典和集合】【文本和字节序列】
第二部分 数据结构 第2章 序列构成的数组 内置序列类型 序列类型 序列 特点 容器序列 list.tuple.collections.deque - 能存放不同类型的数据:- 存放的是任意类型的对象 ...
- 透视HTTPS建造固若金汤的城堡
为什么有 HTTPS?因为 HTTP 不安全! 现在的互联网已经不再是 "田园时代","黑暗森林" 已经到来.上网的记录会被轻易截获,网站是否真实也无法验证,黑 ...
- 【C++设计模式二】工厂模式
(1)定义3 简单工厂模式中,每新增一个具体产品,就需要修改工厂类内部的判断逻辑.为了不修改工厂类,遵循开闭原则,工厂方法模式中不再使用工厂类统一创建所有的具体产品,而是针对不同的产品设计了不同的工厂 ...
- 一入Java深似海
Java的基础语法 一个java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来写协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象: 对象是一个类的实例,有状态和行为.例如 ...
- day30 Pyhton 复习模块
一.模块 什么是模块. 模块就是我们把装有特定功能的代码进行归类的结果. 从代码编写的单位来看我们的程序, 从小到大的顺序: 一条代码 < 语句句块 < 代码块(函数, 类) < 模 ...
- ES6的7个实用技巧
Hack #1 交换元素 利用数组解构来实现值的互换 let a = 'world', b = 'hello' [a, b] = [b, a] console.log(a) // -> hell ...
- JVM系列【6】GC与调优5-日志分析
JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 主要内容 分析PS.CMS.G1的回收日志,目标使大概能读懂GC日志. 测 ...
- linux(centos8):zabbix配置邮件报警(监控错误日志)(zabbix5.0)
一,zabbix5.0发邮件报警的准备工作: zabbix5.0在linux平台上的安装:参见这一篇: https://www.cnblogs.com/architectforest/p/129125 ...
- centos8平台用redis-cli对redis5监控和管理
一,监控redis-server上正在执行的命令 1,打开a终端: [root@yjweb log]# /usr/local/soft/redis5/bin/redis-cli -h 127.0.0. ...