在线体验 | 文档 | 更新日志 | 应用: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>
- 代码上色,向vscode看齐的代码风格
- 多行缩进缩退、字体缩放等快捷键
- light 与 dark 模式
- 一键复制代码
- 自适应宽高、自定义宽高、全屏编写
- 强大丰富的 api 与 配置
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对象,参数为编辑器中的代码内容 |
注:
- 如果 el 元素内部有html内容,则 TCEditor 会将其作为 code 渲染,不过 code配置优先级高于 html 内容
- buttons 为 true 或 'all' 表示启用所有功能按钮,false表示不启用功能按钮,为数组表示选择性启用
- buttons 为数组时可选值有:
'fontSizeUp' | 'fontSizeDown' | 'fullScreen' | 'fix' | 'changeTheme' | 'clearCode' | 'resetCode' | 'copy' | 'submit'
, 详细含义可以参考 2.2 的api方法说明,其中 submit 按钮仅在含有 onsubmit 参数时才会有效 - height与width 为auto时表示自适应代码的显示区域大小,其他值直接渲染为编辑器的样式
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)