TinyEditor 开源项目教程

2026-01-16 09:25:12作者：胡唯隽

1. 项目的目录结构及介绍

TinyEditor 项目的目录结构如下：

TinyEditor/
├── index.html
├── style.css
├── script.js
├── README.md
└── LICENSE

index.html: 项目的主页面文件，包含了编辑器的基本结构和布局。
style.css: 项目的样式文件，定义了编辑器的外观和样式。
script.js: 项目的主要脚本文件，包含了编辑器的功能实现。
README.md: 项目的说明文件，提供了项目的基本信息和使用指南。
LICENSE: 项目的许可证文件，说明了项目的授权和使用条款。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它包含了编辑器的基本结构和布局。以下是 index.html 的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyEditor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="editor"></div>
    <script src="script.js"></script>
</body>
</html>

<head> 部分包含了页面的元数据和样式文件的链接。
<body> 部分包含了一个 div 元素，用于承载编辑器的内容，以及一个脚本文件的链接。

3. 项目的配置文件介绍

项目的配置文件主要是 script.js，它包含了编辑器的功能实现。以下是 script.js 的主要内容：

document.addEventListener('DOMContentLoaded', function() {
    const editor = document.getElementById('editor');
    const toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    editor.appendChild(toolbar);

    const content = document.createElement('div');
    content.className = 'content';
    editor.appendChild(content);

    // 添加工具栏按钮
    const buttons = ['bold', 'italic', 'underline', 'link', 'unlink', 'image'];
    buttons.forEach(button => {
        const btn = document.createElement('button');
        btn.innerText = button;
        btn.addEventListener('click', () => {
            document.execCommand(button, false, null);
        });
        toolbar.appendChild(btn);
    });

    // 设置编辑器内容
    content.innerHTML = '<p>欢迎使用 TinyEditor</p>';
    content.setAttribute('contenteditable', 'true');
});