0

我希望我能把自己说得足够清楚，让你明白。

我正在尝试将 ace 集成到我的网站中。唯一的问题是，如果我使用 tab 键，文本不会重新定位。此外，如果我单击内部开始编辑，该字符将被插入左侧 4 个字符。我认为\t角色没有被绘制出来。

这就是现在的样子，但是<h1>and<p>标记应该缩进 1 个选项卡（并且选择和编辑的行为就像已绘制选项卡一样）。 它看起来如何

按以下顺序从 src-min-noconflict 加载 ace 文件：

  • 王牌.js
  • 模式-html.js
  • 主题终端.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>
4

0 回答 0