TinyMCE 开源富文本编辑器教程

1. 项目目录结构及介绍

TinyMCE 的仓库目录通常会有以下结构：

├── README.md       # 项目简介文件
├── .gitignore      # Git 忽略文件列表
├── package.json    # npm 包管理文件，记录项目依赖和脚本命令
├── licenses        # 各种许可文件
├── dist             # 编译后的可部署资源
│   ├── tinymce.js   # 主编辑器脚本
│   └── ...          # 其他相关文件
└── src              # 源代码目录
    ├── themes       # 主题相关的源码
    ├── plugins      # 插件源码
    ├── languages    # 语言包
    ├── core         # 核心组件
    └── ...           # 更多源码文件

dist 目录包含了编译后的 JavaScript 文件，可以直接在网页中引入使用；src 目录则是源代码，用于开发和扩展 TinyMCE。

2. 项目的启动文件介绍

对于 TinyMCE 这样的库项目，通常没有像 Web 应用那样的单一启动文件。但是，你可以通过 package.json 中的脚本来执行构建或测试任务。例如，要运行开发服务器或者构建生产环境代码，你可能有以下脚本：

{
  "scripts": {
    "start": "run-s serve-dev",
    "build": "webpack --config webpack.config.js",
    ...
  },
  "devDependencies": {
    "webpack": "^5.x",
    "run-s": "^7.x",
    ...
  }
}

这里，start 脚本可能会启动一个本地开发服务器，而 build 则负责打包项目到 dist 目录。具体执行的命令取决于项目中安装的依赖和配置。

3. 项目的配置文件介绍

TinyMCE 的配置主要通过 JavaScript 对象来实现，这个对象会在初始化编辑器时传入。一个基本的配置示例是：

<script>
tinymce.init({
  selector: 'textarea',  // 选择器，确定哪个元素将作为编辑器容器
  height: 300,            // 设置编辑器高度
  menubar: false,          // 隐藏顶部菜单栏
  toolbar: 'undo redo | bold italic underline | bullist numlist',
  plugins: 'link image paste code'  // 激活插件
});
</script>

此外，TinyMCE 还支持通过外部 JSON 文件加载配置。创建一个名为 tinymce_config.json 的文件：

{
  "selector": "textarea",
  "height": 300,
  "menubar": false,
  "toolbar": ["undo redo", "bold italic underline", "bullist numlist"],
  "plugins": ["link", "image", "paste", "code"]
}

然后在初始化编辑器时引用这个文件：

<script src="tinymce_config.json"></script>
<script>
tinymce.init({ settings: window.tinymceConfig });
</script>

请注意，具体的配置选项和值应参考 TinyMCE 官方文档以获取最新信息。不同的版本可能会有不同的配置项，因此建议查阅与项目使用的 TinyMCE 版本相对应的文档。