acオンラインコードエディタの使用

67735 ワード

OJプロジェクトの中には、エディタプラグインが必要です.Githubでは、この強力なエディタプラグインを見つけました.
概要
これはオープンソースのフロントエンドコードエディタです.
githubアドレス:ace
AceはJavaScriptで作成した独立コードエディタです.私たちの目標はブラウザベースのエディタを作成して、TextMate、VimまたはEclipseなどの本マシンエディタの機能を整合して拡張することです.どのページやJavaScriptアプリケーションにも簡単に組み込むことができます.
特性
  • 120言語を超えるシンタックスハイライト表示(TextMate/Sublime/.tmlaggeファイルを導入できます)
  • が20個以上のテーマ(TextMate/Sublime/.tmthemeファイルを導入できます)
  • 自動字下げと字下げ
  • オプションコマンドライン
  • 大きなファイルを処理する(最後のチェック、上限は4,000,000行)
  • 完全にカスタマイズ可能なキーバインディングは、vimとEmacsモード
  • を含む.
  • 検索して正規表現に置き換える
  • マッチする括弧を強調表示する
  • ソフトラベルとリアルラベルの間で
  • を切り替えます.
  • 隠し文字
  • を表示します.
  • マウスでテキストをドラッグ&ドロップする
  • 改行
  • コード折りたたみ
  • 複数のカーソルと選択
  • リアルタイム文法チェック(現在はJavaScript/CoffeeScript/CSS/XQuery)
  • 切り取り、コピーと貼り付け機能
  • 使用
  • は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
    
  • は、コードで領域を編集し、容器にiをセットするコンテナが必要です.必ず容器に高さ
     <pre id="code" style="min-height:400px;">pre>
    
  • を設置してください.
  • は、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();
    
  • を設定する.
    完全コード
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Editortitle>
        <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-HS 94 BB 62-1559072431947)(aceフロントエンドコードエディタの使用/1.png).
  • 設定言語とコードスタイルのエースは、いくつかの言語コードをサポートしています.ここでは、いくつかの一般的な言語とコードスタイルを列挙します.
        
    	<select class="language">
            <option value="c_cpp" selected>coption>
            <option value="c_cpp">c++option>
            <option value="java">javaoption>
            <option value="python">pythonoption>
        select>
        <select class="theme">
            <option value="xcode">xcodeoption>
            <option value="clouds">cloudsoption>
            <option value="clouds_midnight">clouds_midnightoption>
            <option value="cobalt">cobaltoption>
            <option value="dawn">dawnoption>
            <option value="idle_fingers">idle_fingersoption>
            <option value="kr_theme">kr_themeoption>
            <option value="merbivore">merbivoreoption>
            <option value="merbivore_soft">merbivore_softoption>
            <option value="mono_industrial">mono_industrialoption>
            <option value="monokai">monokaioption>
            <option value="nord_dark">nord_darkoption>
            <option value="pastel_on_dark">pastel_on_darkoption>
            <option value="solarized_dark">solarized_darkoption>
            <option value="solarized_light">solarized_lightoption>
            <option value="katzenmilch">katzenmilchoption>
            <option value="kuroir">kuroiroption>
            <option value="tomorrow">tomorrowoption>
            <option value="tomorrow_night">tomorrow_nightoption>
            <option value="tomorrow_night_blue">tomorrow_night_blueoption>
            <option value="tomorrow_night_bright">tomorrow_night_brightoption>
            <option value="tomorrow_night_eighties">tomorrow_night_eightiesoption>
            <option value="twilight">twilightoption>
            <option value="vibrant_ink">vibrant_inkoption>
        select>
    
    追加言語設定後のソースコード
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Editortitle>
        <script src="../../static/js/jquery-3.4.1.min.js">script>
    head>
    <body>
    
    
    <div style="width: 80em;border-color: black;">
        
        <select class="language">
            <option value="c_cpp" selected>coption>
            <option value="c_cpp">c++option>
            <option value="java">javaoption>
            <option value="python">pythonoption>
        select>
    
    
        <select class="theme">
            <option value="xcode">xcodeoption>
            <option value="clouds">cloudsoption>
            <option value="clouds_midnight">clouds_midnightoption>
            <option value="cobalt">cobaltoption>
            <option value="dawn">dawnoption>
            <option value="idle_fingers">idle_fingersoption>
            <option value="kr_theme">kr_themeoption>
            <option value="merbivore">merbivoreoption>
            <option value="merbivore_soft">merbivore_softoption>
            <option value="mono_industrial">mono_industrialoption>
            <option value="monokai">monokaioption>
            <option value="nord_dark">nord_darkoption>
            <option value="pastel_on_dark">pastel_on_darkoption>
            <option value="solarized_dark">solarized_darkoption>
            <option value="solarized_light">solarized_lightoption>
            <option value="katzenmilch">katzenmilchoption>
            <option value="kuroir">kuroiroption>
            <option value="tomorrow">tomorrowoption>
            <option value="tomorrow_night">tomorrow_nightoption>
            <option value="tomorrow_night_blue">tomorrow_night_blueoption>
            <option value="tomorrow_night_bright">tomorrow_night_brightoption>
            <option value="tomorrow_night_eighties">tomorrow_night_eightiesoption>
            <option value="twilight">twilightoption>
            <option value="vibrant_ink">vibrant_inkoption>
        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>