提交 6d0ba7d2 编写于 作者: Skyeye云's avatar Skyeye云

添加代码编辑器

上级 3f3043e0
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -877,3 +879,6 @@ CodeMirror.defineMode("clike", function(config, parserConfig) {
});
});
})(jQuery);
exports('clike', null);
});
\ No newline at end of file
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -829,4 +831,6 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
helperType: "gss"
});
});})(jQuery);
exports('css', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript"), require("../css/css"));
......@@ -149,4 +151,7 @@
}, "xml", "javascript", "css");
CodeMirror.defineMIME("text/html", "htmlmixed");
});
})(jQuery);
exports('htmlmixed', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -896,4 +898,6 @@ CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true})
CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
});})(jQuery);
exports('javascript', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -175,4 +177,6 @@ CodeMirror.defineMode("nginx", function(config) {
CodeMirror.defineMIME("text/x-nginx-conf", "nginx");
});})(jQuery);
exports('nginx', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -101,4 +103,6 @@ CodeMirror.defineMode("solr", function() {
CodeMirror.defineMIME("text/x-solr", "solr");
});})(jQuery);
exports('solr', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -467,6 +469,9 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
});
}());
});
})(jQuery);
exports('sql', null);
});
/*
......
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function (mod) {
"use strict";
if (typeof exports === "object" && typeof module === "object") {// CommonJS
......@@ -74,4 +76,6 @@
CodeMirror.defineMIME("script/x-vue", "vue");
CodeMirror.defineMIME("text/x-vue", "vue");
});})(jQuery);
exports('vue', null);
});
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
layui.define(["jquery"], function(exports) {
var jQuery = layui.jquery;
(function($) {
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
......@@ -399,4 +401,7 @@ CodeMirror.defineMIME("application/xml", "xml");
if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
});
})(jQuery);
exports('xml', null);
});
......@@ -2693,6 +2693,7 @@ body .layer-ext-winconfirm {
/*** 小程序页面管理end ***/
/*** 代码生成器样式start ***/
.cm-s-eclipse{height: 100% !important;}
.cm-s-eclipse span.cm-meta { color: #FF1717; }
.cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
.cm-s-eclipse span.cm-atom { color: #219; }
......
......@@ -24,29 +24,87 @@ layui.config({
});
form.render();
form.on('select', function(data){
form.on('select(selectParent)', function(data){
var lang = $("#modelType").val();
var mode = '';
switch (lang) {
case 'Java':
mode = 'text/x-java';
break;
case 'C/C++':
mode = 'text/x-c++src';
break;
case 'Objective-C':
mode = '';
break;
case 'Scala':
mode = 'text/x-scala';
break;
case 'Kotlin':
mode = 'text/x-kotlin';
break;
case 'Ceylon':
mode = 'text/x-ceylon';
break;
case 'xml':
mode = 'xml';
break;
case 'html':
mode = 'xml';
break;
case 'css':
mode = 'text/css';
break;
case 'htmlmixed':
mode = 'htmlmixed';
break;
case 'htmlhh':
mode = 'htmlmixed';
break;
case 'javascript':
mode = 'text/javascript';
break;
case 'nginx':
mode = 'text/x-nginx-conf';
break;
case 'solr':
mode = 'text/x-solr';
break;
case 'sql':
mode = 'text/x-sql';
break;
case 'vue':
mode = 'text/x-vue';
break;
}
if (!isNull(mode.length)) {
editor.setOption('mode', mode)
}
});
form.on('submit(formAddBean)', function (data) {
//表单验证
if (winui.verifyForm(data.elem)) {
var params = {
modelName: $("#modelName").val(),
modelContent: encodeURI($("#modelContent").val()),
modelText: encodeURI($("#modelContent").val()),
modelType: $("#modelType").val(),
groupId: parent.groupId,
};
AjaxPostUtil.request({url:reqBasePath + "codemodel007", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){
parent.layer.close(index);
parent.refreshCode = '0';
}else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
}
}});
if(isNull(editor.getValue())){
top.winui.window.msg('请输入模板内容', {icon: 2,time: 2000});
}else{
var params = {
modelName: $("#modelName").val(),
modelContent: encodeURI(editor.getValue()),
modelText: encodeURI(editor.getValue()),
modelType: $("#modelType").val(),
groupId: parent.groupId,
};
AjaxPostUtil.request({url:reqBasePath + "codemodel007", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){
parent.layer.close(index);
parent.refreshCode = '0';
}else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
}
}});
}
}
return false;
});
......
......@@ -4,10 +4,12 @@ layui.config({
version: skyeyeVersion
}).define(['table', 'jquery', 'winui'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
layui.use(['form', 'codemirror', 'xml', 'clike', 'css', 'htmlmixed', 'javascript', 'nginx',
'solr', 'sql', 'vue'], function (form) {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var $ = layui.$,
form = layui.form;
var editor;
showGrid({
id: "showForm",
......@@ -19,33 +21,113 @@ layui.config({
},
ajaxSendAfter:function(json){
editor = CodeMirror.fromTextArea(document.getElementById("modelContent"), {
mode : returnModel(json.bean.modelType), // 模式
theme : "eclipse", // CSS样式选择
indentUnit : 2, // 缩进单位,默认2
smartIndent : true, // 是否智能缩进
tabSize : 4, // Tab缩进,默认4
readOnly : false, // 是否只读,默认false
showCursorWhenSelecting : true,
lineNumbers : true, // 是否显示行号
styleActiveLine: true, //line选择是是否加亮
matchBrackets: true,
});
$("#modelType").val(json.bean.modelType);
form.render();
form.on('select(selectParent)', function(data){
var mode = returnModel($("#modelType").val());
if (!isNull(mode.length)) {
editor.setOption('mode', mode)
}
});
form.on('submit(formEditBean)', function (data) {
//表单验证
if (winui.verifyForm(data.elem)) {
var params = {
modelName: $("#modelName").val(),
modelContent: encodeURI($("#modelContent").val()),
modelText: encodeURI($("#modelContent").val()),
groupId: parent.groupId,
rowId: parent.rowId
};
AjaxPostUtil.request({url:reqBasePath + "codemodel010", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){
parent.layer.close(index);
parent.refreshCode = '0';
}else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
}
}});
if(isNull(editor.getValue())){
top.winui.window.msg('请输入模板内容', {icon: 2,time: 2000});
}else{
var params = {
modelName: $("#modelName").val(),
modelContent: encodeURI(editor.getValue()),
modelText: encodeURI(editor.getValue()),
groupId: parent.groupId,
rowId: parent.rowId
};
AjaxPostUtil.request({url:reqBasePath + "codemodel010", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){
parent.layer.close(index);
parent.refreshCode = '0';
}else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
}
}});
}
}
return false;
});
}
});
function returnModel(lang){
var mode = '';
switch (lang) {
case 'Java':
mode = 'text/x-java';
break;
case 'C/C++':
mode = 'text/x-c++src';
break;
case 'Objective-C':
mode = '';
break;
case 'Scala':
mode = 'text/x-scala';
break;
case 'Kotlin':
mode = 'text/x-kotlin';
break;
case 'Ceylon':
mode = 'text/x-ceylon';
break;
case 'xml':
mode = 'xml';
break;
case 'html':
mode = 'xml';
break;
case 'css':
mode = 'text/css';
break;
case 'htmlmixed':
mode = 'htmlmixed';
break;
case 'htmlhh':
mode = 'htmlmixed';
break;
case 'javascript':
mode = 'text/javascript';
break;
case 'nginx':
mode = 'text/x-nginx-conf';
break;
case 'solr':
mode = 'text/x-solr';
break;
case 'sql':
mode = 'text/x-sql';
break;
case 'vue':
mode = 'text/x-vue';
break;
}
return mode;
}
//取消
$("body").on("click", "#cancle", function(){
......
......@@ -3,7 +3,8 @@ var groupId = "";
layui.config({
base: basePath,
version: skyeyeVersion
}).define(['table', 'jquery', 'winui', 'form'], function (exports) {
}).define(['table', 'jquery', 'winui', 'form', 'codemirror', 'xml', 'clike', 'css', 'htmlmixed', 'javascript', 'nginx',
'solr', 'sql', 'vue'], function (exports) {
winui.renderColor();
//模板分组ID
......@@ -25,12 +26,28 @@ layui.config({
cols: [[
{ title: '序号', type: 'numbers'},
{ field: 'modelName', title: '模板别名', width: 120 },
{ field: 'modelContent', title: '模板内容', width: 120 },
{ field: 'modelType', title: '模板类型', width: 120 },
{ field: 'id', title: '模板内容', width: 120, templet: function(d){
return '<i class="fa fa-fw fa-html5 cursor" lay-event="modelContent"></i>';
}},
{ field: 'createTime', title: '创建时间', width: 180 },
{ title: '操作', fixed: 'right', align: 'center', width: 240, toolbar: '#tableBar'}
]]
});
var editor = CodeMirror.fromTextArea(document.getElementById("modelContent"), {
mode : "text/x-java", // 模式
theme : "eclipse", // CSS样式选择
indentUnit : 2, // 缩进单位,默认2
smartIndent : true, // 是否智能缩进
tabSize : 4, // Tab缩进,默认4
readOnly : false, // 是否只读,默认false
showCursorWhenSelecting : true,
lineNumbers : true, // 是否显示行号
styleActiveLine: true, //line选择是是否加亮
matchBrackets: true,
});
table.on('tool(messageTable)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
......@@ -38,6 +55,20 @@ layui.config({
del(data, obj);
}else if (layEvent === 'edit') { //编辑
edit(data);
}else if (layEvent === 'modelContent') { //查看代码内容
var mode = returnModel(data.modelType);
if (!isNull(mode.length)) {
editor.setOption('mode', mode)
}
editor.setValue(data.modelContent);
layer.open({
id: '模板内容',
type: 1,
title: '模板内容',
shade: 0.3,
area: ['1200px', '600px'],
content: $("#modelContentDiv").html(),
});
}
});
......@@ -106,6 +137,61 @@ layui.config({
}});
});
function returnModel(lang){
var mode = '';
switch (lang) {
case 'Java':
mode = 'text/x-java';
break;
case 'C/C++':
mode = 'text/x-c++src';
break;
case 'Objective-C':
mode = '';
break;
case 'Scala':
mode = 'text/x-scala';
break;
case 'Kotlin':
mode = 'text/x-kotlin';
break;
case 'Ceylon':
mode = 'text/x-ceylon';
break;
case 'xml':
mode = 'xml';
break;
case 'html':
mode = 'xml';
break;
case 'css':
mode = 'text/css';
break;
case 'htmlmixed':
mode = 'htmlmixed';
break;
case 'htmlhh':
mode = 'htmlmixed';
break;
case 'javascript':
mode = 'text/javascript';
break;
case 'nginx':
mode = 'text/x-nginx-conf';
break;
case 'solr':
mode = 'text/x-solr';
break;
case 'sql':
mode = 'text/x-sql';
break;
case 'vue':
mode = 'text/x-vue';
break;
}
return mode;
}
function loadTable(){
table.reload("messageTable", {where:{groupName:$("#groupName").val(), groupNum:$("#groupNum").val()}});
}
......
......@@ -20,14 +20,13 @@
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板内容<i class="red">*</i></label>
<label class="layui-form-label">模板类型<i class="red">*</i></label>
<div class="layui-input-block">
<select id="modelType" name="modelType" class="layui-input" win-verify="required">
<select id="modelType" name="modelType" class="layui-input" win-verify="required" lay-filter="selectParent">
<option value=""></option>
<optgroup label="CLIKE">
<option value="Java">Java</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Java" selected="selected">Java</option>
<option value="C/C++">C++</option>
<option value="Objective-C">Objective-C</option>
<option value="Scala">Scala</option>
<option value="Kotlin">Kotlin</option>
......@@ -42,7 +41,7 @@
</optgroup>
<optgroup label="HTMLMIXED">
<option value="htmlmixed">htmlmixed</option>
<option value="html混合模式">html混合模式</option>
<option value="htmlhh">html混合模式</option>
</optgroup>
<optgroup label="JAVASCRIPT">
<option value="javascript">javascript</option>
......
......@@ -6,6 +6,7 @@
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
</head>
......
......@@ -5,10 +5,52 @@
<input type="text" id="modelName" name="modelName" win-verify="required" placeholder="请输入模板别名" class="layui-input" maxlength="20" value="{{modelName}}"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板类型<i class="red">*</i></label>
<div class="layui-input-block">
<select id="modelType" name="modelType" class="layui-input" win-verify="required" lay-filter="selectParent">
<option value=""></option>
<optgroup label="CLIKE">
<option value="Java" selected="selected">Java</option>
<option value="C/C++">C++</option>
<option value="Objective-C">Objective-C</option>
<option value="Scala">Scala</option>
<option value="Kotlin">Kotlin</option>
<option value="Ceylon">Ceylon</option>
</optgroup>
<optgroup label="XML">
<option value="xml">xml</option>
<option value="html">html</option>
</optgroup>
<optgroup label="CSS">
<option value="css">css</option>
</optgroup>
<optgroup label="HTMLMIXED">
<option value="htmlmixed">htmlmixed</option>
<option value="htmlhh">html混合模式</option>
</optgroup>
<optgroup label="JAVASCRIPT">
<option value="javascript">javascript</option>
</optgroup>
<optgroup label="NGINX">
<option value="nginx">nginx</option>
</optgroup>
<optgroup label="SOLR">
<option value="solr">solr</option>
</optgroup>
<optgroup label="SQL">
<option value="sql">sql</option>
</optgroup>
<optgroup label="VUE">
<option value="vue">vue</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板内容<i class="red">*</i></label>
<div class="layui-input-block">
<textarea id="modelContent" name="modelContent" class="layui-input">{{modelContent}}</textarea>
<textarea id="modelContent">{{modelContent}}</textarea>
</div>
</div>
<div class="layui-form-item">
......
......@@ -6,6 +6,7 @@
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
</head>
<body>
<div class="winui-toolbar">
......@@ -14,6 +15,11 @@
<button id="addBean" class="winui-toolbtn"><i class="fa fa-plus" aria-hidden="true"></i>新增模板</button>
</div>
</div>
<div id="modelContentDiv" style="height:auto; position: fixed; left: 10000px;">
<textarea id="modelContent"></textarea>
</div>
<div style="margin:auto 10px;">
<table id="messageTable" lay-filter="messageTable"></table>
<script type="text/html" id="tableBar">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册