美文网首页Vue.js
Ace editor 中文文档

Ace editor 中文文档

作者: 余以为 | 来源:发表于2019-12-24 15:27 被阅读0次

    不知道为什么,在VScode里编辑好的md,粘贴在简书里格式却不对,已经设置成md模式了还是不行。就贴图吧。。也可以看另外一篇文章,那个是好的。 Ace editor 中文文档

    # 介绍

    > Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。

    官网地址:[Ace - The High Performance Code Editor for the Web](https://ace.c9.io/ "Ace - The High Performance Code Editor for the Web")

    Github: [GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)](https://github.com/ajaxorg/ace/ "GitHub - ajaxorg/ace: Ajax.org Cloud9 Editor")

    vue版:[GitHub - chairuosen/vue2-ace-editor](https://github.com/chairuosen/vue2-ace-editor "GitHub - chairuosen/vue2-ace-editor")

    # 快速开始

    ### 简单使用

    ```html

    <div id="editor" style="height: 500px; width: 500px">some text</div>

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

    <script>

        var editor = ace.edit("editor");

    </script>

    ```

    ### 设置主题和语言模式

    要更改主题,请为编辑器配置要使用的主题路径。主题文件将按需加载:

    ```javascript

    editor.setTheme("ace/theme/twilight");

    ```

    默认情况下,编辑器为纯文本模式。但是,所有其他语言模式都可以作为单独的模块使用。语言模式也将按需加载:

    ```javascript

    editor.session.setMode("ace/mode/javascript");

    ```

    ### 编辑器状态

    Ace将所有编辑器状态(选择,滚动位置等)保留在`editor.session`中, 这对于制作可切换式编辑器非常有用:

    ```javascript

    var EditSession = require("ace/edit_session").EditSession

    var js = new EditSession("some js code")

    var css = new EditSession(["some", "css", "code here"])

    // 要将文档加载到编辑器中,只需这样调用

    editor.setSession(js)

    ```

    ### 在项目中配置Ace

    ```javascript

    // 将代码模式配置到ace选项

    ace.edit(element, {

        mode: "ace/mode/javascript",

        selectionStyle: "text"

    })

    // 使用setOptions方法一次设置多个选项

    editor.setOptions({

        autoScrollEditorIntoView: true,

        copyWithEmptySelection: true,

    });

    // 单独设置setOptions方法

    editor.setOption("mergeUndoDeltas", "always");

    // 一些选项也直接设置,例如:

    editor.setTheme(...)

    // 获取选项设置值

    editor.getOption("optionName");

    // 核心Ace组件包括(editor, session, renderer, mouseHandler)

    setOption(optionName, optionValue)

    setOptions({

        optionName : optionValue

    })

    getOption(optionName)

    getOptions()

    ```

    设置和获取内容:`

    ```javascript

    editor.setValue("the new text here"); // 或 session.setValue

    editor.getValue(); // 或 session.getValue

    ```

    获取选定的文本:

    ```javascript

    editor.session.getTextRange(editor.getSelectionRange());

    ```

    在光标处插入:

    ```javascript

    editor.insert("Something cool");

    ```

    获取当前光标所在的行和列:

    ```javascript

    editor.selection.getCursor();

    ```

    转到某一行:

    ```javascript

    editor.gotoLine(lineNumber);

    ```

    获取总行数:

    ```javascript

    editor.session.getLength();

    ```

    设置默认标签大小:

    ```javascript

    editor.getSession().setTabSize(4);

    ```

    使用软标签:

    ```javascript

    editor.getSession().setUseSoftTabs(true);

    ```

    设置字体大小:

    ```javascript

    document.getElementById('editor').style.fontSize='12px';

    ```

    切换自动换行:

    ```javascript

    editor.getSession().setUseWrapMode(true);

    ```

    设置行高亮显示:

    ```javascript

    editor.setHighlightActiveLine(false);

    ```

    设置打印边距可见性:

    ```javascript

    editor.setShowPrintMargin(false);

    ```

    设置编辑器为只读:

    ```javascript

    editor.setReadOnly(true);  // false为可编辑

    ```

    #### 窗口自适应

    编辑器仅在resize事件触发时时调整自身大小。要想以其他方式调整编辑器div的大小,并且需要调整编辑器大小,请使用以下命令:

    ```javascript

    editor.resize()

    ```

    #### 在代码中搜索

    主要的ACE编辑器搜索功能在 [_search.js_](https://github.com/ajaxorg/ace/blob/master/lib/ace/search.js).中定义。以下选项可用于搜索参数:

     * `needle`: 要查找的字符串或正则表达式

     * `backwards`: 是否从当前光标所在的位置向后搜索。默认为“false”

     * `wrap`: 当搜索到达结尾时,是否将搜索返回到开头。默认为“false

     * `caseSensitive`: 搜索是否应该区分大小写。默认为“false”

     * `wholeWord`: 搜索是否只匹配整个单词。默认为“false”

     * `range`: 是否要在整个文档中搜索

     * `regExp`: 搜索是否为正则表达式。默认为“false”

     * `start`: 开始搜索的起始范围或光标位置

     * `skipCurrent`: 是否在搜索中包含当前行。默认为“false”

    下面是一个如何在编辑器对象上设置搜索的示例:

    ```javascript

    editor.find('needle',{

      backwards: false,

      wrap: false,

      caseSensitive: false,

      wholeWord: false,

      regExp: false

    });

    editor.findNext();

    editor.findPrevious();

    ```

    这是执行替换的方法:

    ```javascript

    editor.find('foo');

    editor.replace('bar');

    ```

    这是全部替换:

    ```javascript

    editor.replaceAll('bar');

    ```

    #### 事件监听

    `onchange`:

    ```javascript

    editor.getSession().on('change', callback);

    ```

    `selection`变化:

    ```javascript

    editor.getSession().selection.on('changeSelection', callback);

    ```

    `cursor`变化:

    ```javascript

    editor.getSession().selection.on('changeCursor', callback);

    ```

    #### 添加新的命令和绑定

    将指定键绑定并分配给自定义功能:

    ```javascript

    editor.commands.addCommand({

        name: 'myCommand',

        bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},

        exec: function(editor) {

            //...

        }

    });

    ```

    ### 主要配置项

    > 以下是目前所支持的主要选项的列表。除非另有说明,否则选项值皆为布尔值,可以通过editor.setOption来设置。

    ##### - editor选项

    |  选项名 | 值类型  | 默认值  | 可选值  | 备注  |

    | ------------ | ------------ | ------------ | ------------ | ------------ |

    | selectionStyle  |  String | text  | line&#124;text  | 选中样式  |

    | highlightActiveLine  | Boolean  | true  | -  | 高亮当前行  |

    | highlightSelectedWord  | Boolean  |  true | -  | 高亮选中文本  |

    | readOnly  | Boolean  | false  | -  | 是否只读  |

    | cursorStyle  | String  |  ace | ace&#124;slim&#124;smooth&#124;wide  | 光标样式  |

    | mergeUndoDeltas  | String&#124;Boolean  | false  | always  | 合并撤销  |

    | behavioursEnabled  | Boolean  | true  | -  | 启用行为  |

    | wrapBehavioursEnabled  | Boolean  | true  | -  | 启用换行  |

    | autoScrollEditorIntoView | Boolean  | false  | -  | 启用滚动  |

    | copyWithEmptySelection  | Boolean  | true  | -  |  复制空格 |

    | useSoftTabs  | Boolean  | false  |  - | 使用软标签  |

    | navigateWithinSoftTabs  | Boolean  |  false | -  | 软标签跳转  |

    | enableMultiselect  | Boolean  |  false | -  | 选中多处  |

    ##### - renderer选项

    |  选项名 | 值类型  | 默认值  | 可选值  | 备注  |

    | ------------ | ------------ | ------------ | ------------ | ------------ |

    | hScrollBarAlwaysVisible  |  Boolean | false  | -  | 纵向滚动条始终可见  |

    | vScrollBarAlwaysVisible  | Boolean  | false  | -  | 横向滚动条始终可见  |

    | highlightGutterLine  | Boolean  |  true | -  | 高亮边线  |

    | animatedScroll  | Boolean  | false  | -  | 滚动动画  |

    | showInvisibles  | Boolean  |  false | -  | 显示不可见字符  |

    | showPrintMargin  | Boolean  | true  | -  | 显示打印边距  |

    | printMarginColumn  | Number  | 80  | -  | 设置页边距  |

    | printMargin  | Boolean&#124;Number  | false  | -  | 显示并设置页边距  |

    | fadeFoldWidgets | Boolean  | false  | -  | 淡入折叠部件  |

    | showFoldWidgets  | Boolean  | true  | -  |  显示折叠部件 |

    | showLineNumbers  | Boolean  | true  |  - | 显示行号  |

    | showGutter  | Boolean  |  true | -  | 显示行号区域  |

    | displayIndentGuides  | Boolean  |  true | -  | 显示参考线  |

    | fontSize  | Number&#124;String  | inherit  | -  | 设置字号  |

    | fontFamily  | String  | inherit  |   | 设置字体  |

    | maxLines | Number  | -  | -  | 至多行数  |

    | minLines  | Number  | -  | -  |  至少行数 |

    | scrollPastEnd  |  Boolean&#124;Number  | 0  |  - | 滚动位置  |

    | fixedWidthGutter  | Boolean  |  false | -  | 固定行号区域宽度  |

    | theme  | String  |  - | -  | 主题引用路径,例如"ace/theme/textmate"  |

    ##### - mouseHandler选项

    |  选项名 | 值类型  | 默认值  | 可选值  | 备注  |

    | ------------ | ------------ | ------------ | ------------ | ------------ |

    | scrollSpeed  | Number  | - | -  | 滚动速度  |

    | dragDelay  | Number  | -  | -  | 拖拽延时  |

    | dragEnabled  | Boolean  | true | -  | 是否启用拖动  |

    | focusTimout  | Number  | -  | -  | 聚焦超时  |

    | tooltipFollowsMouse  | Boolean  | false  | -  | 鼠标提示  |

    ##### - session选项

    |  选项名 | 值类型  | 默认值  | 可选值  | 备注  |

    | ------------ | ------------ | ------------ | ------------ | ------------ |

    | firstLineNumber  | Number  | 1 | -  | 起始行号  |

    | overwrite  | Boolean  | -  | -  | 重做  |

    | newLineMode  | String  | auto | auto&#124;unix&#124;windows  | 新开行模式  |

    | useWorker  | Boolean  | -  | -  | 使用辅助对象  |

    | useSoftTabs | Boolean  | -  | -  | 使用软标签  |

    | tabSize  | Number  | -  | -  | 标签大小  |

    | wrap  | Boolean  | - | -  | 换行  |

    | foldStyle  | String  | -  | markbegin&#124;markbeginend&#124;manual  | 折叠样式  |

    | mode | String  | -  | -  | 代码匹配模式,例如“ace/mode/text" |

    ##### - 扩展选项

    |  选项名 | 值类型  | 默认值  | 可选值  | 备注  |

    | ------------ | ------------ | ------------ | ------------ | ------------ |

    | enableBasicAutocompletion  | Boolean  | - | -  | 启用基本自动完成  |

    | enableLiveAutocompletion  | Boolean  | -  | -  | 启用实时自动完成  |

    | enableSnippets | Boolean  | - | -  | 启用代码段  |

    | enableEmmet  | Boolean  | -  | -  | 启用Emmet  |

    | useElasticTabstops  | Boolean  | -  | -  | 使用弹性制表位  |

    相关文章

      网友评论

        本文标题:Ace editor 中文文档

        本文链接:https://www.haomeiwen.com/subject/wyhppxtx.html