在线web代码编辑器的制作

最新推荐文章于 2024-07-18 20:16:37 发布

blueskynyl

最新推荐文章于 2024-07-18 20:16:37 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签：前端编辑器 web

本文链接：https://blog.csdn.net/qq_33358062/article/details/77763181

版权

前端专栏收录该内容

46 篇文章 2 订阅

订阅专栏

之前一直想做一个oj系统，但oj 系统前端核心就是代码编辑器，只要用户可以选中某一种语言，这种代码编辑器就可以针对影虎输入的代码进行代码高亮的操作，网上搜了一款在线web代码编辑器的插件ace ,推荐几个比较好的网站

1）http://www.cnblogs.com/HansBug/p/6546606.html

2）http://www.jianshu.com/p/7cc4359a97d9

3）官网 https://ace.c9.io/?spm=5176.100239.blogcont65260.13.VpYjw3

4）git地址 https://github.com/ajaxorg/ace?spm=5176.100239.blogcont65260.14.hFdsLx

其实我在网上看到其他代码编辑器，像微软的microsoft Editor 也不错，后续我也会研究一下

以下是我的做的一个小demo,后续也会继续完善这个项目，让她更好看

HTML页面：

     </head>
     <body>
                <div style="margin-left: 10%;">
                        <h4>请选择语言:</h4>
                        <select id="language" style="width: 200px;height: 30px;font-size: 15px" οnchange="change()">
                                <option value="java" >java</option>
                                <option value="c_cpp">c_cpp</option>
                                <option value="javascript">javascript</option>
                        </select>
                </div>
                <br/>
                    <!--代码输入框（注意请务必设置高度，否则无法显示）-->
                <pre id="code" class="ace_editor" style="min-height:400px">
                            <textarea class="ace_text-input">
                  
                            </textarea>
                </pre>
     </body>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/editor.js" type="text/javascript" charset="utf-8"></script>
</html>

js脚本

$(function(){
    init("java");
});

function change(){
    var select = document.getElementById('language');
    init(select.value);
};

function init(language){
    //初始化对象
     editor = ace.edit("code");
     editor.setHighlightActiveLine(true);
     //设置风格和语言（更多风格和语言，请到github上相应目录查看）
     theme = "clouds"
     language=language;
     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
         });
}