外层页面点击编辑弹出ACE编辑器。以下是巧妙的动态设置编辑器的高度。
layer.open({
type:2,
title:"<span class='edit-file-title'><i class='fa fa-folder-open text-yellow'></i>.../"+id+"</span>",
shadeClose:false,
shade:0.4,
offset:['55px'],
area:['70%','88%'],
content:'${una}/admin/theme/editor?path='+id,
resize:false,
anim:1,
maxmin:true,
move:false,
success:function(layero,index){
var iframeWindow = window[layero.find('iframe')[0]['name']];
var height = layero.find('iframe')[0]['clientHeight'];
iframeWindow.setTextareaHeight(height-47);
},
full:function(layero){
var iframeWindow = window[layero.find('iframe')[0]['name']];
var height = layero.find('iframe')[0]['clientHeight'];
iframeWindow.setTextareaHeight(height-50);
},
restore:function(layero){
var iframeWindow = window[layero.find('iframe')[0]['name']];
var height = layero.find('iframe')[0]['clientHeight'];
iframeWindow.setTextareaHeight(height-50);
}
});
演示html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ACE 文本编辑器示例</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ace.js"></script>
<script type="text/javascript" src="ext-language_tools.js"></script>
</head>
<body>
<!-- 实际项目中不会手动设置高度，这里为了演示，设置了固定高度 -->
<div id="editor_area" style="height: 500px;"></div>
<span class="pull-left text-danger"><small><i class="fa fa-exclamation-triangle"></i> 修改模板后视图将受影响,请谨慎操作。</small></span>
<button class="btn btn-sm btn-primary" id="save-file"><i class="fa fa-save"></i> 保存</button>
<button class="btn btn-sm btn-default" id="close"><i class="fa fa-times-circle-o"></i> 取消</button>
<script type="text/javascript">
var editor;
$(function(){
ace.require("ace/ext/language_tools");
ace.require("ace/ext/spellcheck");
ace.require("ace/ext/static_highlight");
ace.require("ace/ext/searchbox");
editor = ace.edit("editor_area");
editor.setFontSize(16);
editor.session.setUseWrapMode(true);
editor.setHighlightActiveLine(true);
editor.setTheme("ace/theme/dracula");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
//editor.session.setMode("ace/mode/html");
initLanguage();
// 项目中使用ajax请求内容回显，在这里学习，写死
var content = "<!DOCTYPE html><html><head>ACE入门</head><body><h1>hello huangbaokang</h1></body></html>";
editor.setValue(content);
/* $.ajax({
type:'GET',
url:'${una}/admin/theme/read',
data:{path:"${path}"},
success:function(content){
editor.setValue(content);// 用于编辑回显，设置文本编辑器的内容
},
error:function(){
layer.alert("加载文件失败",{title:'系统提示信息',icon:1});
}
});*/
/*$("#save-file").on("click",function(){
var content = editor.getValue();// 获取编辑器内容方法
var path = "${path}";
var load = layer.load(2,{shade:[0.4,'#f0f0f0f0']});
// 调用ajax保存
$.ajax({
type:'POST',
url:'${una}/admin/theme/write',
cache:false,
contentType:'application/x-www-form-urlencoded;charset=utf-8',
data:{
path:path,
content:content
},
success:function(){
layer.close(load);
layer.alert("文件已保存成功",{title:'系统提示信息',icon:1});
},
error:function(){
layer.close(load);
layer.alert("服务器异常，请联系管理员",{title:'系统提示信息',icon:0});
}
});
});
$("#close").on("click",function(){
var pid =parent.layer.getFrameIndex(window.name);
parent.layer.close(pid);
});*/
});
function setTextareaHeight(height){
alert("aaa");
$("#editor_area").css("height",height+"px");
}
function initLanguage(){
//var path = "${path}";
//项目中根据传参，在这里学习，写死
var path = "themes/default/hbk.html";
var suffixIndex = path.lastIndexOf(".");
var pathLength = path.length;
var suffix = path.substring(suffixIndex,pathLength);
if (suffix === ".js") {
editor.session.setMode("ace/mode/javascript");
}else if(suffix === ".css"){
editor.session.setMode("ace/mode/css");
}else if(suffix === ".html"){
editor.session.setMode("ace/mode/html");
}else if(suffix === ".json"){
editor.session.setMode("ace/mode/json");
}else if(suffix === ".yaml"){
editor.session.setMode("ace/mode/yaml");
}else if(suffix === ".java"){
editor.session.setMode("ace/mode/java");
}else if(suffix === ".md"){
editor.session.setMode("ace/mode/markdown");
}else if(suffix === ".ftl"){
editor.session.setMode("ace/mode/ftl");
}else{
editor.session.setMode("ace/mode/text");
}
}
</script>
</body>
</html>
效果如下：
