SpringBoot集成UEditor实现文本编辑功能

  • 简介
    • 创建实体
    • DAO层
    • Controller层业务实现
    • 页面弹出框设置
    • 页面布局设置
    • js页面设置
    • 设置只显示六条记录 点击事件的查看功能
    • pom.xml配置

简介

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，而且UEditor功能全面、涵盖流行富文本编辑器特色功能，独创多种全新编辑操作模式。涵盖了各种浏览器之间的差异，提供良好的富文本编辑体验开源，基于MIT协议，支持商业和非商业用户的免费使用和任意修改。允许自由使用和修改代码。(UEditor:https://ueditor.baidu.com/website/index.html)

创建实体

package cn.gson.crm.model.domain;import java.sql.Timestamp;import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;import com.fasterxml.jackson.annotation.JsonIgnoreProperties;/*** BizNotice entity. @author MyEclipse Persistence Tools*/
@Entity
@Table(name = "biz_notice")
@JsonIgnoreProperties(value = { "hibernateLazyInitializer", "handler","operations","roles","menus"})
public class BizNotice implements java.io.Serializable {// Fieldsprivate static final long serialVersionUID = -8466379237715997671L;private String id;private String title;private String content;private String publisherId;private Boolean state;private Timestamp publisherTime;private Timestamp createTime;private String remark;    //备注// Constructors/** default constructor */public BizNotice() {}/** minimal constructor */public BizNotice(String id) {this.id = id;}/** full constructor */public BizNotice(String id, String title, String content,String publisherId, Boolean state, Timestamp publisherTime,Timestamp createTime, String remark) {this.id = id;this.title = title;this.content = content;this.publisherId = publisherId;this.state = state;this.publisherTime = publisherTime;this.createTime = createTime;this.remark = remark;}// Property accessors@Id@Column(name = "id", unique = true, nullable = false, length = 40)public String getId() {return this.id;}public void setId(String id) {this.id = id;}@Column(name = "title")public String getTitle() {return this.title;}public void setTitle(String title) {this.title = title;}@Column(name = "content", length = 65535)public String getContent() {return this.content;}public void setContent(String content) {this.content = content;}@Column(name = "publisher_id", length = 40)public String getPublisherId() {return this.publisherId;}public void setPublisherId(String publisherId) {this.publisherId = publisherId;}@Column(name = "state")public Boolean getState() {return this.state;}public void setState(Boolean state) {this.state = state;}@Column(name = "publisher_time", length = 19)public Timestamp getPublisherTime() {return this.publisherTime;}public void setPublisherTime(Timestamp publisherTime) {this.publisherTime = publisherTime;}@Column(name = "create_time", length = 19)public Timestamp getCreateTime() {return this.createTime;}public void setCreateTime(Timestamp createTime) {this.createTime = createTime;}@Column(name = "remark")public String getRemark() {return this.remark;}public void setRemark(String remark) {this.remark = remark;}
}

DAO层

@Repository
public interface BizNoticeDao extends PagingAndSortingRepository<BizNotice, Long>, JpaSpecificationExecutor<BizNotice> {public BizNotice findById(String id);public List<BizNotice> findTop6ByStateOrderByPublisherTimeDesc(boolean b);}

Controller层业务实现

package cn.gson.crm.controller.system;/*** 描述：通知公告栏信息Controller* * @author fyh* @date 2018-11-20*/@Controller
@RequestMapping("/system/biznotice")
public class BizNoticeController {Logger logger = Logger.getLogger(BizNoticeController.class);@AutowiredBizNoticeDao bizNoticeDao;@AutowiredCfgAreaMemberDao cfgAreaMemberDao;@AutowiredCfgWorkAreaDao cfgWorkAreaDao;/*** 超级管理员id*/@Value("${crm.system.super-user-id}")Long superUserId;@RequestMappingpublic void index() {}@RequestMapping("/list")@ResponseBodypublic DataGrid<BizNotice> list(Integer page, Integer rows, String title, String content, String publisherId,String state, String publisherTime, String createTime, String remark) {PageRequest pr = new PageRequest(page - 1, rows);// 使用了自定义的复杂查询，这就比原生的Specification的语法使用流畅多了Page<BizNotice> pageData = bizNoticeDao.findAll(new MySpecification<BizNotice>().and(Cnd.eq("title", title), Cnd.like("content", content), Cnd.like("publisherId", publisherId), // 发布人Cnd.eq("state", state), Cnd.like("publisherTime", publisherTime),Cnd.eq("createTime", createTime), Cnd.like("remark", remark)).desc("createTime"), pr);return new DataGrid<BizNotice>(pageData);}@RequestMapping("/listForm")@ResponseBodypublic List<BizNotice> listForm() {// jpa规范仅限查询前五条状态为已发布，并且以发布时间倒叙List<BizNotice> stateList = bizNoticeDao.findTop6ByStateOrderByPublisherTimeDesc(true);return stateList;}@RequestMapping("/viewNoticeform")public void viewNoticeform(String id, Model model, HttpSession session) {if (id != null) {ObjectMapper mapper = new ObjectMapper();BizNotice bizNotice = bizNoticeDao.findById(id);try {model.addAttribute("bizNotice", mapper.writeValueAsString(bizNotice));} catch (JsonProcessingException e) {logger.error("json转换错误", e);}}}@RequestMapping("/form")public void form(String id, Model model) {if (id != null) {ObjectMapper mapper = new ObjectMapper();BizNotice bizNotice = bizNoticeDao.findById(id);try {model.addAttribute("bizNotice", mapper.writeValueAsString(bizNotice));} catch (JsonProcessingException e) {logger.error("json转换错误", e);}}}@MyLog(value = "删除通知公告信息") // 这里添加了AOP的自定义注解@RequestMapping("/delete")@Transactional@ResponseBodypublic AjaxResult delete(String id, String name) {try {bizNoticeDao.delete(bizNoticeDao.findById(id));} catch (Exception e) {return new AjaxResult(false).setMessage(e.getMessage());}return new AjaxResult();}@RequestMapping({ "/save", "/update" })@Transactional@ResponseBodypublic AjaxResult save(@Valid BizNotice bizNotice, String editorValue, HttpSession session, BindingResult br) {// 创建这条数据的idif (bizNotice != null && StringUtils.isEmpty(bizNotice.getId())) {bizNotice.setId(UUIDUtil.creatUUID());}// 后台自动获取创建人Member member = (Member) session.getAttribute(Constants.SESSION_MEMBER_KEY);bizNotice.setPublisherId(member.getRealName());List<CfgAreaMember> memberList = cfgAreaMemberDao.findByMemberId(member.getId());if (memberList == null || memberList.size() == 0) {if (member.getId() != superUserId) {return new AjaxResult(false, "您不属于任何工区，请联系管理员！");}}if (member.getId() != superUserId) {String areaid = memberList.get(0).getAreaId();String bdid = cfgWorkAreaDao.findById(areaid).getCfgBidspart().getId();bizNotice.setBidspartId(bdid);} else {bizNotice.setBidspartId("");}bizNotice.setCreateTime(DateUtil.getTimestampDate());bizNotice.setState(false);bizNotice.setContent(editorValue);try {bizNoticeDao.save(bizNotice);} catch (Exception e) {e.printStackTrace();}return new AjaxResult();}@MyLog(value = "发布通知公告信息") // 这里添加了AOP的自定义注解@RequestMapping("/noticeSubmit")@ResponseBodypublic AjaxResult noticeSubmit(@Valid String id, String name) {BizNotice notice = bizNoticeDao.findById(id);notice.setState(true);notice.setPublisherTime(DateUtil.getTimestampDate());bizNoticeDao.save(notice);return new AjaxResult();}}

页面弹出框设置

<form class="app-form" id="biznotice-form"><input type="hidden" name="id"><div class="field" padding="5px" ><input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题：'"></div><div class="field" padding="5px" margin="5px"><script id="content" type="text/plain"  style="width:100%;height:320px;"></script></div><div class="field"><input class="easyui-textbox" name="remark" style="width:100%" data-options="label:'备注：'"></div>
</form><script>//ue = new baidu.editor.ui.Editor();//ue.render("content",{ zIndex: 10000});<#if bizNotice??>$(function () {//var ue = UE.getEditor('content', { toolbars:[[]], zIndex: 10000}).render('content');UE.delEditor('content');var ue = UE.getEditor('content', { zIndex: 10000});setTimeout(function () {var obj = ${bizNotice};ue.ready(function() {ue.setContent(obj.content);});$("#biznotice-form").form("load", obj);}, 200);});    </#if><#if !bizNotice??>$(function () {UE.delEditor('content');var ue = UE.getEditor('content', {zIndex: 10000});});</#if>
</script>

页面布局设置

<div class="easyui-layout" fit="true"><div data-options="region:'north',border:false" style="height: 80px;padding: 10px;overflow: hidden;" title="通知公告栏信息"><form id="biznotice_search_from" class="searcher-form"><input name="publisherId" class="easyui-textbox field" label="发布人：" labelWidth="70"><a class="easyui-linkbutton searcher" data-options="iconCls:'fa fa-search'">检索</a><a class="easyui-linkbutton reset" data-options="iconCls:'fa fa-repeat'">重置</a></form></div><div data-options="region:'center',border:false" style="border-top: 1px solid #D3D3D3"><table id="biznotice_dg"></table></div>
</div>

js页面设置

define(function () {return function () {var dg = $("#biznotice_dg");var searchFrom = $("#biznotice_search_from");var form;// 使用edatagrid，需要而外导入edatagrid扩展dg.datagrid({url: '/system/biznotice/list',emptyMsg: "未查询到数据",idField: "id",fit: true,rownumbers: true,fitColumns: true,border: false,pagination: true,singleSelect: true,pageSize: 30,columns: [[{field: 'title',title: '标题',width: 30},{field: 'publisherId',title: '发布人',width: 40},{field: 'content',title: '内容',width: 150},{field: 'publisherTime',title: '发布时间',width: 60},{field: 'remark',title: '备注',width: 40},{field: 'state',title: '状态',width: 30,formatter: function (value, row, index) {if(row.state == false){return "未发布";}else{return "已发布";}}},{field: 'test',title: '操作',width: 70,align: 'center',formatter: function (value, row, index) {if(row.state == false){return authToolBar({"notice-edit": '<a data-id="' + row.id + '" class="ctr ctr-edit">编辑</a>',"notice-delete": '<a data-id="' + row.id + '" class="ctr ctr-delete">删除</a>',"notice-submit": '<a data-id="' + row.id + '" data-name="' + row.title + '" class="ctr ctr-status">发布</a>'}).join("");}else{return authToolBar({ "notice-delete": '<a data-id="' + row.id + '" data-name="' + row.title + '" class="ctr ctr-delete">删除</a>'}).join("");}}}]],toolbar: authToolBar({"notice-create": {iconCls : 'fa fa-plus-square',text : "创建",handler : function() {createForm();}},"notice-editword": {text : "打开文档",handler : function() {POBrowser.openWindowModeless("system/biznotice/word", "width=1050px;height=900px;");}},"biznotice-editexcel":{text : "打开excel",handler : function() {POBrowser.openWindowModeless("system/biznotice/excel", "width=1050px;height=900px;");}}})});/*** 操作按钮绑定事件*/dg.datagrid("getPanel").on('click', "a.ctr-edit", function () {// 编辑按钮事件createForm.call(this, this.dataset.id)}).on('click', "a.ctr-delete", function () {// 删除按钮事件var id = this.dataset.id;var name = this.dataset.name;$.messager.confirm("删除提醒", "确认删除此记录?", function (r) {if (r) {$.get("/system/biznotice/delete", {id: id, name: name}, function () {// 数据操作成功后，对列表数据，进行刷新dg.datagrid("reload");});}});}).on('click', "a.ctr-status", function () {// 提交公告var id = this.dataset.id;var name = this.dataset.name;$.messager.confirm("提醒", "确认提交此公告?", function (r) {if (r) {$.get("/system/biznotice/noticeSubmit", {id: id, name: name}, function () {// 数据操作成功后，对列表数据，进行刷新dg.datagrid("reload");});}});});/*** 搜索区域事件*/searchFrom.on('click', 'a.searcher', function () {//检索dg.datagrid('load', searchFrom.formToJson());}).on('click', 'a.reset', function () {//重置searchFrom.form('reset');dg.datagrid('load', {});});/*** 创建表单窗口** @returns*/function createForm(id) {var dialog = $("<div/>", {class: 'noflow'}).dialog({title: (id ? "编辑" : "创建"),iconCls: 'fa ' + (id ? "fa-edit" : "fa-plus-square"),height: id ? 700 : 700,width: 900,href: '/system/biznotice/form',queryParams: {id: id},modal: true,onClose: function () {$(this).dialog("destroy");},onLoad: function () {//窗口表单加载成功时执行form = $("#biznotice-form");},buttons: [{iconCls: 'fa fa-save',text: '保存',handler: function () {if (form.form('validate')) {$.post("/system/biznotice/save", form.serialize(), function (res) {dg.datagrid('reload');dialog.dialog('close');})}}}]});}}
});

设置只显示六条记录 点击事件的查看功能

<div title="通知公告" collapsible="true" style="height:340px;padding:5px;"><table id="bizNotice"></table>
</div>//通知公告栏$('#bizNotice').datagrid({url: '/system/biznotice/listForm',emptyMsg: "未查询到数据",idField: "id",fit: true,rownumbers: false,fitColumns: true,border: false,showHeader:false,singleSelect: true,columns: [[{field: 'title',title: '标题',width: 100,formatter: function(value, row, index){if(value.length >25){val = value.substr(0,25)+'  '+'...';}else{val = value;}if(index < 3){return '<i class="fa fa-bullhorn" aria-hidden="true"></i>' + '    ' + val + '  ' + '<img src="../../images/new.gif"/>';}else{return '<i class="fa fa-bullhorn" aria-hidden="true"></i>' + '    ' + val;}}},{field: 'publisherTime',title: '发布时间',width: 25,align : 'right',formatter: function(value, row, index){return value.substr(0, 11);}}]],onLoadSuccess: function (data) {var panel = $(this).datagrid('getPanel');var tr = panel.find('div.datagrid-body tr');tr.each(function () {var td = $(this).children('td');td.css({"border-width": "0"});});},onClickRow: function(index, row){var id = row.id;viewForm(id);},rowStyler: function(index, row){if(index < 3){return 'color:#37A2DA;';}}});//新闻公告超链接页面function viewForm(id) {var dialog = $("<div/>", {class: 'noflow'}).dialog({title: "关于公告",iconCls: 'fa ' + (id ? "fa-edit" : "fa-plus-square"),height: 700,width: 700,href: '/system/biznotice/viewNoticeform',queryParams: {id: id,},modal: true,onClose: function () {$(this).dialog("destroy");},onLoad: function () {},buttons: [{iconCls: 'fa fa-close',text: '关闭',handler: function () {dialog.dialog('close');}}]});};

pom.xml配置

<dependency><groupId>cn.songxinqiang</groupId><artifactId>com.baidu.ueditor</artifactId><version>RELEASE</version>
</dependency>

答谢：师父何指导

SpringBoot集成UEditor实现文本编辑功能增删查改发布等功能相关推荐

  1. Mybatis、SpringBoot入门实战（微型项目） -- Mysql增删查改、写接口、测试接口

    Mybatis入门实战(微型项目) – Mysql增删查改.写接口.测试接口 开发环境: 1.Window10 v1909 2.idea 2019 3.jdk 1.8 4.mybatis 3.5.5 ...

  2. SpringBoot整合Mybatis-plus实现增删查改

    今天给大家分享一下SpringBoot整合Mybatis-plus的增删查改案例. pom.xml <?xml version="1.0" encoding="UT ...

  3. django mysql开发_基于django框架web项目实战开发四 django+mysql实现增删查改功能

    第一步:编写增删查改功能代码 打开项目myweb目录下view.py, 并编写以下代码 view.py from django.shortcuts import render, redirect fr ...

  4. android开发课程表app数据库,基于Android studio 的课程表增删查改功能(基于sqlite)

    [实例简介]Android studio 用SQLite实现课程表的增删查改功能,:实现详情浏览.编辑.及新增功能.课程编号可以实现正则检查(编号规则XX00000,XX表示两位大写的字母,00000 ...

  5. 安卓后端mysql_后端Spring Boot+前端Android交互+MySQL增删查改（Java+Kotlin实现）

    1 前言&概述 这篇文章是基于这篇文章的更新,主要是更新了一些技术栈以及开发工具的版本,还有修复了一些Bug. 本文是SpringBoot+Android+MySQL的增删查改的简单实现,用到 ...

  6. 只需一行代码实现增删查改，微软已经让我们很简单。谈AccessDataSource的使用。...

    这是一个很简单的内容.日常我们总腻烦做增删查改这样的重复性的劳动,如果你的项目不是太大,如果你的团队很小,或许就是你一个人,那么就完全可以参考以下这样简单的方式.微软已经给我们做了.我们只要写一行代码 ...

  7. winform调用webservice增删查改_教你分别用数据库与云函数实现“增删查改”

    导语 数据库 API 与云函数"增删查改"的姿势有何不同?对比代码差异往往有助于更好的理解,本文用详细代码帮你寻找答案并巩固基础! ▌一.云开发初始化 wx.cloud.init( ...

  8. JAVA原生mvc实现用户信息的增删查改

    笔者最近学完jsp和servlet,于是心血来潮的打算写个简单的用户案例 环境准备: 开发工具eclipse jdk-1.8.0_72 tomcat-9.0.5 前端部分: 1.自己手写了一套样式 2 ...

  9. 初学jsp课，一个基于jsp+javabean+servlet+sql server小型房源网站，实现了用户表，房源表，及留言板的增删查改。使用deamwear编译器

    1 设计目的 <Web应用开发课程设计>是实践性教学环节之一,是<Web程序设计>课程的辅助教学课程.通过课程设计,使学生掌握Web网站的基本概念,结合实际的操作和设计,巩固课 ...

最新文章

  1. 前端开发神器之ngrok
  2. 头条hr就是刚：拒绝Offer或者放弃入职等于永远跟头条没关系！
  3. Java线程详解(5)-线程的同步与锁
  4. ESP8266烧写时的各种参数设置
  5. PostgreSQL JDBC SQLWarning
  6. OGG重复记录导致复制进程挂起
  7. 类的加载连接和初始化
  8. PyTorch GPU安装指南 (Ubuntu 16.04 anaconda cuda8.0 cuDNN6.0)
  9. Opencl 并行求和
  10. leetcode 646 python
  11. 基于php校园失物招领,校园失物招领系统的设计.doc
  12. 30岁女子跟程序员相亲，结果见面后秒拒：秃顶工资再多也不要
  13. ASP母版页与内容页不同目录 链接问题
  14. 一个demo学会java
  15. java 实现多重继承
  16. 疫情严峻！有高校不放寒假，直接开始新学期！还有高校紧急放假，停止考试直接回家...
  17. javaweb中真分页案例
  18. 6319. 【省选组】【USACO 2019 February Platinum】Problem 3. Mowing Mischief
  19. 使用计算机结束时断开终端的连接属于什么,计算机结束时断开终端的连接属于什么...
  20. poj 1606 Jugs（广搜BFS+路径输出）

热门文章

  1. Linux tr命令
  2. Android BLE低功耗蓝牙开发（下） BLE客户端（中央设备）与GATT服务的通讯
  3. Java实现Socket5代理服务器
  4. 面试不行，是你的逻辑问题--如何提升逻辑表达能力，让说话随时都能条理清晰？
  5. axios是什么？如何在项目中使用?
  6. sqlserver触发器的使用以及inserted和deleted详解
  7. Release正常，Debug不正常的奇怪现象
  8. 利用CSS伪元素写三角形
  9. Window 7下QT5.9.2安装、QTCreator调试器配置
  10. 【Golang】TOML配置处理