ACE 示例

  2.     <!DOCTYPE html>
  3.     <html lang="en">
  4.     <head>
  5.         <title>ACE in Action</title>
  6.         <style type="text/css" media="screen">
  7.         #editor {
  8.             position: absolute;
  9.             top: 0;
  10.             right: 0;
  11.             bottom: 20px;
  12.             left: 0;
  13.         }
  14.         </style>
  15.     </head>
  17.     <body>
  18.         <div id="editor"></div>
  19.         <script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  20.         <script>
  21.         var editor = ace.edit("editor");
  23.         /******** 设置主题 *****/
  24.         editor.setTheme("ace/theme/monokai");
  26.         /***  设置编程语言模式   ***/
  27.         editor.getSession().setMode("ace/mode/java");
  29.         /** 通用操作 */
  31.         //设置编辑器中文本值
  32.         editor.setValue("the new text here\n\n\n");
  33.         console.log(editor.getValue());
  35.         //获取选中的文本
  36.         var selectContent = editor.session.getTextRange(editor.getSelectionRange());
  37.         console.log(selectContent);
  39.         //获取当前光标行和列
  40.         console.log(editor.selection.getCursor());
  42.         //跳到指定行 参数为行号
  43.         editor.gotoLine(2);
  45.         //在光标处插入
  46.         editor.insert("Something cool,Something cool");
  48.         //获取行数个数
  49.         console.log(editor.session.getLength());
  51.         //设置默认的标签大小
  52.         editor.getSession().setTabSize(4);//没发现有什么效果
  54.         //使用软标签
  55.         editor.getSession().setUseSoftTabs(true);  //没发现有什么效果
  57.         //设置字体大小
  58.         document.getElementById('editor').style.fontSize='12px';
  60.         //切换字体换行
  61.         editor.getSession().setUseWrapMode(true); //不知道啥效果
  63.         //设置行高亮
  64.         editor.setHighlightActiveLine(false);
  66.         //设置打印边距可见性
  67.         editor.setShowPrintMargin(true);
  69.         //设置编辑器只读
  70.         editor.setReadOnly(false);  // false to make it editable
  72.         /***************    触发调整大小        *********************/
  73.         //Ace只在窗口事件时调整自己的大小。 如果以另一种方式调整编辑器div的大小，并需要Ace调整大小，请使用以下命令：
  74.         editor.resize();
  76.         /**            搜索     */
  77.         editor.find('needle',{
  78.             backwards: false,
  79.             wrap: false,
  80.             caseSensitive: false,
  81.             wholeWord: false,
  82.             regExp: false
  83.         });
  84.         editor.findNext();
  85.         editor.findPrevious();    
  86.         /**
  87.          * 以下选项可用于您的搜索参数：
  88.                     needle：您要查找的字符串或正则表达式
  89.                     backwards ：是否从光标当前位置向后搜索。 默认为false。
  90.                     wrap：是否在搜索结束时将搜索回到开头。 默认为false。
  91.                     caseSensitive：搜索是否应区分大小写。 默认为false。
  92.                     wholeWord：搜索是否匹配整个单词。 默认为false。
  93.                     range：要搜索的范围。 对于整个文档，将其设置为null
  94.                     regExp：搜索是否为正则表达式。 默认为false。
  95.                     start：开始搜索的范围或光标位置
  96.                     skipCurrent：是否在搜索中包括当前行。 默认为false。
  97.          */
  98.         //以下是如何执行替换
  99.         editor.find('Something');
  100.         editor.replace('Everything');   
  102.         //以下是替换所有
  103.         //editor.replaceAll('bar'); //editor.replaceAll 要在 editor.find('needle', ...) 使用之后
  106.         /******** 监听事件 ******/
  108.         // 监听 onchange
  109.         editor.getSession().on('change', function(e) {
  110.             console.log("change happened" + e);
  111.             // e.type, etc
  112.         });
  114.         // 监听 selection change
  115.         editor.getSession().selection.on('changeSelection', function(e) {
  116.             console.log("changeSelection happened" + e);
  117.         });    
  119.         // 监听 cursor change
  120.         editor.getSession().selection.on('changeCursor', function(e) {
  121.             console.log("changeCursor happened" + e);
  122.         });
  124.         /**** 添加新命令和键盘绑定 *****/
  126.         //将键绑定分配给自定义函数
  127.         editor.commands.addCommand({
  128.             name: 'myCommand',
  129.             bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
  130.             exec: function(editor) {
  131.                 console.log("键绑定成功");
  132.                 console.log("编辑器的值为:" + editor.getValue());
  133.             },
  134.             readOnly: true // false if this command should not apply in readOnly mode
  135.         });   
  139.         </script>
  140.     </body>
  142.     </html>