更新记录

1.0.0（2026-10-12）

• 首个版本发布
• HTML / CSS / JS 三语言语法高亮（自研词法高亮，无第三方依赖）
• 行号栏，随内容与滚动实时同步
• 代码预测与自动补全：内置语言词典 + 文档内已有词，前缀匹配、↑↓ 选择、Enter/Tab 确认、Esc 关闭、Ctrl+Space 手动触发
• 常用符号栏：按语言提供高频符号与代码片段，点击在光标处插入
• 常见编辑器能力：自动缩进、括号/引号自动闭合、Tab / Shift+Tab 缩进（选中多行整块缩进）、撤销/重做、一键整理空白、行注释切换
• 查找 / 替换：Ctrl/Cmd + F 打开，匹配高亮、上一个/下一个、区分大小写、单个/全部替换
• 实时预览：iframe 沙箱运行 HTML+CSS+JS，防抖自动运行 + 手动运行
• 内置 console 控制台：捕获 console.* 与运行时错误并面板展示
• 浅色 / 深色主题切换、字号调节、行号/自动换行开关、自动保存
• 响应式：≥900px 编辑器/预览左右分栏（可拖拽分隔），<900px 顶部标签页切换
• 适配 H5（PC / 移动浏览器）与 App（Android / iOS），web-view 内嵌渲染
• 事件回传：ready / change / console 在 H5 与 App 端均可上报（App 端内置官方 uni.webview 桥接）
• 支持通过 query 传入初始 HTML/CSS/JS 代码

平台兼容性

uni-app(5.0)

其他

hy-code-editor 代码编辑器

hy-code-editor 是一个 uni-app（Vue2 / Vue3） 的 HTML / CSS / JS 在线代码编辑器组件，编辑器主体为自研 H5 页面，无业务第三方依赖（仅内置 DCloud 官方 uni.webview 桥接脚本用于 App 端与宿主通信）。

基于 web-view 内嵌自研 H5 编辑器实现，编辑体验与真实浏览器一致。 适配 H5（PC / 移动浏览器） 与 App（Android / iOS）。

功能特性

• 三语言语法高亮：HTML / CSS / JS，自研词法高亮（含 script / style 内嵌套高亮）
• 行号栏：随内容与滚动实时同步，自动换行时按视觉行对齐，当前行高亮
• 代码预测与补全：内置语言词典（标签 / 属性 / CSS 属性值 / JS 关键字与方法）+ 文档内已有词，前缀匹配
  • ↑ / ↓ 选择、Enter / Tab 确认、Esc 关闭、Ctrl + Space 手动触发
• 常用符号栏：按语言提供高频符号与代码片段（如 <div></div>、console.log()、@media 等），点击在光标处插入，支持 | 光标占位
• 常见编辑器能力：
  • 自动缩进（{ ( [ > : 结尾自动加深缩进）
  • 括号 / 引号自动闭合、闭合符掠过、成对删除
  • Tab / Shift + Tab 缩进与反缩进（选中多行时整块缩进 / 反缩进）
  • 撤销 / 重做（组件内置历史栈）
  • 一键整理空白（去行尾空格、Tab 转空格、折叠多余空行）
  • 行注释切换（Ctrl + /，HTML 用 <!-- -->，CSS / JS 用 //）
• 查找 / 替换：Ctrl / Cmd + F 打开，匹配项高亮、上一个 / 下一个、区分大小写、计数显示，支持替换当前与全部替换
• 实时预览：沙箱 iframe 运行 HTML + CSS + JS，输入防抖自动运行 + 手动运行（Ctrl / Cmd + S）
• 内置控制台：捕获 console.log / info / warn / error 与运行时错误、未处理的 Promise 异常
• 主题与显示：浅色 / 深色主题切换、字号调节、行号 / 自动换行开关、自动保存（localStorage）
• 响应式布局：宽度 ≥ 900px 时编辑器 / 预览左右分栏（分隔条可拖拽）；< 900px 时顶部标签页切换 HTML / CSS / JS / 预览

安装

1. 将 hy-code-editor 目录放入项目的 uni_modules 目录（组件已支持 easycom，无需手动 import）。
2. 重要：将插件内的编辑器页面复制到项目静态目录：

uni_modules/hy-code-editor/static/hy-code-editor/index.html
   ↓ 复制到 ↓
static/hy-code-editor/index.html

原因：uni-app / uni-app x 编译时只把项目 /static 目录复制进 App，其它目录的 html 无法被 web-view 访问。因此编辑器页面必须位于项目 static 下。

基本用法

<template>
    <view style="width: 100%; height: 100vh;">
        <hy-code-editor
            :html="html"
            :css="css"
            :js="js"
            theme="light"
            :auto-run="true"
            @ready="onReady"
            @change="onChange"
            @console="onConsole"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                html: '<h1>Hello</h1>\n<button id="b">点我</button>',
                css: 'h1 { color: #3b7cff; }',
                js: "document.getElementById('b').onclick = function () { console.log('clicked'); };"
            }
        },
        methods: {
            onReady() {
                console.log('编辑器已就绪');
            },
            onChange(code) {
                // code = { html, css, js }
                console.log('代码变更', code);
            },
            onConsole(payload) {
                // payload = { type: 'log'|'info'|'warn'|'error', msg }
            }
        }
    }
</script>

完整可运行示例见本工程 pages/code-editor/code-editor.vue。

属性 Props

事件 Events

方法 Methods（通过 ref 调用，H5 端生效）

平台支持

注意事项

1. 必须将 index.html 复制到项目 static/hy-code-editor/，否则 App 端 web-view 无法加载（详见「安装」）。
2. H5 端 web-view 为全屏渲染，页面中建议只放置该组件并让其铺满；App 端组件默认铺满可用区域。
3. 编辑器内代码会自动保存到浏览器 localStorage；若通过 html / css / js 属性传入了初始代码，则优先使用传入值。
4. 预览使用 iframe 沙箱运行（优先 增量写入以保留滚动/表单状态，失败回退 srcdoc），用户代码中的 console 会被捕获并转发到内置控制台。
5. 事件回传：H5 端经 window.parent.postMessage 上报；App 端内置 DCloud 官方 uni.webview 桥接脚本，经 uni.postMessage 上报。setCode / run 等“下发指令”方法目前仅 H5 端完整生效。
6. 编辑器页面为独立 H5 页面，不受 uni-app H5 输入框样式限制影响。