jquery - 描かれていないエースのタブ

Question

あなたが理解できるように、私は自分自身を十分に明確にすることができれば幸いです.

サイトに ace を統合しようとしています。唯一の問題は、Tab キーを使用すると、テキストが再配置されないことです。また、内側をクリックして編集を開始すると、文字が左に 4 文字挿入されます。\tキャラクターは描かれていないと思います。

現在はこのようになっていますが、<h1>and<p>タグは 1 タブ分インデントする必要があります (選択と編集は、タブが描画されたように動作します)。

次の順序で src-min-noconflict から ace ファイルをロードしました。

• ace.js
• モード-html.js
• theme-terminal.js

エディターをアクティブにするコード

$(document).ready(function(){
    var editor = ace.edit('editor');

    editor.setTheme('ace/theme/terminal');
    editor.getSession().setMode('ace/mode/html');

    editor.getSession().setFoldStyle('manual');
    editor.setSelectionStyle('line');
    editor.setHighlightActiveLine(true);
    editor.setShowInvisibles(false);
    editor.setDisplayIndentGuides(true);
    editor.renderer.setHScrollBarAlwaysVisible(false);
    editor.setAnimatedScroll(false);
    editor.renderer.setShowGutter(true);
    editor.renderer.setShowPrintMargin(false);
    editor.getSession().setUseSoftTabs(false);
    editor.setHighlightSelectedWord(true);


    $('textarea[name="new_content"]').hide();
    editor.getSession().setValue($('textarea[name="new_content"]').val());

    $('form.form-textarea').on('submit', function(){
        $('textarea[name="new_content"]').val(editor.getSession().getValue());
    });
});

CSS

#editor {
    position: relative;
    height: 300px;
    font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
}

HTML

<textarea name="new_content" class="hide">{ filled by the server with html }</textarea>
<div id="editor"></div>