富文本编辑器（UEditor）

1. 下载UEditor富文本编辑器

建议下载 utf8-jsp 版本的，结构目录如下：

下载解压完成后打开 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的更多相关文章

  1. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  2. ssm架构添加maven、shiro、lucene、ueditor、druid支持

    1.pom.xml文件配置: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  3. ssm项目中ueditor富文本编辑器的使用

    一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...

  4. springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪

    获取下载地址   QQ 313596790  A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:31359679 ...

  5. springmvc 多数据源 SSM java redis

      A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,servic ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇（六）easyUI与富文本编辑器UEditor整合

    日常啰嗦 本来这一篇和接下来的几篇是打算讲一下JDBC和数据库优化的,但是最近很多朋友加我好友也讨论了一些问题,我发现大家似乎都是拿这个项目作为练手项目,作为脚手架来用的,因此呢,改变了一下思路,JD ...

  7. SSM博客登录注册

    我的博客采用的是 spring+springmvc+mybatis框架,用maven和git管理项目,之后的其他功能还有待进一步的学习. 首先新建一个maven项目,我的项目组成大概就这样, 建立好项 ...

  8. 基于SSM框架贺州学院校园二手交易平台设计与实现

    前言 这个是我当时的毕业论文,分享出来,给同学们参考. 绪论 随着中国新四大发明的诞生,网购成了千千万万网友们购物的新方式,新的购物方式促进商业的发展,但随着人们生活水平的提高,许多新购置的物品用了没 ...

  9. 很详细的SpringBoot整合UEditor教程

    很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529    版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...

随机推荐

  1. uni-app引入iconfont字体图标

    1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别 ...

  2. MySQL中事务和事务的隔离级别

    本文主要是帮助理解相关知识,没有具体的操作和代码. 事务 事务就是一组操作,这组操作要么全部成功,要么全部失败. 最经典的例子就是银行转账: 张三给李四转账100,对用户来说,就是一个操作.但对应到数 ...

  3. JMeter实战(一) 体系结构

    此为开篇,介绍JMeter的组成结构,阅读后对JMeter形成整体认知和初步印象. 为了便于后续讲解,先明确下2个术语. 元件:如HTTP请求.事务控制器.响应断言,就是一个元件. 组件:如逻辑控制器 ...

  4. 文件上传-阿里云OSS-存储文件

    JS上传文件到阿里云OSS OSS支持流式写入和读出.特别适合视频等大文件的边写边读业务场景. 注意在OSS的控制台:跨域管理中设置允许的方法 <script> var client = ...

  5. 2016年 实验二、C2C模拟实验

    实验二.C2C模拟实验 [实验目的] 掌握网上购物的基本流程和C2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商务应用软件 [知识准备] 本实 ...

  6. 多测师讲解自动化测试 _RF自定义关键字_高级讲师肖sir

    RF自定义关键字 在rf中叫关键字 在python中就叫做函数 或实例方法 我们自己可以写自定义关键字 自己创建一个库===库里面去创建模块===模块里面创建类和实例方法==>rf导入和引用 库 ...

  7. day37 Pyhton 网络编程04

    # tcp协议和udp协议的选择问题 # tcp # 大量的连续的数据 传递文件\发送邮件 # 文件的传递 # 下载电影 # udp # 短消息类 社交软件 # qq 微信 # 在线播放视频 快会丢帧 ...

  8. Django创建表时报错django.db.utils.InternalError: (1366问题解决记录

    问题出现 执行Python manage.py makemigrations生成创建表的py文件 执行python manage.py migrate创建数据表 界面出现报错 问题原因 网上搜索原因, ...

  9. 第五章 Linux操作系统关机、重启、注销及其查看ip命令

    一.更新系统时间与网络时间同步 1.  安装ntpdate工具 # yum -y install ntp ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...

  10. NCEP数据资料获取 地面抬升指数

    先放上数据地址:https://www.esrl.noaa.gov/psd/data/gridded/data.ncep.reanalysis.surface.html 美国国家环境预报中心(NCEP ...