Ace编辑器预览后台文本文件

  1 var editor;
  2 var class_name_len = 3;
  3 var ace_html = "    <div class='ace-body'> " + "<div class='ace-bg'></div>" + "<div class='ace-content'>" + "<div class='ace-tittle' onclick='remove_ace()'><h6>文本预览</h6></div>" + "<div id='editor'>文件加载失败啦!!!</div>" + "<a href='#' id='ace-close' onclick='remove_ace()'></a>" + "</div>"
  4 
  5 /**
  6  * 获取url信息
  7  * https://blog.csdn.net/a4561614/article/details/84400178
  8  */
  9 function parseURL(url) {
 10     var a = document.createElement('a');
 11     a.href = url;
 12     return {
 13         source: url,
 14         protocol: a.protocol.replace(':', ''),
 15         host: a.hostname,
 16         port: a.port,
 17         query: a.search,
 18         params: (function() {
 19             var ret = {},
 20             seg = a.search.replace(/^\?/, '').split('&'),
 21             len = seg.length,
 22             i = 0,
 23             s;
 24             for (; i < len; i++) {
 25                 if (!seg[i]) {
 26                     continue;
 27                 }
 28                 s = seg[i].split('=');
 29                 ret[s[0]] = s[1];
 30             }
 31             return ret;
 32         })(),
 33         file: (a.pathname.match(/([^/ ? #] + ) $ / i) || [, ''])[1],
 34         hash: a.hash.replace('#', ''),
 35         path: a.pathname.replace(/^([^/]) / ,
 36         '/$1'), relative: (a.href.match(/tps?:\/[^/] + (. + ) / ) || [, ''])[1], segments: a.pathname.replace(/^\//, '').split('/')
 37     };
 38 }
 39 
 40 function getSuffix(name) {
 41     var su = name.split(".")[name.split(".").length - 1];
 42     return su.length > 0 ? '.' + su: su;
 43 }
 44 
 45 /**
 46  * 编辑器初始化
 47  */
 48 function editor_init() {
 49     editor = ace.edit('editor') editor.setTheme('ace/theme/twilight');
 50     //this.editor.setReadOnly(true);
 51     let jsMode = ace.require('ace/mode/c_cpp').Mode;
 52     editor.session.setMode(new jsMode());
 53 }
 54 
 55 /**
 56  * 替换单个字符串
 57  * str0: 待替换的字符串
 58  * str1: 替换的字符串
 59  */
 60 function replace_single(str0, str1) {
 61     editor.find(str0);
 62     editor.replace(str1);
 63 }
 64 
 65 /**
 66  * 设置编辑器文本内容
 67  */
 68 function set_value(val) {
 69     editor.setValue(val);
 70 }
 71 
 72 /**
 73  * 移除标签
 74  */
 75 function remove_ace() {
 76     $('.ace-body').fadeOut('slow',
 77     function() {
 78         $(this).remove();
 79     });
 80 }
 81 
 82 $(document).ready(function() {
 83 
 84     $('.ace-show').click('on',
 85     function(e) {
 86         var _url = $(this).attr('href');
 87         var url_data = {
 88             'url': _url
 89         };
 90 
 91         //alert(getSuffix(parseURL(_url).file));
 92         var cn_len = $(this).attr('class').trim().split(" ").length;
 93         var sf_len = getSuffix(parseURL(_url).file).length;
 94 
 95         if (cn_len < class_name_len && sf_len > 0) {
 96             e.preventDefault();
 97 
 98             $('body').append(ace_html);
 99             editor_init();
100 
101             $('.ace-body').fadeIn('slow');
102             set_value("文件加载中...");
103 
104             $.ajax({
105                 url: 'test/test.php',
106                 data: JSON.stringify(url_data),
107                 type: 'post',
108                 dataType: 'json',
109                 success: function(data) {
110                     if (data.result == 0) {
111                         set_value(data.code);
112                     } else {
113                         set_value("文件加载失败啦!!!");
114                     }
115                     editor.moveCursorTo(0, 0);
116                 },
117                 error: function(err) {
118                     set_value(err);
119                 }
120             });
121         }
122 
123     })
124 
125 });

资源下载：

链接：https://pan.baidu.com/s/1Suk4HhHN5Zb5P3FW1XkugQ
提取码：rj5s