谢谢你帮我详细写个openwrt一个标准的luci-app-note。在代码中添加中文的含义。可以在页面设置脚本数量，存放路径，脚本以taboption方式排列。luci-app-note的配置文件在/etc/config/luci文件中添加。CodeMirrors要求用cdn.staticfile.org库去支持代码高亮和折叠，在页面上设置主题更换，显示高度，宽度，只读选择。自动识别mode，并且能开关CodeMirrors。并且每个脚本都可以单独运行还能在页面上显示运行结果。要求完整代码。
很高兴能为您写一个OpenWrt的标准的luci-app-note，以下是完整的代码：
文件路径：/usr/lib/lua/luci/controller/note.lua
module("luci.controller.note", package.seeall)
function index()
entry({"admin", "services", "note"}, cbi("note"), _("Note"), 85)
end
文件路径：/usr/lib/lua/luci/model/cbi/note.lua
m = Map("luci", translate("Note"), translate("Configure Note scripts."))
s = m:section(TypedSection, "luci_app_note", translate("Note Scripts"))
s.addremove = true
s.anonymous = true
num = s:option(ListValue, "num", translate("Number of scripts"))
num:range(0, 10)
num.default = 5
path = s:option(Value, "path", translate("Script path"))
path.default = "/root/note"
order = s:option(ListValue, "order", translate("Script order"))
order:value("alphabetical", translate("Alphabetical"))
order:value("numerical", translate("Numerical"))
order.default = "alphabetical"
for i = 1, num.default do
script = s:option(Value, "script" .. i, translate("Script ") .. i)
script.default = "echo Hello world!"
script.rmempty = false
end
theme = s:option(ListValue, "theme", translate("CodeMirror theme"))
theme:value("default", translate("Default"))
theme:value("ambiance", translate("Ambiance"))
theme:value("blackboard", translate("Blackboard"))
theme:value("cobalt", translate("Cobalt"))
theme:value("eclipse", translate("Eclipse"))
theme:value("mdn-like", translate("MDN-like"))
theme:value("midnight", translate("Midnight"))
theme:value("monokai", translate("Monokai"))
theme:value("neat", translate("Neat"))
theme:value("night", translate("Night"))
theme:value("paraiso-dark", translate("Paraiso Dark"))
theme:value("paraiso-light", translate("Paraiso Light"))
theme:value("rubyblue", translate("Rubyblue"))
theme:value("solarized", translate("Solarized"))
theme:value("twilight", translate("Twilight"))
theme:value("vibrant-ink", translate("Vibrant Ink"))
theme:value("xq-dark", translate("XQ Dark"))
theme:value("xq-light", translate("XQ Light"))
theme.default = "default"
height = s:option(Value, "height", translate("CodeMirror height"))
height.default = "500px"
width = s:option(Value, "width", translate("CodeMirror width"))
width.default = "800px"
readonly = s:option(Flag, "readonly", translate("Read-only"))
readonly.default = "0"
readonly.rmempty = false
mode = s:option(Flag, "mode", translate("Auto-detect mode"))
mode.default = "1"
mode.rmempty = false
codemirror = s:option(Flag, "codemirror", translate("Enable CodeMirror"))
codemirror.default = "1"
codemirror.rmempty = false
execute = s:option(Button, "_execute")
execute.title = translate("Execute")
execute.inputstyle = "apply"
execute.write = function()
local cmd = ""
for i = 1, num:formvalue("luci_app_note.num") do
local script = luci.http.formvalue("cbid.luci_app_note.luci_app_note.script" .. i)
if script then
cmd = cmd .. script .. "\n"
end
end
local fp = io.popen(cmd)
local output = fp:read("*all")
fp:close()
luci.http.write(output)
end
return m
文件路径：/usr/lib/lua/luci/view/note.htm
<%+header%>
<script src="//cdn.staticfile.org/codemirror/5.59.2/codemirror.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/mode/meta.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/mode/loadmode.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/edit/matchbrackets.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/edit/closebrackets.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/edit/trailingspace.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/selection/active-line.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/foldcode.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/foldgutter.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/brace-fold.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/xml-fold.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/indent-fold.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/comment-fold.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/addon/fold/foldgutter.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/default.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/ambiance.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/blackboard.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/cobalt.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/eclipse.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/mdn-like.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/midnight.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/monokai.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/neat.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/night.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/paraiso-dark.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/paraiso-light.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/rubyblue.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/solarized.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/twilight.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/vibrant-ink.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/xq-dark.min.css"></script>
<script src="//cdn.staticfile.org/codemirror/5.59.2/theme/xq-light.min.css"></script>
<style>
.CodeMirror {
border: 1px solid #eee;
height: <%=height%>;
width: <%=width%>;
}
.CodeMirror-gutters {
border-right: none;
background-color: #f8f8f8;
}
.CodeMirror-linenumber {
padding: 0 5px 0 0;
}
.CodeMirror-foldgutter {
width: 0.7em;
}
.CodeMirror-focused .CodeMirror-selected {
background-color: #d9edf7 !important;
}
.CodeMirror-selected {
background-color: #f2f2f2 !important;
}
</style>
<%+footer%>
<%+cbi.header%>
<% local s, o, css = ... %>
<form class="cbi-section" method="post" action="<%= luci.dispatcher.build_url('admin/services/note') %>">
<fieldset>
<legend><%= s.title %></legend>
<% if s.description then %>
<p><%= s.description %></p>
<% end %>
<% if s.template then %>
<% tpl.render(s.template, o) %>
<% end %>
<table class="table">
<tbody>
<tr>
<td><label class="cbi-value-title"><%= o.num.title %></label></td>
<td><%= o.num:render("luci_app_note.num") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.path.title %></label></td>
<td><%= o.path:render("luci_app_note.path") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.order.title %></label></td>
<td><%= o.order:render("luci_app_note.order") %></td>
</tr>
<% for i = 1, o.num.default do %>
<tr>
<td><label class="cbi-value-title"><%= o["script"..i].title %></label></td>
<td><%= o["script"..i]:render("cbid.luci_app_note.luci_app_note.script"..i) %></td>
</tr>
<% end %>
<tr>
<td><label class="cbi-value-title"><%= o.theme.title %></label></td>
<td><%= o.theme:render("luci_app_note.theme") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.height.title %></label></td>
<td><%= o.height:render("luci_app_note.height") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.width.title %></label></td>
<td><%= o.width:render("luci_app_note.width") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.readonly.title %></label></td>
<td><%= o.readonly:render("luci_app_note.readonly") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.mode.title %></label></td>
<td><%= o.mode:render("luci_app_note.mode") %></td>
</tr>
<tr>
<td><label class="cbi-value-title"><%= o.codemirror.title %></label></td>
<td><%= o.codemirror:render("luci_app_note.codemirror") %></td>
</tr>
</tbody>
</table>
<br>
<div class="right">
<%= o.execute:render() %>
</div>
</fieldset>
</form>
<%+cbi.footer%>
<%+cbi.js%>
<% local s, o, js = ... %>
<% js = js or {} %>
js = (function ($) {
<% if o.codemirror:formvalue("luci_app_note.codemirror") == "1" then %>
var editor = CodeMirror.fromTextArea($("#cbid\\.luci_app_note\\.luci_app_note\\.script1")[0], {
mode: <%= o.mode:formvalue("luci_app_note.mode") == "1" and "null" or "undefined" %>,
theme: "<%= o.theme:formvalue("luci_app_note.theme") %>",
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
showTrailingSpace: true,
styleActiveLine: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
extraKeys: {
"Ctrl-Space": function(cm) {
var mode = CodeMirror.findModeByName(cm.options.mode);
if (mode && mode.mode) {
cm.setOption("mode", mode.mode);
}
}
}
});
<% for i = 2, o.num.default do %>
CodeMirror.fromTextArea($("#cbid\\.luci_app_note\\.luci_app_note\\.script<%=i%>")[0], {
mode: <%= o.mode:formvalue("luci_app_note.mode") == "1" and "null" or "undefined" %>,
theme: "<%= o.theme:formvalue("luci_app_note.theme") %>",
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
showTrailingSpace: true,
styleActiveLine: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
extraKeys: {
"Ctrl-Space": function(cm) {
var mode = CodeMirror.findModeByName(cm.options.mode);
if (mode && mode.mode) {
cm.setOption("mode", mode.mode);
}
}
}
});
<% end %>
<% end %>
})(jQuery);
<% if o.codemirror:formvalue("luci_app_note.codemirror") == "1" then %>
$(function () {
$("#cbid\\.luci_app_note\\.luci_app_note\\.theme").change(function () {
var theme = $(this).val();
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.setOption("theme", theme);
});
});
$("#cbid\\.luci_app_note\\.luci_app_note\\.height").change(function () {
var height = $(this).val();
$(".CodeMirror").css("height", height);
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.refresh();
});
});
$("#cbid\\.luci_app_note\\.luci_app_note\\.width").change(function () {
var width = $(this).val();
$(".CodeMirror").css("width", width);
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.refresh();
});
});
$("#cbid\\.luci_app_note\\.luci_app_note\\.readonly").change(function () {
var readonly = $(this).is(":checked");
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.setOption("readOnly", readonly);
});
});
$("#cbid\\.luci_app_note\\.luci_app_note\\.mode").change(function () {
var mode = $(this).is(":checked");
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.setOption("mode", mode ? "null" : "undefined");
});
});
$("#cbid\\.luci_app_note\\.luci_app_note\\.codemirror").change(function () {
var codemirror = $(this).is(":checked");
if (codemirror) {
$("#cbid\\.luci_app_note\\.luci_app_note\\.script1").show();
<% for i = 2, o.num.default do %>
$("#cbid\\.luci_app_note\\.luci_app_note\\.script<%=i%>").show();
<% end %>
$(".CodeMirror").each(function () {
var editor = $(this).get(0).CodeMirror;
editor.refresh();
});
} else {
$("#cbid\\.luci_app_note\\.luci_app_note\\.script1").hide();
<% for i = 2, o.num.default do %>
$("#cbid\\.luci_app_note\\.luci_app_note\\.script<%=i%>").hide();
<% end %>
}
});
});
<% end %>
<%+cbi.js%>
原文地址: https://www.cveoy.top/t/topic/ABM 著作权归作者所有。请勿转载和采集!