Ace editor 線上網頁版的vscode!程式碼編輯器

九霄道長發表於2022-02-15

Ace是一個功能非常強大的編輯器。它實現了語法著色,縮排,程式碼提示功能。且具有大量的主題,支援大量語言。

20210422154446.png

20210422154446.png

官網地址:ace.c9.io/
Github: github.com/ajaxorg/ace/
vue版:github.com/chairuosen/vue2-ace-edi...
中文文件:www.jianshu.com/p/8a4a5e273538


    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" 
            type="text/javascript" charset="utf-8"></script>
           <pre id="code" class="ace_editor" style="min-height:400px">
                    <textarea class="ace_text-input"></textarea>
                </pre>

<script>
    //初始化物件
    editor = ace.edit("code");

    //設定風格和語言(更多風格和語言,請到github上相應目錄檢視)
    theme = "monokai"
    language = "java"
    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/mode/java");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
</script>
本作品採用《CC 協議》,轉載必須註明作者和本文連結
保持愉悅

相關文章