代码拉取完成，页面将自动刷新
在线体验 | 文档 | 更新日志 | 应用:jui-code | 反馈
[TOC]
tc-editor 是一款 功能强大，体积小巧（包含图标素材和依赖库共 40kb），简单易用的代码编辑器，一行代码便可以生成一个在线的代码编辑器，支持强大的自定义功能配置，多行代码缩进缩退，向vscode看齐的代码风格。
使用 npm 安装：
npm i tc-editor
<div id='editor'></div>
import TCEditor from 'tc-editor';
new TCEditor({el: '#editor'});
使用 script 标签使用会在window上定义 TCEditor 类：
<div id='editor'></div>
<script src="https://cdn.jsdelivr.net/npm/tc-editor/tc-editor.min.js"></script>
<script>
new TCEditor({el: '#editor'})
</script>
new TCEditor(config);
config 是一个参数配置的json对象，具体属性如下：
| 参数 | 必选 | 默认值 | 类型 | 备注 |
|---|---|---|---|---|
| el | 是 | -- | Ele/string/HTMLElement | 容器 |
| buttons | 否 | true | boolean/string/Array | 功能按钮配置 |
| fontSize | 否 | 16 | number | 字体大小 |
| theme | 否 | 'dark' | string | 编辑器主题，可选值为 'normal','dark' |
| width | 否 | 300 | string/number | 宽 |
| height | 否 | 200 | string/number | 高 |
| code | 否 | -- | string | 初始代码 |
| tab | 否 | '\t' | string | 缩进的字符串 |
| trim | 否 | true | boolean | 是否清空前后的换行符 |
| disabled | 否 | false | boolean | 是否启用编辑 |
| fullScreen | 否 | false | boolean | 是否全屏显示 |
| lineIndex | 否 | true | boolean | 是否显示行序号 |
| onload | 否 | -- | function | 渲染完成的回调函数，this 指代 TCEditor对象 |
| onsubmit | 否 | -- | function | submit按钮点击的回调函数，this 指代 TCEditor对象，参数为编辑器中的代码内容 |
注：
'fontSizeUp' | 'fontSizeDown' | 'fullScreen' | 'fix' | 'changeTheme' | 'clearCode' | 'resetCode' | 'copy' | 'submit', 详细含义可以参考 2.2 的api方法说明，其中 submit 按钮仅在含有 onsubmit 参数时才会有效let editor = new TCEditor(config);
editor[api](args);
api 方法说明如下：
| 名称 | 返回值 | 参数 | 备注 |
|---|---|---|---|
| clearCode | -- | -- | 清空代码 |
| fix | -- | -- | 修复ios和macos上可能出现的重影问题 |
| resetCode | -- | -- | 重置代码为初始化代码 |
| copy | boolean | -- | 复制代码，返回值表示是否复制成功 |
| changeTheme | string? | string | 切换编辑器主题，可选值为 'normal','dark'，无参数表示来回切换 |
| fullScreen | boolean? | boolean | 切换全屏状态，无参数表示来回切换 |
| disable | boolean? | boolean | 切换禁用状态，无参数表示来回切换 |
| fontSize | number? | number | 获取或设置字体大小 |
| fontSizeUp | -- | number | 增大字体 |
| fontSizeDown | -- | number | 减小字体 |
| submit | -- | -- | 提交代码，用户执行参数配置中的onsubmit |
| code | string? | string? | 获取或设置代码 |
静态属性：
TCEditor.version; // 版本信息
TCEditor.tool; // easy-dom-util 暴露的工具方法
TCEditor.tool 详情见 easy-dom-util
静态方法：
TCEditor.create(config); // 等价于 new TCEditor(config)
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。