ACE编辑器入门

系统管理员 2023-07-20 12:08 51阅读 0赞

外层页面点击编辑弹出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>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230528/b3866de0c0e94d028ec589bd037e3d7a.png