关于ace.js的一些心得

裴兴学

2023-12-01

ace.js是一个网页代码编辑器的库。

官方的github https://github.com/ajaxorg/ace
功能：

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

初始化：

定义 HTML

编写 JS

复制

<div id="editor">some text</div>
<script src="src/ace.js" type="text/JavaScript" charset="utf-8"></script>
<script>
    var editor = ace.edit ("editor");// 这里不需要加 #
</script>

这样是不能显示的，所有需要加个高度和宽度，例如

#editor {

    width: 500px;
    height: 400px;
}

加入你的主题 JS
写入调用

<script src="src/theme-twilight.js" type="text/JavaScript" charset="utf-8"></script>
<script>
   editor.setTheme ("ace/theme/twilight");
</script>

默认情况下，输入的是文本编辑器，如果你想要加入 JavaScript 编辑器，需要加入文件，并且设置模式

<script src="src/mode-javascript.js" type="text/JavaScript" charset="utf-8"></script>

<script>
var JavaScriptMode = ace.require ("ace/mode/JavaScript").Mode;
editor.session.setMode (new JavaScriptMode ());
</script>

自动提示语法

editor.setOptions ({
    enableBasicAutocompletion: true,//
    enableSnippets: true,//
    enableLiveAutocompletion: true,// 补全
});

demo

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  <title>Editor</title>
  <style type='text/css' media='screen'>

    .ace_editor, .toolbar {
        border: 1px solid lightgray;
        margin: auto;
        width: 80%;
    } 
    .ace_editor {
        height: 200px;
    }
    </style>
</head>
<body>
<div><strong>主题:</strong><select onchange='themeChange()' value='chrome'><optgroup label='Bright'><option value='chrome'>Chrome</option><option value='clouds'>Clouds</option><option value='crimson_editor'>Crimson Editor</option><option value='dawn'>Dawn</option><option value='dreamweaver'>Dreamweaver</option><option value='eclipse'>Eclipse</option><option value='github'>GitHub</option><option value='iplastic'>IPlastic</option><option value='solarized_light'>Solarized Light</option><option value='textmate'>TextMate</option><option value='tomorrow'>Tomorrow</option><option value='xcode'>Xcode</option><option value='kuroir'>Kuroir</option><option value='katzenmilch'>KatzenMilch</option><option value='sqlserver'>SQL Server</option></optgroup><optgroup label='Dark'><option value='ambiance'>Ambiance</option><option value='chaos'>Chaos</option><option value='clouds_midnight'>Clouds Midnight</option><option value='dracula'>Dracula</option><option value='cobalt'>Cobalt</option><option value='gruvbox'>Gruvbox</option><option value='gob'>Green on Black</option><option value='idle_fingers'>idle Fingers</option><option value='kr_theme'>krTheme</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='one_dark'>One Dark</option><option value='pastel_on_dark'>Pastel on dark</option><option value='solarized_dark'>Solarized Dark</option><option value='terminal'>Terminal</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 80s</option><option value='twilight'>Twilight</option><option value='vibrant_ink'>Vibrant Ink</option></optgroup></select>

<!-- load ace -->
<script src='../src/ace.js'></script>
<!-- load ace language_tools extension -->
<script src='../src/ext-language_tools.js'></script>
<script>
var th;
		/*********************************************************/
	function themeChange(){
		th=String("ace/theme/"+this.value);
		editor.setOptions({
       theme: th
    });
	window.editor = editor;
	}

	
	
    var buildDom = require('ace/lib/dom').buildDom;
    var editor = ace.edit();
    editor.setOptions({
        theme: 'ace/theme/tomorrow_night_eighties',
        mode: 'ace/mode/markdown',
        maxLines: 30,
        minLines: 30,
        autoScrollEditorIntoView: true,
		enableBasicAutocompletion: true,//
		enableSnippets: true,//
		enableLiveAutocompletion: true,// 补全
    });
    var refs = {};
    function updateToolbar() {
        refs.saveButton.disabled = editor.session.getUndoManager().isClean();
        refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
        refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
    }
	editor.session.setUseWorker(true);
    editor.on('input', updateToolbar);
    editor.session.setValue(localStorage.savedValue || 'Helloworld!');
    function save() {
        localStorage.savedValue = editor.getValue(); 
        editor.session.getUndoManager().markClean();
        updateToolbar();
    }
	
    editor.commands.addCommand({
        name: 'save',
        exec: save,
        bindKey: { win: 'ctrl-s', mac: 'cmd-s' }
    });
    
    buildDom(['div', { class: 'toolbar' },
        ['button', {
            ref: 'saveButton',
            onclick: save
        }, 'save'],
        ['button', {
            ref: 'undoButton',
            onclick: function() {
                editor.undo();
            }
        }, 'undo'],
        ['button', {
            ref: 'redoButton',
            onclick: function() {
                editor.redo();
            }
        }, 'redo'],
        
    ], document.body, refs);
    document.body.appendChild(editor.container)
    
    window.editor = editor;
	

	
	
</script>

</body>
</html>

关于ace.js的一些心得

相关阅读

相关文章

相关问答

相关文档