aceEditor代码编辑使用

前端页面中使用代码编辑器

Ace是一个功能非常强大的编辑器。它实现了语法着色,缩进,代码提示功能。且具有大量的主题,支持大量语言。

示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/ace/1.4.6/ace.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.4.6/ext-beautify.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.4.6/ext-language_tools.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.4.6/mode-javascript.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.4.6/theme-xcode.js"></script>
</head>
<body>
<div class="convertImage">
    <!--代码输入框(注意请务必设置高度,否则无法显示)-->
    <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");

        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");
        editor.setFontSize(16); //字体大小
        document.getElementById("code").style.lineHeight="30px";//设置行高;
        editor.setReadOnly(false);//设置只读(true时只读,用于展示代码)
        //自动换行,设置为off关闭
        editor.setOption("wrap", "free");
        //启用提示菜单
        ace.require("ace/ext/language_tools");
        //以下部分是设置输入代码提示的
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setHighlightActiveLine(true); //代码高亮
        editor.setShowPrintMargin(false);
        //editor.setTheme(&#39;ace/theme/solarized_dark&#39;); //引入模板
        editor.getSession().setUseWorker(false);
        editor.getSession().setUseWrapMode(true); //支持代码折叠
        //editor.getSession().setMode(&#39;ace/mode/javascript&#39;); //设置语言模式
        editor.selection.getCursor(); //获取光标所在行或列
        //editor.gotoLine(lineNumber); //跳转到行
        editor.session.getLength(); //获取总行数
        // editor.insert("Something cool");
        editor.getSession().setUseSoftTabs(true);
    </script>
</div>
</body>
</html>

下载

boot cnd地址
github

推荐阅读更多精彩内容