当前位置: 首页 > Web前端 > HTML

AceEditor在线代码编辑器构建

时间:2023-04-02 23:15:48 HTML

Ace是一个非常强大的编辑器。它实现语法着色、缩进和代码提示。并且拥有海量的主题,支持海量的语言。但是Ace的文档基本上都是英文的。首先展示Ace的例子。参考地址:http://www.feiaci.com/#/JsonCrop下面介绍其功能的实现方法。下载我们可以在bootstarpcdn上下载它的插件。https://www.bootcdn.cn/ace/Ace有很多很多文件,我们要自己加载相关文件。有几个文件必须要加载:ace.js--Ace工程的文件,ext-beautify.js--编辑好的美化ext-language_tools.js--mode-javascript.js--模式,可以是JS或者可以是其他(java,c#)。这就是它支持多种语言的强大之处。theme-xcode.js--主题,就像主题样式一样可以在IDE中设置。根据需要引入不同的js。首先使用一个div容器Json工具

{name:'jack',年龄:'20'}
Json格式(格式)Json压缩
在页面中引入上面的js下面是一个例子:this.editor=ace.edit('editor');//Thisplace就是id为editor的divthis.editor.setTheme('ace/theme/xcode');letjsMode=ace.require('ace/mode/javascript').Mode;this.editor.session.setMode(newjsMode());如果我们想获取或更改编辑器中的文本this.editor.setValue(jsonDoc);this.editor.getValue()关于Ace的更多信息可以在其官方github上找到:https://github.com/ajaxorg/ac...关注欢迎关注小站的小滑轮,小站是日常工作中积累的一些小工具,你在工作中是否也遇到过呢,也可以在博客下留言关于肖战的内容,有哪些呢,如果你要我添加你使用的工具,也可以留言。