tc-editor

🚀 功能强大，体积小巧，简单易用的代码编辑器

在线体验 | 文档 | 更新日志 | 应用:jui-code | 反馈

[TOC]

前言

tc-editor 是一款 功能强大，体积小巧（包含图标素材和依赖库共 40kb），简单易用的代码编辑器，一行代码便可以生成一个在线的代码编辑器，支持强大的自定义功能配置，多行代码缩进缩退，向vscode看齐的代码风格。

0.快速使用

使用 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>

1.功能

1. 代码上色，向vscode看齐的代码风格
2. 多行缩进缩退、字体缩放等快捷键
3. light 与 dark 模式
4. 一键复制代码
5. 自适应宽高、自定义宽高、全屏编写
6. 强大丰富的 api 与 配置

2 详细使用

2.1 参数配置

new TCEditor(config);

config 是一个参数配置的json对象，具体属性如下：

注：

1. 如果 el 元素内部有html内容，则 TCEditor 会将其作为 code 渲染，不过 code配置优先级高于 html 内容
2. buttons 为 true 或 'all' 表示启用所有功能按钮，false表示不启用功能按钮，为数组表示选择性启用
3. buttons 为数组时可选值有：'fontSizeUp' | 'fontSizeDown' | 'fullScreen' | 'fix' | 'changeTheme' | 'clearCode' | 'resetCode' | 'copy' | 'submit', 详细含义可以参考 2.2 的api方法说明，其中 submit 按钮仅在含有 onsubmit 参数时才会有效
4. height与width 为auto时表示自适应代码的显示区域大小，其他值直接渲染为编辑器的样式

2.2 api 方法

let editor = new TCEditor(config);
editor[api](args);

api 方法说明如下：

2.3 静态属性和方法

静态属性：

TCEditor.version; // 版本信息
TCEditor.tool; // easy-dom-util 暴露的工具方法

TCEditor.tool 详情见 easy-dom-util

静态方法：

TCEditor.create(config); // 等价于 new TCEditor(config)

3 应用例子

jui-code