ace-editor代码编辑器实现与如何格式化编辑器中的代码(支持SQL/Java/JS/CSS/HTML/JSON/XML)

最新推荐文章于 2024-06-19 16:38:27 发布

置顶张音乐

最新推荐文章于 2024-06-19 16:38:27 发布

阅读量2.9k

点赞数 1

分类专栏： JS | Vue | React | 前端踩坑实战教程文章标签：编辑器 ace-editor 格式化 WebIDE 代码编辑器

本文链接：https://blog.youkuaiyun.com/qq_29777207/article/details/120919654

版权

JS | Vue | React | 前端踩坑实战教程专栏收录该内容

32 篇文章 ¥29.90 ¥99.00

订阅专栏

本文介绍了如何使用ace-editor作为WebIDE，支持SQL、Java、JavaScript、CSS、HTML、JSON和XML代码的格式化。通过实例展示了ace-editor的功能，并提及了依赖的引入方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图展示,只展示了SQL和JAVA代码的格式化 ,其他的 JS/CSS/HTML/JSON/XML 也都支持

需要引入依赖

/** 代码编辑器 **/
cnpm install --save vue2-ace-editor

/** sql格式刷 **/
cnpm install --save sql-formatter@2.3.3

/** CSS / JS /JAVA /JSON /HTML/ XML格式刷 **/
cnpm install --save beautify

<template>

  <el-row :gutter="20" style="padding: 10px;">
    <el-col :span="12"><editor v-model="sqlContent" @init="editorInit" lang="sql" theme="dracula" width="100%" height="550"></editor></el

了解本专栏