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

今天药忘吃喽~ 2021-09-18 16:38 281阅读 0赞

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

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

# 简介 #

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，而且UEditor功能全面、涵盖流行富文本编辑器特色功能，独创多种全新编辑操作模式。涵盖了各种浏览器之间的差异，提供良好的富文本编辑体验开源，基于MIT协议，支持商业和非商业用户的免费使用和任意修改。允许自由使用和修改代码。(UEditor:[https://ueditor.baidu.com/website/index.html][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 {
    
    	// Fields
    
    	private 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);
    
    	@Autowired
    	BizNoticeDao bizNoticeDao;
    
    	@Autowired
    	CfgAreaMemberDao cfgAreaMemberDao;
    
    	@Autowired
    	CfgWorkAreaDao cfgWorkAreaDao;
    
    	/**
    	 * 超级管理员id
    	 */
    	@Value("${crm.system.super-user-id}")
    	Long superUserId;
    
    	@RequestMapping
    	public void index() {
    	}
    
    	@RequestMapping("/list")
    	@ResponseBody
    	public 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")
    	@ResponseBody
    	public 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
    	@ResponseBody
    	public 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
    	@ResponseBody
    	public AjaxResult save(@Valid BizNotice bizNotice, String editorValue, HttpSession session, BindingResult br) {
    		// 创建这条数据的id
    		if (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")
    	@ResponseBody
    	public 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>

## 页面布局设置 ##

## 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>

**答谢：师父何指导**

[https_ueditor.baidu.com_website_index.html]: https://ueditor.baidu.com/website/index.html