在 TinyMCE
编辑器中，文本行距和段落
间距的设置可以通过多种方式进行。以下是具体的解决方案：
### 行距设置
在初始化 `init` 方法中，可以通过重写 `style_formats` 来自定义行距选项。以下代码展示了如何配置行距：
```javascript
tinymce.init({
selector: &#
39;textarea&#
39;, // 替换为你的选择器
style_formats: [
{
title: "Line Height",
items: [
{ title: "1", block: "p", styles: { "line-height": "1.0" } },
{ title: "1.5", block: "p", styles: { "line-height": "1.5" } },
{ title: "1.75", block: "p", styles: { "line-height": "1.75" } },
{ title: "2", block: "p", styles: { "line-height": "2" } },
{ title: "
3", block: "p", styles: { "line-height": "
3" } },
{ title: "4", block: "p", styles: { "line-height": "4" } },
{ title: "5", block: "p", styles: { "line-height": "5" } }
]
}
],
style_formats_merge: false, // 完全替换默认样式格式
style_formats_autohide: true // 隐藏当前不可用的样式列表
});
```
通过这种方式，可以在
编辑器的菜单中添加一个行距选择功能，用户可以根据需要选择不同的行距值 [^
3]。
### 段落
间距设置
如果需要
调整段落
之间的
间距，可以使用 `paragraphspacing` 插件来实现。该插件允许自定义段落
间距，并将其集成到
编辑器的工具栏或菜单中。以下是一个典型的配置示例：
```javascript
tinymce.init({
selector: &#
39;textarea&#
39;, // 替换为你的选择器
plugins: &#
39;paragraphspacing&#
39;,
toolbar: &#
39;undo redo | paragraphspacing&#
39;,
menu: {
format: {
title: &#
39;格式&#
39;,
items: &#
39;paragraphspacing&#
39;
}
},
paragraphspacing: &#
39;0px 20px 40px&#
39; // 自定义段落
间距值
});
```
此配置将启用段落
间距设置，并提供一个包含不同
间距选项的菜单供用户选择 [^1]。
###
回车键
导致间隙过大
问题
如果发现按下
回车键后生成的段落
之间间隙特别大，可以通过监听 `keydown` 事件来
调整行为。例如，在 `setup` 函数中强制
回车时添加 `shiftKey` 标志，从而避免插入额外的 `<p>`
标签：
```javascript
tinymce.init({
selector: &#
39;textarea&#
39;, // 替换为你的选择器
setup: function (editor) {
editor.on(&#
39;keydown&#
39;, function (event) {
if (event.keyCode === 1
3) {
event.shiftKey = true; // 强制按住 Shift 键的效果，防止插入新段落
}
});
}
});
```
这种方法可以有效减少由于
回车操作引起的意外间隙
问题 [^2]。
---
本文介绍了一种通过将父元素的font-size设置为0来消除字体大小的方法，并强调了同时设置子元素font-size的重要性。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
