ace editor最简单入门教程


前几天搜索markdown, 结果找到Dillinger.io这个网站, 是一个在线编辑markdown文本的工具. 但是给我印象最深的反而不是markdown, 而是他所用的文本编辑器, 这个编辑器不是通常的在线HTML编辑器, 而是纯文本编辑器, 就像VIM,emacs一样. 这个项目叫做Ace Editor.

下面是如何以最少的代码成功加载ace编辑器的方法. 先定义一个div,id为editor, 然后指定一些样式,在div中放置一些纯文本.

<style>
#editor {
margin:0 auto;
top: 100px;
left: 0;
bottom: 0;
right: 0;
width: 98%;
border: 2px solid 
#999;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 80px 
rgba(0, 0, 0, 0.30) inset 0 0 5px 
rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0 0 80px rgba(0,0,0,0.30) inset 0 0 5px rgba(0,0,0,0.60);
box-shadow: 0 0 80px 
rgba(0, 0, 0, 0.30) inset 0 0 5px 
rgba(0, 0, 0, 0.60);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
</style>
<body>
<div>
<h1><a href="username">someuser</a></h1> >> keyword
该文档有xx发布, 状态可以编辑
状态只读
</div>
<div id="editor">
index


      <aiju> GRUB2 really is the emacs of bootloaders
      <uriel> no, GRUB was the emacs of bootloaders, GRUB2 is the Eclipse of bootloaders
      <kfx> I've never understood why grub even exists
      <aiju> it does anything, except what it's supposed to do
14:46 < aiju> can't you install grub from grub floppy?
14:46 < martian67> considering grub2 is like 30 megs big
14:46 < martian67> no
14:46 < aiju> 30 megs for a bootloader?
14:46 < aiju> is it written in Java?
14:47 < aiju> no wait, NOT EVEN JAVA COULD FUCK UP THINGS LIKE THIS
14:47 < cinap_lenrek> remeber these old bootsector viruses?
14:47 < cinap_lenrek> the did graphics and sound and what not
14:47 < martian67> grub2 is a bootsector virus
14:47 < jse> Yeah, just a very fat and bloated one.
14:47 < aiju> cinap_lenrek: reminds me of those "windows is not a virus. viruses are well-engineered" jokes
GRUB3 

</div>

需要注意的是, 如果没有给editor指定任何样式, ace会无法加载, 查看元素, 发现其top left都是-40000px.

加载js脚本:

<script src="jquery1.7.js" type="text/javascript"></script>
<script src="ace.js" type="text/javascript"></script>
<script src="theme-merbivore.js" type="text/javascript"></script>
<script src="testace.js" type="text/javascript"></script>

初始化的代码在testace.js中, 如下:

$(function(){
  function init() {
    initAce()
  }
  
  function initAce(){
    var editor ace.edit("editor")
    editor.setTheme('ace/theme/merbivore')
    editor.getSession().setUseWrapMode(true)
    editor.setShowPrintMargin(false)
    //alert(editor.getSession().getValue())
  }
  
  init();
})