ace 在线代码编辑器的使用

其他 2020-07-31 10:32:19 阅读次数: 0

在一些OJ项目中，常常需要用到编辑器插件。 在Github上找到了这款功能强大的编辑器插件。

简介

这是一款开源的前端代码编辑器

github地址：ace

Ace是用JavaScript编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器，以匹配并扩展现有本机编辑器（如TextMate，Vim或Eclipse）的功能，可用性和性能。它可以轻松地嵌入任何网页或JavaScript应用程序中。

特性

  • 超过120种语言的语法高亮显示（可以导入TextMate / Sublime / .tmlanguage文件）
  • 超过20个主题（可以导入TextMate / Sublime / .tmtheme文件）
  • 自动缩进和缩进
  • 可选命令行
  • 处理大文件（最后检查，上限为4,000,000行）
  • 完全可定制的按键绑定，包括vim和Emacs模式
  • 搜索并替换为正则表达式
  • 突出显示匹配的括号
  • 在软标签和真实标签之间切换
  • 显示隐藏的字符
  • 使用鼠标拖放文本
  • 换行
  • 代码折叠
  • 多个光标和选择
  • 实时语法检查器（当前为JavaScript / CoffeeScript / CSS / XQuery）
  • 剪切，复制和粘贴功能

使用

  1. 引入js库文件。这里使用CND资源，也可以到GitHub下载js文件，然后导入项目中。

    <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>x

  2. 需要一个容器，用做代码编辑区域,并给容器设置一个i。一定要给容器设置一个高度

     <pre id="code" style="min-height:400px;"></pre>

  3. 生成editor对象， 并设置相应属性

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

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

    常用方法

     // editor 是一个对象


// 获取编辑器输入的内容
var code=editor.getValue();

//给编辑器设置文本
editor.setValue();

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editor</title>
    <script src="../../static/js/jquery-3.4.1.min.js"></script>
</head>
<body>


<div style="width: 80em;border-color: black;">
    <pre id="code" style="min-height:400px;"></pre>
</div>


<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>
<script>

    $('.language').change(function () {
        editor.session.setMode("ace/mode/" + $(this).val());
    });

    $('.theme').change(function () {
        editor.setTheme("ace/theme/" + $(this).val());
    });
    //初始化对象
    editor = ace.edit("code");

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HS94BB62-1590672431947)(ace 前端代码编辑器的使用/1.png)]

  1. 设置语言和代码风格

    ace支持多少语言的代码还有多种风格，这里列举几种常用的语言和所有代码风格。

        <!--常用的几种语言以及对应的值，需要更多的请到GitHub查看源码-->
	<select class="language">
        <option value="c_cpp" selected>c</option>
        <option value="c_cpp">c++</option>
        <option value="java">java</option>
        <option value="python">python</option>
    </select>
    <select class="theme">
        <option value="xcode">xcode</option>
        <option value="clouds">clouds</option>
        <option value="clouds_midnight">clouds_midnight</option>
        <option value="cobalt">cobalt</option>
        <option value="dawn">dawn</option>
        <option value="idle_fingers">idle_fingers</option>
        <option value="kr_theme">kr_theme</option>
        <option value="merbivore">merbivore</option>
        <option value="merbivore_soft">merbivore_soft</option>
        <option value="mono_industrial">mono_industrial</option>
        <option value="monokai">monokai</option>
        <option value="nord_dark">nord_dark</option>
        <option value="pastel_on_dark">pastel_on_dark</option>
        <option value="solarized_dark">solarized_dark</option>
        <option value="solarized_light">solarized_light</option>
        <option value="katzenmilch">katzenmilch</option>
        <option value="kuroir">kuroir</option>
        <option value="tomorrow">tomorrow</option>
        <option value="tomorrow_night">tomorrow_night</option>
        <option value="tomorrow_night_blue">tomorrow_night_blue</option>
        <option value="tomorrow_night_bright">tomorrow_night_bright</option>
        <option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
        <option value="twilight">twilight</option>
        <option value="vibrant_ink">vibrant_ink</option>
    </select>

    添加语言设置后的源码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editor</title>
    <script src="../../static/js/jquery-3.4.1.min.js"></script>
</head>
<body>


<div style="width: 80em;border-color: black;">
    <!--                    <span style="font-weight: 800">Language: &ensp;</span>-->
    <select class="language">
        <option value="c_cpp" selected>c</option>
        <option value="c_cpp">c++</option>
        <option value="java">java</option>
        <option value="python">python</option>
    </select>


    <select class="theme">
        <option value="xcode">xcode</option>
        <option value="clouds">clouds</option>
        <option value="clouds_midnight">clouds_midnight</option>
        <option value="cobalt">cobalt</option>
        <option value="dawn">dawn</option>
        <option value="idle_fingers">idle_fingers</option>
        <option value="kr_theme">kr_theme</option>
        <option value="merbivore">merbivore</option>
        <option value="merbivore_soft">merbivore_soft</option>
        <option value="mono_industrial">mono_industrial</option>
        <option value="monokai">monokai</option>
        <option value="nord_dark">nord_dark</option>
        <option value="pastel_on_dark">pastel_on_dark</option>
        <option value="solarized_dark">solarized_dark</option>
        <option value="solarized_light">solarized_light</option>
        <option value="katzenmilch">katzenmilch</option>
        <option value="kuroir">kuroir</option>
        <option value="tomorrow">tomorrow</option>
        <option value="tomorrow_night">tomorrow_night</option>
        <option value="tomorrow_night_blue">tomorrow_night_blue</option>
        <option value="tomorrow_night_bright">tomorrow_night_bright</option>
        <option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
        <option value="twilight">twilight</option>
        <option value="vibrant_ink">vibrant_ink</option>
    </select>


    <pre id="code" style="min-height:400px;"></pre>
</div>


<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>
<script>


    $('.language').change(function () {
        editor.session.setMode("ace/mode/" + $(this).val());
    });

    $('.theme').change(function () {
        editor.setTheme("ace/theme/" + $(this).val());
    });
    //初始化对象
    editor = ace.edit("code");

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

猜你喜欢

转载自blog.csdn.net/qq_43058685/article/details/106413818
ACE
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022