Ace 在HTML中使用方法 

<!DOCTYPE html>
<html>
    <head>
        <title>Demo of ACE Editor</title>
        <!--导入js库-->
        <script src="./ace.js"></script>
        <script src="./ext-language_tools.js"></script>
    </head>

    <body>
        <!--代码输入框（注意请务必设置高度，否则无法显示）-->
        <pre id="code" class="ace_editor" style="min-height:400px">
            <textarea class="ace_text-input">
#include
                int main(){
                    int n,m;
                    scanf("%d %d",&n,&m);
                    printf("%d",n+m);
                    return 0;
                }
            </textarea>
        </pre>

        <script>
            //初始化对象
            var editor = ace.edit("code");

            //设置风格和语言（更多风格和语言，请到github上相应目录查看）
            var theme = "clouds"
            var language = "javascript"
            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>

 

posted @ 2017-08-29 14:39  Booo  阅读(1951)  评论(0)  编辑  收藏  举报