如何在 tinyMCE 中添加字体大小工具栏？

Posted 2023-03-15

【中文标题】如何在 tinyMCE 中添加字体大小工具栏？

【英文标题】：how to add font-size toolbar in tinyMCE?

【发布时间】：2013-04-19 15:56:50

【问题描述】：

这样我将 tinyMCE 初始化为 textarea。字体，粗斜体正在工作，但字体大小选择不起作用。

tinymce.init(
    selector: "textarea#content",
    theme: "modern",
    width: 586,
    height: 300,
    menubar:false,
    font_size_classes : "fontSize1, fontSize2, fontSize3, fontSize4, fontSize5, fontSize6",//i used this line for font sizes 
    content_css: "css/content.css",
    toolbar: "sizeselect | bold italic | fontselect | fontsize",//used font size for showing font size toolbar   
style_formats: [

    title: 'Bold text', inline: 'b',
            title: 'Red text', inline: 'span', styles: color: '#ff0000',
            title: 'Red header', block: 'h1', styles: color: '#ff0000',
            title: 'Example 1', inline: 'span', classes: 'example1',
            title: 'Example 2', inline: 'span', classes: 'example2',
            title: 'Table styles',
            title: 'Table row 1', selector: 'tr', classes: 'tablerow1'
    ],
);**

【参考方案1】：

您需要做的就是将fontsizeselect 添加到您的工具栏配置参数中：

toolbar: "sizeselect | bold italic | fontselect |  fontsizeselect",

更新：

tinymce.init(
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
);

【参考方案2】：

这可能对透视有用。下面是我的 TinyMCE init JS 代码，其中包括字体类型和大小选项。

tinymce.init(
    selector: '#articletextarea',
    plugins: [
        'advlist autolink lists link image charmap preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code',
        'insertdatetime media nonbreaking table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
    ],
    toolbar: 'codesample | bold italic sizeselect fontselect fontsizeselect | hr alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | insertfile undo redo | forecolor backcolor emoticons | code',
    fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
    height: "350",
    menubar: false
);

【参考方案3】：

theme_modern_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values: "12px,13px,14px,16px,18px,20px",

toolbar: "insertfile undo redo | fontsizeselect |

【参考方案4】：

我真的很生气 wordpress 似乎如何努力让人们想要深入研究背景并玩弄代码，即使是为了改变字体等所谓的基本功能。

幸运的是，我找到了一种无需进行任何实际编码即可启用字体大小菜单的方法。

只是——

使用插件“TinyMCE Advanced” 在设置中激活它。

More detailed instructions here.