css - 通过 TinyMCE 设置行高

Question

有没有办法让用户在 tinyMCE 编辑器中轻松更改段落的行高属性？类似于它的原生“字体大小”或“格式”<select>或其他任何东西。我知道我可以使用“编辑 CSS”功能并将其设置在那里。我正在寻找更用户友好的东西。

我在任何地方都找不到它。

Answer 1

我发现这个插件适用于 TinyMCE 版本 4.1.5 (2014-09-09)

https://github.com/castler/tinymce-line-height-plugin

像这样设置：

tinymce.init({
    plugins: 'lineheight',
    toolbar: 'lineheightselect' 
});

您也可以像这样配置不同的高度：

tinymce.init({
    lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
});

我对此进行了测试，效果很好。

Answer 2

根据我的评论，

其他人遇到了与您类似的问题，TinyMCE 论坛的成员提供了解决方案：

http://www.tinymce.com/forum/viewtopic.php?id=28774

Answer 3

使用 TinyMCE 4，您可以使用“style_formats”选项

http://www.tinymce.com/wiki.php/Configuration:style_formats

Answer 4

事实上，TinyMCE 没有字体名称或字体大小的行高控制，但您可以轻松地将其添加到style_formats. 我使用了这个配置：

// custom formatting is under Format > formats, so make sure it's in your menu (it is, by default)
const editorOptions = {
  // Notice that it overrides Format > formats
  style_formats: [
      {
          title: 'Line height',
          items: [
            {
              title: 'Default',
              inline: 'span',
              // `inline-block` because CSS `line-height` doesn't affect multiline `span`
              styles: { 'line-height': 'normal', display: 'inline-block' }
            },
            {
              title: '40px',
              inline: 'span',
              styles: { 'line-height': '40px', display: 'inline-block' }
            },
            // add as more as you need
          ]
      },
      // ...
  ]  
}

codepen 上的工作示例

TinyMCE style_formats 文档

Answer 5

我找到了一种向 tinymce 添加自定义行高的好方法，但这是一个技巧。我正在使用 tinymce v5，通过这些代码，我可以使用带有不错选择选项的行高。

您必须将这些行添加到小 mce 的初始化代码中：

 tinymce.init({
            selector: 'textarea',
            height: 500,
            plugins: 'table wordcount',
            toolbar: '  styleselect ',

            content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tiny.cloud/css/codepen.min.css'
            ],
    toolbar: 'styleselect'
 content_style: '.lineheight20px { line-height: 20px; }' +
                '.lineheight22px { line-height: 22px; }' +
                '.lineheight24px { line-height: 24px; }' +
                '.lineheight26px { line-height: 26px; }' +
                '.lineheight28px { line-height: 28px; }' +
                '.lineheight30px { line-height: 30px; }' +
                '.lineheight32px { line-height: 32px; }' +
                '.lineheight34px { line-height: 34px; }' +
                '.lineheight36px { line-height: 36px; }' +
                '.lineheight38px { line-height: 38px; }' +
                '.lineheight40px { line-height: 40px; }' +
                '.tablerow1 { background-color: #D3D3D3; }',
            formats: {
                lineheight20px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
                lineheight22px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight22px' },
                lineheight24px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight24px' },
                lineheight26px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight26px' },
                lineheight28px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' },
                lineheight30px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight30px' },
                lineheight32px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight32px' },
                lineheight34px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight34px' },
                lineheight36px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight36px' },
                lineheight38px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight38px' },
                lineheight40px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight40px' }
            },
            style_formats: [
                { title: 'lineheight20px',format: 'lineheight20px' },
                { title: 'lineheight22px', format: 'lineheight22px' },
                { title: 'lineheight24px', format: 'lineheight24px' },
                { title: 'lineheight26px', format: 'lineheight26px' },
                { title: 'lineheight28px', format: 'lineheight28px' },
                { title: 'lineheight30px', format: 'lineheight30px' },
                { title: 'lineheight32px', format: 'lineheight32px' },
                { title: 'lineheight34px', format: 'lineheight34px' },
                { title: 'lineheight36px', format: 'lineheight36px' },
                { title: 'lineheight38px', format: 'lineheight38px' },
                { title: 'lineheight40px', format: 'lineheight40px' }



]
    });

最后我不得不说你需要在tinymce/themes/silver/theme.min.js的文件中找到一个“段落”字，如果你想看到行高，把它改成“行高”名称而不是段落名称。这个词在该文件的 290855 行中。这个工作在tinymce中被称为自定义格式，如果你想找到它，请检查这个链接： https ://www.tiny.cloud/docs/demo/format-custom/ 我不得不说你需要添加这个css代码到您的 css 文件：

.lineheight22px{
line-height: 22px;
}
.lineheight24px{
    line-height: 24px;
}
.lineheight26px{
    line-height: 26px;
}
.lineheight28px{
    line-height: 28px;
}
.lineheight30px{
    line-height: 30px;
}
.lineheight32px{
    line-height: 32px;
}
.lineheight34px{
    line-height: 34px;
}
.lineheight36px{
    line-height: 36px;
}
.lineheight38px{
    line-height: 38px;
}
.lineheight40px{
    line-height: 40px;
}