Leanote官方博客
知识, 博客, 分享, 协作...
Toggle navigation
Leanote官方博客
主页
Latest
NEWS
Leantote manual
leanote活动
Leanote Dev
公告
About
归档
标签
Leanote集成Ace代码编辑器, 我们的最爱
? ace ?
? 代码编辑器 ?
2014-12-18 06:21:49
4519
7
3
leanote
? ace ?
? 代码编辑器 ?
引用 [Leanote Github](https://github.com/leanote/leanote) 上的一段话: > 说实话, 我们曾是evernote的忠实粉丝, 但是我们也发现evernote的不足: > > evernote的编辑器不能满足我们的需求, 不能贴代码(格式会乱掉, 作为程序员, 代码是我们的基本需求啊), 图片不能缩放. > ... 这是我们开发Leanote的初衷, 为此, 我们在不断地努力, 让编辑知识更简单, 对于代码编辑这块, [Leanote](https://leanote.com)之前的做法是使用 `pre`(这也是富文本编辑器能用的做法), 将代码放在`pre`中, 但这这个代码编辑器是非常简单的, 没有行号, 没有高亮, 没有`tab,shift+tab`缩进... 我们一直为此努力, 希望能早日开发一款强大的代码编辑器, 在此期间, 我们也有一些小样品, 但功能始终不尽人意. 有一天, 我们跳出自己开发的思维, 为什么不将强大的Ace代码编辑器集成到Leanote富文本编辑器中呢? 现在, 我们已经成功将Ace集成到Leanote中, 在这里, 你可以享受到强大的代码编辑器. 当然肯定还有一些瑕疵, 但对于简单的代码编辑需求已经足够了, 尽情享受吧! ## 功能截图 ![功能截图](http://leanote.com/file/outputImage?fileId=548e032238f4116015000016) ## 功能介绍 注意: 现在Leanote集成的Ace编辑器 **仅支持基于webkit的浏览器** , 如chrome, safari, 对于ie, firefox代码编辑器还是之前的编辑器. 请使用chrome体验该功能. 我们会尽快将该功能兼容到firefox, ie 10+上. Ace支持的功能, 比如以下常用的功能都支持: * 代码高亮 * 行号 * tab 增加缩进 * shift + tab 减少缩进 * 折叠代码 * 搜索代码 * .... ### 2.1 插入代码 插入代码的方式有以下两种: * 使用工具栏的"代码语言" * 使用快捷键 `ctrl + shift + c` / `command + shift + c` 在使用时, 可以先选择一段文本(也可以不选择, 或将光标放在某行上), 使其转换为代码. 如: 1 . 选择文本: ![选择文本](http://leanote.com/file/outputImage?fileId=548e04e438f4116015000019) 2 . 使用`ctrl + shift + c` 或 使用工具栏的"代码语言" 选择"javascript", 就会转换成代码编辑器: ![](http://leanote.com/file/outputImage?fileId=548e04fb38f411601500001b) ### 2.2 选择特定语言高亮 Ace会根据特定的语言进行代码高亮, 请在工具栏上"代码语言" 上选择正确的语言, 以确保Ace能正确的解析. ![](http://leanote.com/file/outputImage?fileId=548e04b238f4116015000018) ### 2.3 转换代码到html 将代码转换到普通的html, 先focus代码, 再使用工具栏的"代码语言"的"Convert Code". ![](http://leanote.com/file/outputImage?fileId=548e05b738f411601500001d) 切换成: ![](http://leanote.com/file/outputImage?fileId=548e067038f4116015000021) ### 2.4 切换Ace与pre 可以通过代码编辑器左上角的checkbox将Ace与`pre`相互切换. 支持这个功能是为了在一些情况下不使用Ace编辑器: 在Ace模式下, 左上角的checkbox是勾选的, ![](http://leanote.com/file/outputImage?fileId=548e05b738f411601500001d) 点击就会切换到pre ![](http://leanote.com/file/outputImage?fileId=548e05e238f411601500001f) 当然再次勾选又会切换到Ace模式下. ### 2.5 跳出代码编辑区 在Ace编辑器中使用shift + enter可跳出该编辑区. --------------------- Leanote 是一款开源的云笔记, 采用`golang+mongodb`实现, 支持富文本, markdown编辑, 集知识管理, 博客, 分享协作于一身. * 官网: [https://leanote.com](https://leanote.com) * github: [https://github.com/leanote/leanote]( https://github.com/leanote/leanote)
上一篇:
Leanote祝各位朋友新年快乐! Happy New Year!
下一篇:
Leanote 产品周报 - 富文本编辑器集成ACE代码编辑器 12.8-12.14
7
赞
4519 人读过
新浪微博
微信
腾讯微博
QQ空间
人人网
提交评论
立即登录
, 发表评论.
没有帐号?
立即注册
3
条评论
More...
文档导航
没有帐号? 立即注册