activiti工作流在线表单设计功能(activiti + ueditor + Ueditor Web Form De
分享一下我老师大神的人工智能教程吧。零基础,通俗易懂!风趣幽默!http://www.captainbed.net/
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
之前实现了activiti工作流的动态表单功能,接下来准备实现activiti的外置表单功能,并且外置表单可以在线编辑。
activiti工作流在线表单设计功能实现可以分为2个部分:
1.在线表单设计功能。
2.表单与activiti工作流关联起来。
第一部分,在线表单设计功能可以使用ueditor 的插件WEB表单设计器实现。
第二部分,可以使用activiti工作流的外置表单 原理关联 WEB表单设计器 设计的表单。
主要难点在实现第一部分,具体效果图如下:
相关所有实现代码:
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><!DOCTYPE html ><html><head> <title>在线表单列表</title><%@include file="/common/base.jsp" %><script type="text/javascript">$(function() { query();})function query(){ $('#dg').datagrid('options').queryParams = parseParams("toolbar"); $("#dg").datagrid('reload'); //$("#dg").datagrid('load',parseParams("toolbar"));}function formatterName(value, row, index){ return row.addUser.name;} function formatOp(value, row, index){ var html = ""; html += "<a href='javascript:openView(null,null,\""+value+"\")'>编辑</a> "; html += "<a href='javascript:openDesign(\""+value+"\")'>设计</a> "; html += "<a href='javascript:del(\""+value+"\")'>删除</a>"; return html;} function openView(rowIndex,rowData,bizId){ bizId = bizId || rowData.id; $('#win').window({ title: '修改在线表单', width:450, height:350, modal:true }); $('#subWin').attr("src",'page/online-form/add.jsp?bizId='+bizId) $('#win').window('open');}function openDesign(id){ $('#win').window({ title: '设计在线表单', width:1000, height:680, modal:true }); $('#subWin').attr("src",'page/online-form/design.jsp?bizId='+id) $('#win').window('open');}function add(){ $('#win').window({ title: '新增在线表单', width:450, height:350, modal:true }); $('#subWin').attr("src",'page/online-form/add.jsp?bizId=') $('#win').window('open');}function del(id){ $('#frm').mySubmit({ url : 'OnlineFormController/delete?id='+id });}</script><style type="text/css"></style></head><body> <table id="dg" class="easyui-datagrid" title="内容管理" style="width:100%;height:auto;margin:0 auto;" data-options="singleSelect:true,collapsible:true,onDblClickRow:openView" url="OnlineFormController/list" rownumbers="true" toolbar="#toolbar"> <thead> <tr> <th align="center" data-options="field:'key',width:200,align:'center'">表单名称</th> <th align="center" data-options="field:'descr',width:600,align:'center'">描述</th> <th align="center" formatter="formatterName" data-options="field:'addUserId',width:240,align:'center'">设计者</th> <th align="center" formatter="formatDate" data-options="field:'addtime',width:150,align:'center'">日期</th> <th align="center" data-options="field:'enabled',width:100,align:'center'">是否启用</th> <th align="center" formatter="formatOp" data-options="field:'id',width:350,align:'center'">操作</th> </tr> </thead> </table><div id="toolbar"> <span>设计者:</span> <input class="easyui-validatebox" name="addUser.name" > <a href="javascript:query()" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width: 80px">查询</a> <a href="javascript:add()" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width: 80px">新增</a></div><div id="win"> <iframe id="subWin" src=''width= "100%" height= "99%" marginheight= "0" marginwidth= "0" hspeace= "0" vspace= "0" frameborder= "0" ></iframe></div><form id="frm" method="post" style="display:none;"></form></body></html>
add.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%@page import="org.springframework.web.context.support.WebApplicationContextUtils"%> <%@page import="org.springframework.context.ApplicationContext" %> <%@page import="com.jy.service.onlineform.OnlineFormService" %> <% ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext()); OnlineFormService onlineFormService = (OnlineFormService)ctx.getBean("onlineFormService"); String bizId = request.getParameter("bizId"); if(bizId != null && !bizId.equals("")){ request.setAttribute("of", onlineFormService.getEntityById(bizId)); }%><!DOCTYPE html ><html><head> <title>新增文档</title><%@include file="/common/base.jsp" %><link rel="stylesheet" href="static/css/system/bootstrap/bootstrap.min.css" /><script src="static/js/bootstrap/bootstrap.min.js"></script><style type="text/css">.fitem{ vertical-align: text-top;}tr{height: 40px;}form div{ margin-top:10px;}form div label{ width:100px; text-align: right;}</style><script type="text/javascript">function save(){ $('#frm').mySubmit({ url : 'OnlineFormController/save', success: function(res){ window.parent.query(); closeWin(); } }); return true;}</script></head><body> <form id="frm" method="post"> <input name="id" type="hidden" value="${of.id}"/> <div> <label for="key">表单名称:</label> <input id="key" class="easyui-validatebox" value="${of.key}" name="key" data-options="required:true" /> </div> <div> <label for="descr">描述:</label> <input id="descr" class="easyui-validatebox" value="${of.descr}" name="descr" /> </div> <div> <label for="enabled">是否启用:</label> <select id="enabled" name="enabled"> <option ${"启用".equals(of.enabled)? "selected" : ""}>启用</option> <option ${"禁用".equals(of.enabled)? "selected" : ""}>禁用</option> </select> </div> <div style="text-align: center; padding: 5px"> <a href="javascript:save()" class="easyui-linkbutton" >保存</a> <a href="javascript:closeWin()" class="easyui-linkbutton">取消</a> </div></form></body></html>
design.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%@page import="org.springframework.web.context.support.WebApplicationContextUtils"%> <%@page import="org.springframework.context.ApplicationContext" %> <%@page import="com.jy.service.onlineform.OnlineFormService" %> <% ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext()); OnlineFormService onlineFormService = (OnlineFormService)ctx.getBean("onlineFormService"); String bizId = request.getParameter("bizId"); if(bizId != null && !bizId.equals("")){ request.setAttribute("of", onlineFormService.getEntityById(bizId)); }%><!DOCTYPE html ><html><head> <title>设计表单</title><%@include file="/common/base.jsp" %><link rel="stylesheet" href="static/css/system/bootstrap/bootstrap.min.css" /><script src="static/js/bootstrap/bootstrap.min.js"></script><style type="text/css">.fitem{ vertical-align: text-top;}tr{height: 40px;}</style><script type="text/javascript">function save(){ $('#frm').mySubmit({ url : 'OnlineFormController/design', success: function(res){ closeWin(); } }); return true;}</script></head><body> <div style="padding: 20px;"> <form id="frm" method="post" target="mywin"> <input type="hidden" name="id" value="${of.id}"> <div style="font-size: 40px;width:100%;text-align: center;">表单设计<span style="font-size: 22px;">(表单名称:${of.key})</span></div > <button type="button" onclick="leipiFormDesign.exec('text');" class="btn btn-info btn-small">单行输入框</button> <button type="button" onclick="leipiFormDesign.exec('textarea');" class="btn btn-info btn-small">多行输入框</button> <button type="button" onclick="leipiFormDesign.exec('select');" class="btn btn-info btn-small">下拉菜单</button> <button type="button" onclick="leipiFormDesign.exec('radios');" class="btn btn-info btn-small">单选框</button> <button type="button" onclick="leipiFormDesign.exec('checkboxs');" class="btn btn-info btn-small">复选框</button> <button type="button" onclick="leipiFormDesign.exec('macros');" class="btn btn-info btn-small">宏控件</button> <button type="button" onclick="leipiFormDesign.exec('progressbar');" class="btn btn-info btn-small">进度条</button> <button type="button" onclick="leipiFormDesign.exec('qrcode');" class="btn btn-info btn-small">二维码</button> <div class="alert alert-warning" > <button type="button" class="close" data-dismiss="alert">×</button> <strong>提醒:</strong>单选框和复选框,如:<code>{|-</code>选项<code>-|}</code>两边边界是防止误删除控件,程序会把它们替换为空,请不要手动删除! </div> <textarea style="width:100%;height:100%" name="html" id="container">${of.html}</textarea> </form> </div> <!-- 配置文件 --> <script type="text/javascript" src="static/plugins/ueditor/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="static/plugins/ueditor/ueditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script> <!--Fromdesign扩展---> <script type="text/javascript" charset="utf-8" src="static/plugins/ueditor/formdesign/leipi.formdesign.v4.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript">var leipiEditor = UE.getEditor('container',{ //allowDivTransToP: false,//阻止转换div 为p toolleipi:true,//是否显示,设计器的 toolbars textarea: 'design_content', //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[[ 'fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', '|', 'horizontal', 'spechars', 'wordimage', '|', 'inserttable', 'deletetable', 'mergecells', 'splittocells']], //focus时自动清空初始化时的内容 //autoClearinitialContent:true, //关闭字数统计 wordCount:false, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:300 //,iframeCssUrl:"/Public/css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css //更多其他参数,请参考ueditor.config.js中的配置项 }); var leipiFormDesign = { /*执行控件*/ exec : function (method) { leipiEditor.execCommand(method); }, /* Javascript 解析表单 template 表单设计器里的Html内容 fields 字段总数 */ parse_form:function(template,fields) { //正则 radios|checkboxs|select 匹配的边界 |--| 因为当使用 {} 时js报错 var preg = /(\|-<span(((?!<span).)*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"/gi,preg_group =/<input.*?\/>/gi; if(!fields) fields = 0; var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0; var pno = 0; template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){ var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false; var p0 = plugin; var tag = p6 ? p6 : p4; //alert(tag + " \n- t1 - "+p1 +" \n-2- " +p2+" \n-3- " +p3+" \n-4- " +p4+" \n-5- " +p5+" \n-6- " +p6); if(tag == 'radios' || tag == 'checkboxs') { plugin = p2; }else if(tag == 'select') { plugin = plugin.replace('|-',''); plugin = plugin.replace('-|',''); } plugin.replace(preg_attr, function(str0,attr,val) { if(attr=='name') { if(val=='leipiNewField') { is_new=true; fields++; val = 'data_'+fields; } name = val; } if(tag=='select' && attr=='value') { if(!attr_arr_all[attr]) attr_arr_all[attr] = ''; attr_arr_all[attr] += select_dot + val; select_dot = ','; }else { attr_arr_all[attr] = val; } var oField = new Object(); oField[attr] = val; parse_attr.push(oField); }) /*alert(JSON.stringify(parse_attr));return;*/ if(tag =='checkboxs') /*复选组 多个字段 */ { plugin = p0; plugin = plugin.replace('|-',''); plugin = plugin.replace('-|',''); var name = 'checkboxs_'+checkboxs; attr_arr_all['parse_name'] = name; attr_arr_all['name'] = ''; attr_arr_all['value'] = ''; attr_arr_all['content'] = '<span leipiplugins="checkboxs" title="'+attr_arr_all['title']+'">'; var dot_name ='', dot_value = ''; p5.replace(preg_group, function(parse_group) { var is_new=false,option = new Object(); parse_group.replace(preg_attr, function(str0,k,val) { if(k=='name') { if(val=='leipiNewField') { is_new=true; fields++; val = 'data_'+fields; } attr_arr_all['name'] += dot_name + val; dot_name = ','; } else if(k=='value') { attr_arr_all['value'] += dot_value + val; dot_value = ','; } option[k] = val; }); if(!attr_arr_all['options']) attr_arr_all['options'] = new Array(); attr_arr_all['options'].push(option); //if(!option['checked']) option['checked'] = ''; var checked = option['checked'] !=undefined ? 'checked="checked"' : ''; attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'" '+checked+'/>'+option['value']+' '; if(is_new) { var arr = new Object(); arr['name'] = option['name']; arr['leipiplugins'] = attr_arr_all['leipiplugins']; add_fields[option['name']] = arr; } }); attr_arr_all['content'] += '</span>'; //parse template = template.replace(plugin,attr_arr_all['content']); template_parse = template_parse.replace(plugin,'{'+name+'}'); template_parse = template_parse.replace('{|-',''); template_parse = template_parse.replace('-|}',''); template_data[pno] = attr_arr_all; checkboxs++; }else if(name) { if(tag =='radios') /*单选组 一个字段*/ { plugin = p0; plugin = plugin.replace('|-',''); plugin = plugin.replace('-|',''); attr_arr_all['value'] = ''; attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">'; var dot=''; p5.replace(preg_group, function(parse_group) { var option = new Object(); parse_group.replace(preg_attr, function(str0,k,val) { if(k=='value') { attr_arr_all['value'] += dot + val; dot = ','; } option[k] = val; }); option['name'] = attr_arr_all['name']; if(!attr_arr_all['options']) attr_arr_all['options'] = new Array(); attr_arr_all['options'].push(option); //if(!option['checked']) option['checked'] = ''; var checked = option['checked'] !=undefined ? 'checked="checked"' : ''; attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'" '+checked+'/>'+option['value']+' '; }); attr_arr_all['content'] += '</span>'; }else { attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/,name) : plugin; } //attr_arr_all['itemid'] = fields; //attr_arr_all['tag'] = tag; template = template.replace(plugin,attr_arr_all['content']); template_parse = template_parse.replace(plugin,'{'+name+'}'); template_parse = template_parse.replace('{|-',''); template_parse = template_parse.replace('-|}',''); if(is_new) { var arr = new Object(); arr['name'] = name; arr['leipiplugins'] = attr_arr_all['leipiplugins']; add_fields[arr['name']] = arr; } template_data[pno] = attr_arr_all; } pno++; }) var parse_form = new Object({ 'fields':fields,//总字段数 'template':template,//完整html 'parse':template_parse,//控件替换为{data_1}的html 'data':template_data,//控件属性 'add_fields':add_fields//新增控件 }); return JSON.stringify(parse_form); }, /*type = save 保存设计 versions 保存版本 close关闭 */ fnCheckForm : function ( type ) { if(save()){ return true; } if(leipiEditor.queryCommandState( 'source' )) leipiEditor.execCommand('source');//切换到编辑模式才提交,否则有bug if(leipiEditor.hasContents()){ leipiEditor.sync();/*同步内容*/ // alert("你点击了保存,这里可以异步提交...."); //return false; var type_value='',formid=0,fields=$("#fields").val(),formeditor=''; if( typeof type!=='undefined' ){ type_value = type; } //获取表单设计器里的内容 formeditor=leipiEditor.getContent(); //解析表单设计器控件 var parse_form = this.parse_form(formeditor,fields); //alert(parse_form); $("#leipi_type").val(type_value); $("#leipi_parse_form").val(parse_form); $("#saveform").attr("target","_blank"); $("#saveform").attr("action","/index/parse.html"); $("#saveform").submit(); /*//异步提交数据 $.ajax({ type: 'POST', url : '/index/parse.html', //dataType : 'json', data : {'type' : type_value,'formid':formid,'parse_form':parse_form}, success : function(data){ if(confirm('查看js解析后,提交到服务器的数据,请临时允许弹窗')) { win_parse=window.open('','','width=800,height=600'); //这里临时查看,所以替换一下,实际情况下不需要替换 data = data.replace(/<\/+textarea/,'<textarea'); win_parse.document.write('<textarea style="width:100%;height:100%">'+data+'</textarea>'); win_parse.focus(); } /* if(data.success==1){ alert('保存成功'); $('#submitbtn').button('reset'); }else{ alert('保存失败!'); }* / } });*/ } else { alert('表单内容不能为空!') $('#submitbtn').button('reset'); return false; } } , /*预览表单*/ fnReview : function (){ if(leipiEditor.queryCommandState( 'source' )) leipiEditor.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/ if(leipiEditor.hasContents()){ leipiEditor.sync(); /*同步内容*/ /*设计form的target 然后提交至一个新的窗口进行预览*/ var frm = $('#frm').get(0); frm.target="mywin"; window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + "\""); frm.action="page/online-form/preview.jsp"; frm.submit(); //提交表单 } else { alert('表单内容不能为空!'); return false; } }};</script> </body></html>
preview.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import= "com.jy.common.utils.UeditorTools "%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html ><html><head> <title>新增文档</title> <%@include file="/common/base.jsp" %> <link href="static/plugins/bootcss3.3.5/css/bootstrap.css?2029" rel="stylesheet" type="text/css"><style type="text/css">.fitem{ vertical-align: text-top;}tr{height: 40px;}</style><script type="text/javascript"></script></head><body> <div class="container"> <div class="page-header"> <h1>预览表单 <small>如无问题请保存你的设计</small></h1> </div> <%= UeditorTools.formatStr(request.getParameter("html"))%> </div><!--end container--></body></html>
OnlineFormController.java
package com.jy.controller.onlineform;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.jy.common.ajax.AjaxRes;import com.jy.common.utils.base.Const;import com.jy.common.utils.base.Tools;import com.jy.common.utils.security.AccountShiroUtil;import com.jy.controller.base.BaseController;import com.jy.entity.onlineform.OnlineForm;import com.jy.service.onlineform.OnlineFormService;@[email protected]("/OnlineFormController/")public class OnlineFormController extends BaseController<Object>{ @Autowired private OnlineFormService onlineFormService; @RequestMapping(value="list") @ResponseBody public List<OnlineForm> list(Model model,OnlineForm obj){ List<OnlineForm> list = onlineFormService.list(obj); return list; } /** * 保存表单 * @param obj * @return */ @RequestMapping(value="save") @ResponseBody public AjaxRes save(Model model,OnlineForm obj){ AjaxRes ar=getAjaxRes(); if (Tools.isEmpty(obj.getId())) { obj.setId(get32UUID()); obj.setAddUserId(AccountShiroUtil.getCurrentUser().getAccountId()); onlineFormService.insert(obj); }else{ obj.setModUserId(AccountShiroUtil.getCurrentUser().getAccountId()); onlineFormService.update(obj); } ar.setObj(""); ar.setSucceedMsg(Const.SAVE_SUCCEED);// System.out.println(JsonUtil.toJson(content)); return ar; } /** * 设计表单 * @param obj * @return */ @RequestMapping(value="design") @ResponseBody public AjaxRes design(Model model,OnlineForm obj){ AjaxRes ar=getAjaxRes(); obj.setModUserId(AccountShiroUtil.getCurrentUser().getAccountId()); onlineFormService.design(obj); ar.setObj(""); ar.setSucceedMsg(Const.SAVE_SUCCEED);// System.out.println(JsonUtil.toJson(content)); return ar; } /** * 删除记录 * @param obj * @return */ @RequestMapping(value="delete") @ResponseBody public AjaxRes delete(Model model,OnlineForm obj){ AjaxRes ar=getAjaxRes(); onlineFormService.delete(obj); ar.setObj(""); ar.setSucceedMsg(Const.DEL_SUCCEED);// System.out.println(JsonUtil.toJson(content)); return ar; }}
OnlineFormMapper.xml
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.jy.repository.onlineform.OnlineFormDao"> <resultMap id="onlineform" type="OnlineForm"> <id column="id" jdbcType="VARCHAR" property="id"/> <id column="key" property="key"/> <id column="descr" property="descr"/> <id column="html" jdbcType="CLOB" property="html"/> <id column="enabled" property="enabled"/> <id column="addUserId" property="addUserId"/> <id column="addtime" property="addtime"/> <id column="modUserId" property="modUserId"/> <id column="modtime" property="modtime"/> <association property="addUser" resultMap="com.jy.repository.system.account.AccountDao.base" columnPrefix="a_"/> <association property="modUser" resultMap="com.jy.repository.system.account.AccountDao.base" columnPrefix="m_"/> </resultMap> <select id="list" resultMap="onlineform" parameterType="OnlineForm"> select f.id,f.key,f.descr,f.enabled,f.addUserId,f.addtime,f.modUserId,f.modtime, a.name as a_name from online_form f LEFT JOIN jy_base_account a on f.addUserId = a.id where 1=1 <if test="addUser != null and addUser.name != null and addUser.name != '' "> and a.name=#{addUser.name} </if> </select> <select id="getEntityById" resultMap="onlineform" parameterType="String"> select f.*, a.name as a_name from online_form f LEFT JOIN jy_base_account a on f.addUserId = a.id where f.id=#{id} </select> <insert id="insert" parameterType="OnlineForm"> insert into online_form(id,key,descr,enabled,addUserId,addtime) values(#{id},#{key},#{descr},#{enabled},#{addUserId},sysdate) </insert> <update id="update" parameterType="OnlineForm"> update online_form set key=#{key},descr=#{descr},enabled=#{enabled} ,modUserId=#{modUserId},modtime=sysdate where id=#{id} </update> <update id="design" parameterType="OnlineForm"> update online_form set html=#{html,jdbcType=CLOB} ,modUserId=#{modUserId},modtime=sysdate where id=#{id} </update> <update id="delete" parameterType="OnlineForm"> delete from online_form where id=#{id} </update></mapper>
看到一直有人问UeditorTools这个类。其实挺简单的,我找了下,下面贴出来了。
com.jy.common.utils.UeditorTools
package com.jy.common.utils;public class UeditorTools { /** * 去掉分界符 {|- 和 -|} * @param str * @return */ public static String formatStr(String str){ str = replaceAll(str,"{|-",""); str = replaceAll(str,"-|}",""); return str; } public static String replaceAll(String strAll,String oldStr,String newStr){ return strAll.replaceAll(escapeExprSpecialWord(oldStr), ""); } /** * 转义正则特殊字符 ($()*+.[]?\^{},|) * @param keyword * @return */ public static String escapeExprSpecialWord(String keyword) { if (keyword != null && !keyword.equals("")) { String[] fbsArr = { "\\", "$", "(", ")", "*", "+", ".", "[", "]", "?", "^", "{", "}", "|" }; for (String key : fbsArr) { if (keyword.contains(key)) { keyword = keyword.replace(key, "\\" + key); } } } return keyword; } }
给我老师的人工智能教程打call!http://www.captainbed.net/
你好! 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTeX数学公式 语法;
- 增加了支持甘特图的mermaid语法1 功能;
- 增加了 多屏幕编辑 Markdown文章功能;
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
- 增加了 检查列表 功能。
功能快捷键
撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
合理的创建标题,有助于目录的生成
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
设定内容居中、居左、居右
使用:---------:
居中
使用:----------
居左
使用----------:
居右
第一列 | 第二列 | 第三列 |
---|---|---|
第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
TYPE | ASCII | HTML |
---|---|---|
Single backticks | 'Isn't this fun?' |
‘Isn’t this fun?’ |
Quotes | "Isn't this fun?" |
“Isn’t this fun?” |
Dashes | -- is en-dash, --- is em-dash |
– is en-dash, — is em-dash |
创建一个自定义列表
- Markdown
- Text-to-HTML conversion tool
- Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 是通过欧拉积分
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能,丰富你的文章
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划一 : des3, after des2, 5d
计划二 : des4, after des3, 5d
- 关于 甘特图 语法,参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::
这将产生一个流程图。:
- 关于 Mermaid 语法,参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图:
- 关于 Flowchart流程图 语法,参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
-
注脚的解释 ↩︎