ACE编辑器入门_ace在线编辑器如何实现右侧出现缩略图

作者：小小林熬夜学编程 | 2024-04-13 08:29:12

踩

ace在线编辑器如何实现右侧出现缩略图

外层页面点击编辑弹出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);
                        }
                    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

演示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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

效果如下：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/415359