lsm/OpenAuth.Net
1
0
Fork 0
mirror of https://gitee.com/dotnetchina/OpenAuth.Net.git synced 2025-07-18 13:26:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

form编辑

Browse Source
This commit is contained in:
yubaolee 2018-03-06 17:21:05 +08:00
parent 54fb980b07
commit 3c9a526df3
3 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
OpenAuth.Mvc/Views/Forms/Preview.cshtml
View File

@ -8,10 +8,13 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link href="/js/ueditor/formdesign/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<title>Preview</title> <title>Preview</title>
</head> </head>
<body> <body>
<div id="content"></div> <div class="container" style="width: 750px">
<div id="content"></div>
</div>
</body> </body>
</html> </html>

13
OpenAuth.Mvc/Views/Forms/index.cshtml
View File

@ -79,6 +79,12 @@
</div> </div>
<div class="layui-tab-item"> <div class="layui-tab-item">
<div class="layui-row">
<blockquote class="layui-elem-quote">
提醒：单选框和复选框，如：{|-选项-|}两边边界是防止误删除控件，程序会把它们替换为空，请不要手动删除！
</blockquote>
</div>
<div class="layui-row">
<div class="layui-col-xs3"> <div class="layui-col-xs3">
<ul class="layui-nav" style="margin-right: 5px;"> <ul class="layui-nav" style="margin-right: 5px;">
<li class="layui-nav-item" style="line-height: 40px"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');">文本框</a></li> <li class="layui-nav-item" style="line-height: 40px"><a href="javascript:void(0);" onclick="leipiFormDesign.exec('text');">文本框</a></li>
@ -93,13 +99,14 @@
</ul> </ul>
</div> </div>
<div class="layui-col-xs9"> <div class="layui-col-xs9">
<script id="myFormDesign" type="text/plain" style="width:100%;"> <script id="myFormDesign" type="text/plain" style="width: 100%;">
</script> </script>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="layui-row"> <div class="layui-row">
<div class="layui-input-block"> <div class="layui-input-block">
@ -107,7 +114,7 @@
<button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js?2023"></script> <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.config.js?2023"></script>
<script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.js?2023"> </script> <script type="text/javascript" charset="utf-8" src="/js/ueditor/ueditor.all.js?2023"> </script>
@ -115,6 +122,6 @@
<script type="text/javascript" charset="utf-8" src="/js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script> <script type="text/javascript" charset="utf-8" src="/js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
<script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/userJs/forms.js"></script> <script type="text/javascript" src="/userJs/forms.js?v4"></script>

33
OpenAuth.Mvc/userJs/forms.js
View File

@ -15,7 +15,7 @@
}); });
//表单设计器 //表单设计器
var leipiEditor = UE.getEditor('myFormDesign', { var ue = UE.getEditor('myFormDesign', {
//allowDivTransToP: false,//阻止转换div 为p //allowDivTransToP: false,//阻止转换div 为p
toolleipi: true,//是否显示，设计器的 toolbars toolleipi: true,//是否显示，设计器的 toolbars
textarea: 'design_content', textarea: 'design_content',
@ -31,22 +31,20 @@
, '|', 'link', 'unlink' , '|', 'link', 'unlink'
, '|', 'horizontal', 'spechars', 'wordimage' , '|', 'horizontal', 'spechars', 'wordimage'
, '|', 'inserttable', 'deletetable', 'mergecells', 'splittocells']], , '|', 'inserttable', 'deletetable', 'mergecells', 'splittocells']],
//focus时自动清空初始化时的内容
//autoClearinitialContent:true,
//关闭字数统计 //关闭字数统计
wordCount: false, wordCount: false,
//关闭elementPath //关闭elementPath
elementPathEnabled: false, elementPathEnabled: false,
//默认的编辑区域高度 //默认的编辑区域高度
initialFrameHeight: 300 initialFrameHeight: 300
///,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你网站css , iframeCssUrl: "/js/ueditor/formdesign/bootstrap/css/bootstrap.min.css" //引入自身 css使编辑器兼容你网站css
//更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项
}); });
leipiFormDesign = { leipiFormDesign = {
/*执行控件*/ /*执行控件*/
exec: function (method) { exec: function (method) {
leipiEditor.execCommand(method); ue.execCommand(method);
}, },
/* /*
Javascript 解析表单 Javascript 解析表单
@ -212,11 +210,11 @@
}, },
/*type = save 保存设计 versions 保存版本 close关闭 */ /*type = save 保存设计 versions 保存版本 close关闭 */
fnCheckForm: function (type) { fnCheckForm: function (type) {
if (leipiEditor.queryCommandState('source')) if (ue.queryCommandState('source'))
leipiEditor.execCommand('source');//切换到编辑模式才提交，否则有bug ue.execCommand('source');//切换到编辑模式才提交，否则有bug
if (leipiEditor.hasContents()) { if (ue.hasContents()) {
leipiEditor.sync();/*同步内容*/ ue.sync();/*同步内容*/
return false; return false;
@ -228,16 +226,16 @@
}, },
/*预览表单*/ /*预览表单*/
fnReview: function () { fnReview: function () {
if (leipiEditor.queryCommandState('source')) if (ue.queryCommandState('source'))
leipiEditor.execCommand('source');/*切换到编辑模式才提交，否则部分浏览器有bug*/ ue.execCommand('source');/*切换到编辑模式才提交，否则部分浏览器有bug*/
if (leipiEditor.hasContents()) { if (ue.hasContents()) {
leipiEditor.sync(); /*同步内容*/ ue.sync(); /*同步内容*/
//--------------以下仅参考------------------------------------------------------------------- //--------------以下仅参考-------------------------------------------------------------------
/*设计form的target 然后提交至一个新的窗口进行预览*/ /*设计form的target 然后提交至一个新的窗口进行预览*/
var fields = $("#Fields").val(), formeditor = ''; var fields = $("#Fields").val(), formeditor = '';
//获取表单设计器里的内容 //获取表单设计器里的内容
formeditor = leipiEditor.getContent(); formeditor = ue.getContent();
//解析表单设计器控件 //解析表单设计器控件
var parse_form = this.parse_form(formeditor, fields); var parse_form = this.parse_form(formeditor, fields);
@ -322,6 +320,11 @@
content: $('#divEdit'), content: $('#divEdit'),
success: function() { success: function() {
vm.$set('$data', data); vm.$set('$data', data);
//玄学：加个延迟ueditor才能正常
setTimeout(function() {
ue.setContent(data.Content);
},500);
}, },
end: mainList end: mainList
}); });
@ -336,7 +339,7 @@
//解析表单数据 //解析表单数据
var fields = $("#Fields").val(), formeditor = ''; var fields = $("#Fields").val(), formeditor = '';
//获取表单设计器里的内容 //获取表单设计器里的内容
formeditor = leipiEditor.getContent(); formeditor = ue.getContent();
//解析表单设计器控件 //解析表单设计器控件
var parseForm = leipiFormDesign.parse_form(formeditor, fields); var parseForm = leipiFormDesign.parse_form(formeditor, fields);
//alert(parse_form);\ //alert(parse_form);\