在使用富文本编辑器时，我们大多习惯通过可视化工具栏编辑文字、插入图片、设置样式，但在需要精准控制 HTML 结构、修复格式错乱、自定义代码片段、对接后台规范时，可视化编辑往往力不从心。而 TinyMCE 自带的源码模式（Source Code Editing），就是解决这些问题的「终极武器」。
这篇文章就带大家全面了解 TinyMCE 源码模式：是什么、怎么用、核心能力、配置技巧，以及实际开发中的最佳实践，让你彻底掌握这款编辑器的底层控制能力。
一、什么是 TinyMCE 源码模式？
TinyMCE 是目前最主流的开源富文本编辑器之一，源码模式是它内置的核心功能，作用是：
把编辑器的可视化内容，直接转换为可编辑的原始 HTML 代码，允许你手动修改、校验、修复 HTML 结构，修改完成后再切换回可视化界面。
简单说：
- 可视化模式：所见即所得，适合普通用户快速排版；
- 源码模式：直接操作 HTML，适合开发者 / 管理员精准控制格式。
它不是第三方插件，而是 TinyMCE 原生支持的功能，开箱即用，稳定性极强。
二、源码模式能解决什么实际问题？
在开发和使用中，源码模式的价值非常突出，常见场景：
- 修复格式错乱从 Word / 其他平台复制内容进编辑器，常会产生冗余标签、乱码、无效样式，源码模式可以直接删除垃圾代码，还原干净结构。
- 精准插入自定义 HTML可视化工具栏不支持的代码（如自定义锚点、特殊布局、统计代码、内嵌脚本），直接在源码模式粘贴即可。
- 保证 HTML 规范统一后台接口对 HTML 结构、类名、标签有严格要求，源码模式可以手动校验，避免可视化生成不规范代码。
- 清理冗余代码可视化编辑会自动生成大量内联样式、空标签，源码模式可以一键精简，提升页面加载速度。
- 调试编辑器渲染问题当内容显示异常、样式不生效时，直接查看底层 HTML，快速定位问题根源。
三、快速启用：如何打开 TinyMCE 源码模式？
1. 基础启用（最简单）
只需要在工具栏配置中加入 code 按钮，即可开启源码模式：
javascript
运行
tinymce.init({
selector: '#editor', // 你的编辑器DOM选择器
plugins: 'code', // 必须加载 code 插件
toolbar: 'undo redo | bold italic | code', // 工具栏加入 code 按钮
height: 400
});
加载完成后，编辑器工具栏会出现一个 < > 图标，点击即可弹出源码编辑窗口。
2. 弹窗模式说明
点击源码按钮后，会弹出一个独立的代码编辑窗口：
- 支持语法高亮；
- 支持自动格式化；
- 支持全屏编辑；
- 修改后点击「保存」，自动同步到可视化界面。
3. 快捷键打开（提升效率）
TinyMCE 为源码模式默认提供快捷键：
Windows/Linux：Ctrl + Shift + C
Mac：Cmd + Shift + C
无需点击鼠标，一键切换源码编辑模式。
四、源码模式核心特性详解
1. 纯净 HTML 输出
源码模式不会篡改你的代码（除非配置了过滤规则），你写的 HTML 结构会被完整保留：
- 支持所有标准 HTML 标签：
div/section/table/form/iframe等； - 支持自定义类名、ID、data-* 属性；
- 支持内联样式、外部样式类。
示例：
在源码模式中输入：
html
预览
<div class="custom-box" data-id="100">
<h3>自定义标题</h3>
<p style="color:#f00">红色文字</p>
</div>
切换回可视化界面，会直接渲染出对应样式，结构完全保留。
2. 自动过滤危险代码（安全机制）
TinyMCE 默认会过滤 XSS 危险代码（如 onclick、javascript: 协议、<script> 标签），保证编辑器安全。
如果需要允许特定脚本 / 属性，可以手动配置（谨慎使用）：
javascript
运行
tinymce.init({
// 允许的标签和属性
valid_elements: '*[*]',
// 关闭脚本过滤（仅开发环境使用）
allow_unsafe_link_types: true
});
3. 与可视化模式双向同步
- 在源码模式修改 HTML → 保存 → 可视化界面实时更新；
- 在可视化界面编辑内容 → 再次打开源码模式 → 自动生成最新 HTML。
全程无缝衔接，不会丢失内容。
五、高级配置：定制源码模式（进阶用法）
我们可以通过配置，让源码模式更贴合项目需求：
1. 修改源码窗口大小
javascript
运行
tinymce.init({
plugins: 'code',
toolbar: 'code',
// 定制源码弹窗尺寸
code_dialog_width: 800,
code_dialog_height: 500
});
2. 禁止格式化代码（保持原始缩进）
默认情况下，TinyMCE 会自动格式化 HTML 代码，如需关闭：
javascript
运行
indent: false // 关闭代码缩进
3. 只允许源码模式（禁用可视化编辑）
适合纯代码编辑场景：
javascript
运行
tinymce.init({
inline: false,
plugins: 'code',
toolbar: 'code',
// 初始化直接打开源码模式
setup: function(editor) {
editor.on('init', function() {
editor.execCommand('mceCodeEditor');
});
}
});
4. 监听源码模式保存事件
可以在用户保存源码时，做校验、格式化、上报等操作：
javascript
运行
editor.on('BeforeSetContent', function(e) {
if (e.source === 'code') {
console.log('来自源码模式的内容：', e.content);
// 在这里添加内容校验逻辑
}
});
六、最佳实践：开发中这样用源码模式
- 内容粘贴必用源码清理复制外部内容后，先进入源码模式删除冗余标签，再使用，避免样式污染。
- 前后端对接统一规范前后端约定 HTML 结构，使用源码模式校验输出内容，避免解析异常。
- 禁用不必要的标签结合
valid_elements配置，限制用户只能输入指定标签，提升内容安全性。 - 配合样式文件使用不要在源码中写大量内联样式，推荐添加类名，在外部 CSS 中控制样式，便于维护。
七、常见问题与解决方案
1. 源码模式输入的代码，切换回去就丢失？
- 原因：TinyMCE 默认过滤了不支持的标签 / 属性；
- 解决：配置
valid_elements允许对应标签。
2. 从 Word 复制内容，源码里全是垃圾代码？
- 解决：使用
paste插件，开启自动清理：
javascript
运行
plugins: 'code paste',
paste_remove_styles: true,
paste_remove_spans: true
3. 源码模式按钮不显示？
- 原因：没有加载
code插件； - 解决：必须在
plugins中加入code。
八、总结
TinyMCE 源码模式，是富文本编辑器从「易用」到「强大」的关键功能：
- 普通用户用可视化，快速排版；
- 开发者用源码模式，精准控制；
- 原生支持、安全可靠、双向同步、开箱即用。
无论你是做 CMS、后台管理系统、博客平台，还是表单编辑器，掌握 TinyMCE 源码模式，都能让你彻底摆脱富文本编辑的格式困扰，实现完全可控的内容输出。
如果你的项目正在使用 TinyMCE，现在就把 code 插件加上，体验一下直接掌控 HTML 底层结构的快感吧！
总结
- 源码模式是 TinyMCE 原生插件，支持直接编辑 / 查看内容的原始 HTML，实现可视化与代码双向同步；
- 核心用途：修复格式、插入自定义代码、清理冗余标签、保证 HTML 规范；
- 启用只需两步：配置
plugins: 'code'+ 工具栏添加code； - 支持快捷键、窗口定制、事件监听、安全过滤，完全适配开发需求；
- 是解决富文本格式问题、实现精准内容控制的最优方案。
