当前位置：首页 > news >正文

借助 ChatGPT 快速实现 TinyMCE 段落间距与行间距调节

news 2025/8/12 10:30:04

继上文，➡️在 TinyMCE 中扩充强大的135编辑器后，又有新需求，为了更好的排版，需要再增加行间距和段落间距。这次机会交给ChatGPT-5了！

先补充介绍一下 TinyMCE ！

TinyMCE 介绍：强大且灵活的富文本编辑器

什么是 TinyMCE？

TinyMCE 是一款开源、跨平台的富文本编辑器（Rich Text Editor），由澳大利亚公司 Ephox 开发并维护。它允许用户在网页中以“所见即所得”（WYSIWYG）的方式编辑文本，支持格式化、插入媒体、表格、链接等丰富功能，广泛应用于内容管理系统（CMS）、博客平台、论坛、在线文档工具等场景。

自 2003 年首次发布以来，TinyMCE 凭借其高度的可定制性、稳定性和跨浏览器兼容性，成为全球最受欢迎的富文本编辑器之一，被 Netflix、Twitter、Oracle、IBM 等知名企业采用。

TinyMCE 的核心特点

丰富的编辑功能
- 基础文本格式化：加粗、斜体、下划线、字体大小/颜色、对齐方式等。
- 结构化编辑：标题层级、列表（有序/无序）、引用、代码块、表格插入与编辑。
- 媒体支持：插入图片、视频、音频，支持拖拽上传和在线资源嵌入。
- 高级功能：链接管理、表情符号、特殊字符、撤销/重做、全屏编辑等。
高度可定制性
- 可通过配置项自定义工具栏按钮、菜单选项，按需启用或禁用功能（如限制图片上传格式、隐藏不必要的按钮）。
- 支持自定义插件开发，扩展专属功能（如本文开头提到的“段落间距/行间距调节”即可通过插件实现）。
- 提供多种主题（如默认主题、简洁主题）和皮肤，可适配不同网站的设计风格。
跨平台与兼容性
- 兼容所有主流浏览器（Chrome、Firefox、Safari、Edge 等），支持桌面端和移动端。
- 可与多种前端框架无缝集成，如 React、Vue、Angular、jQuery 等，也可直接在原生 HTML/JS 环境中使用。
安全性
- 内置 XSS（跨站脚本）防护机制，可过滤危险代码，保障内容安全。
- 支持自定义内容过滤规则，防止恶意内容注入。
开源与商业支持
- 核心功能完全开源（基于 MIT 许可证），免费供个人和商业使用。
- 官方提供商业版服务，包括高级插件（如拼写检查、增强媒体管理）、技术支持和 SLA 保障，满足企业级需求。

TinyMCE 的应用场景

内容管理系统（CMS）：如 WordPress（可通过插件集成）、Drupal 等，用于文章编辑。
在线协作工具：如文档协作平台、项目管理软件，支持多人实时编辑（需结合实时协作插件）。
教育平台：在线课程编辑、作业提交系统，用于格式化文本和插入教学资源。
企业内部系统：如 CRM、OA 系统，用于编辑邮件、报告等内容。

如何使用 TinyMCE？

引入方式
- 直接通过 CDN 加载（推荐新手）：
```
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
```
- 下载源码后本地引入，或通过 npm 安装（适用于前端工程化项目）：
```
npm install tinymce
```

基础配置示例
在页面中创建一个文本区域（textarea），并通过 JS 初始化 TinyMCE：

<textarea id="mytextarea">Hello, World!</textarea>
<script>tinymce.init({selector: '#mytextarea', // 绑定到指定元素plugins: 'advlist autolink lists link image charmap preview', // 启用的插件toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | link image' // 自定义工具栏});
</script>

总结

TinyMCE 以其功能全面、灵活定制、兼容性强等优势，成为开发者在富文本编辑场景中的首选工具。无论是简单的文本格式化需求，还是复杂的自定义功能扩展，TinyMCE 都能提供可靠的解决方案。

官网地址：https://www.tiny.cloud/

言归正传，上代码！不过 GPT-5 先提供的是 5.x版本才能用的。

tinymce.init({selector: '#editor',plugins: 'lists',toolbar: 'fontsizes lineheight paragraphspacing',setup: function (editor) {// 行间距editor.ui.registry.addMenuButton('lineheight', {text: '行间距',fetch: function (callback) {callback([{ type: 'menuitem', text: '1.0', onAction: function () { setLineHeight('1') } },{ type: 'menuitem', text: '1.5', onAction: function () { setLineHeight('1.5') } },{ type: 'menuitem', text: '2.0', onAction: function () { setLineHeight('2') } },{ type: 'menuitem', text: '2.5', onAction: function () { setLineHeight('2.5') } },{ type: 'menuitem', text: '3.0', onAction: function () { setLineHeight('3') } }]);}});// 段落间距editor.ui.registry.addMenuButton('paragraphspacing', {text: '段落间距',fetch: function (callback) {callback([{ type: 'menuitem', text: '小(5px)', onAction: function () { setParagraphSpacing('5px') } },{ type: 'menuitem', text: '中(10px)', onAction: function () { setParagraphSpacing('10px') } },{ type: 'menuitem', text: '大(20px)', onAction: function () { setParagraphSpacing('20px') } }]);}});// 设置行间距function setLineHeight(value) {editor.formatter.register('custom_lineheight', {inline: 'span',styles: { lineHeight: value }});editor.formatter.apply('custom_lineheight');}// 设置段落间距（段后）function setParagraphSpacing(value) {editor.formatter.register('custom_paragraphspacing', {block: 'p',styles: { marginBottom: value }});editor.formatter.apply('custom_paragraphspacing');}}
});

反馈要4.7版本的，马上给调整了一版！CHATGPT 速度是真快！

tinymce.init({selector: '#editor',plugins: 'lists',toolbar: 'lineheight | paragraphspacing',setup: function (editor) {// 行间距按钮editor.addButton('lineheight', {type: 'menubutton',text: '行间距',icon: false,menu: [{ text: '1.0', onclick: function () { setLineHeight('1') } },{ text: '1.5', onclick: function () { setLineHeight('1.5') } },{ text: '2.0', onclick: function () { setLineHeight('2') } },{ text: '2.5', onclick: function () { setLineHeight('2.5') } },{ text: '3.0', onclick: function () { setLineHeight('3') } }]});// 段落间距按钮editor.addButton('paragraphspacing', {type: 'menubutton',text: '段落间距',icon: false,menu: [{ text: '小(5px)', onclick: function () { setParagraphSpacing('5px') } },{ text: '中(10px)', onclick: function () { setParagraphSpacing('10px') } },{ text: '大(20px)', onclick: function () { setParagraphSpacing('20px') } }]});// 设置行间距function setLineHeight(value) {editor.formatter.register('custom_lineheight', {inline: 'span',styles: { lineHeight: value }});editor.formatter.apply('custom_lineheight');}// 设置段落间距（段后）function setParagraphSpacing(value) {editor.formatter.register('custom_paragraphspacing', {block: 'p',styles: { marginBottom: value }});editor.formatter.apply('custom_paragraphspacing');}}
});