不灭的焱

革命尚未成功,同志仍须努力下载JDK17

作者:php-note.com  发布于:2022-10-05 00:31  分类:HTML/CSS/JS  编辑

ACE Editor 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何 web 页面或 JavaScript 应用程序中。ACE 支持超过 110 种语言语法高亮,并能够处理代码多达 400 万行的大型文档。ACE 开发团队称,ACE 在性能和功能上可以媲美本地代码编辑器(如 Sublime Text、TextMate 和 Vim 等)

1、拷贝所需的JS文件

我是把源码目录 src-min-noconflict 中的文件,拷贝到项目目录中,如:/static/ace-editor/js

2、引用JS文件

在一般情况下,我们需要引入的js库是两个:ace.jsext-language_tools.js

<!DOCTYPE html>
 <html>
     <head>
         <title>Demo of ACE Editor</title>
         <!--导入js库-->
         <script src="/static/ace-editor/js/ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="/static/ace-editor/js/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
     </head>
     
     <body>
         <!--【特别注意】代码输入框,务必设置高度,否则无法显示 -->
         <!--【特别注意】pre标签和textarea标签之间不要有空格或换行,这些元素都会当着编辑器内容的一部分,造成出现“开头多出一些空格字符”的怪现象!!!-->
         <pre id="code" class="ace_editor" style="min-height:400px"><textarea class="ace_text-input">
 #include <cstdio>
 int main(){
     int n,m;
     scanf("%d %d",&n,&m);
     printf("%d",n+m);
     return 0;
 }
         </textarea></pre>
 
         <script>
             //初始化对象
             editor = ace.edit("code");
             
             //设置风格和语言(更多风格和语言,请到github上相应目录查看)
             theme = "clouds"
             language = "c_cpp"
             editor.setTheme("ace/theme/" + theme);
             editor.session.setMode("ace/mode/" + language);
             
             //字体大小
             editor.setFontSize(18);
             
             //设置只读(true时只读,用于展示代码)
             editor.setReadOnly(false); 
             
             //自动换行,设置为off关闭
             editor.setOption("wrap", "free")
             
             //启用提示菜单
             ace.require("ace/ext/language_tools");
             editor.setOptions({
                     enableBasicAutocompletion: true,
                     enableSnippets: true,
                     enableLiveAutocompletion: true
                 });
         </script>
 
     </body>
 </html>

效果图(纯本机测试,Notepad++ + Firefox):

3、基本用法

去除中间的竖线:

editor.renderer.setShowGutter(false);

去除行号:

editor.setShowPrintMargin(false);

设置并获取内容:

editor.setValue("the new text here");
editor.session.setValue("the new text here"); // set value and reset undo history
editor.getValue(); // or session.getValue

设置主题:

editor.setTheme("ace/theme/xcode");

设置语言模式:

editor.session.setMode("ace/mode/sql");

启用提示菜单: 

ace.require("ace/ext/language_tools");

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

撤销:

editor.undo();

重做回退:

editor.redo();

光标跳转到指定行:

editor.gotoLine();

查找替换:

editor.execCommand('replace');

自动换行:

editor.setOption("wrap", "free"); //关闭时free换成off

 

 

参考:

  1. ACE Editor在线代码编辑器简介及使用引导
  2. Ace editor中文文档
  3. ACE编辑器ace-editor笔记

 


工作项目中的一次应用

模板文件:aceEditor.html

<textarea id="hid_${inputId!}" name="${inputName!}" class="hidden">${defaultValue!}</textarea>
<!--【特别注意】代码输入框,务必设置高度,否则无法显示 -->
<!--【特别注意】pre标签和textarea标签之间不要有空格或换行,这些元素都会当着编辑器内容的一部分,造成出现“开头多出一些空格字符”的怪现象!!!-->
<pre id="${inputId!}" class="ace_editor ${cssClass!}" style="min-height:${height!}"><textarea class="ace_text-input">${defaultValue!}</textarea></pre>
<script>
    $(function() {
        // ACE-Editor代码编辑器
        ace.require("ace/ext/language_tools");
        let ${inputId!} = ace.edit("${inputId!}");
        ${inputId!}.setTheme("ace/theme/${theme!}");
        ${inputId!}.session.setMode("ace/mode/${language}");
        ${inputId!}.setOptions({
            enableBasicAutocompletion : true,
            enableSnippets : true,
            enableLiveAutocompletion : true
        });
        
        // 通过change事件,捕获编辑器的最新内容
        ${inputId!}.getSession().on('change', function(e) {
            $('#hid_${inputId!}').val(${inputId!}.getValue());
        });
    });
</script>