自定义tinymce 4.0.5的样式选择工具栏菜单

Question

我将尝试自定义默认的styleselect工具栏菜单，以便向其中添加自定义的菜单元素。我的想法是将字体大小作为styleselect子菜单：

我按照以下方式初始化了TinyMCE 4.0.5:

tinymce.init(
{
    language_url : '/webobbywebapp/js/tiny_mce/language/es.js',
    selector:'textarea',
    plugins: "image, link, print",
    toolbar: "styleselect | undo redo | removeformat | bold italic underline |  aligncenter alignjustify  | bullist numlist outdent indent | link | print | fontselect fontsizeselect",
    menubar: false,
    statusbar: true,
    resize: true
});

由于我无法找到如何自定义默认的样式选择菜单，因此我也尝试创建一个完全新的菜单，其中可以添加字体大小控制。但我不想显示任何工具栏，我想要一个单独的菜单栏。

编辑：现在我正在尝试使用以下代码修改样式选择菜单，但字体选择和字体大小选择似乎被禁用了。

,style_formats:
[{
    title: "标题",
    items: [{title: "标题1",format: "h1"}, {title: "标题2",format: "h2"}, {title: "标题3",format: "h3"}, {title: "标题4",format: "h4"}, {title: "标题5",format: "h5"}, {title: "标题6",format: "h6"}]
}, 
            {title: "内联",items: [{title: "加粗",icon: "bold",format: "bold"}, {title: "斜体",icon: "italic",format: "italic"}, 
            {title: "下划线",icon: "underline",format: "underline"}, {title: "删除线",icon: "strikethrough",format: "strikethrough"}, {title: "上标",icon: "superscript",format: "superscript"}, {title: "下标",icon: "subscript",format: "subscript"}, {title: "代码",icon: "code",format: "code"}]}, 
            {title: "块级元素",items: [{title: "段落",format: "p"}, {title: "引用",format: "blockquote"}, {title: "分区",format: "div"}, {title: "预格式化",format: "pre"}]}, 
            {title: "对齐方式",items: [{title: "左对齐",icon: "alignleft",format: "alignleft"}, {title: "居中",icon: "aligncenter",format: "aligncenter"}, {title: "右对齐",icon: "alignright",format: "alignright"}, {title: "两端对齐",icon: "alignjustify",format: "alignjustify"}]}, 
            {title: "字体大小", items: 'fontsizeselect'},
    {title: "字体", items: 'fontselect'
}]

- peris

Answer 1

从4.0.13版本开始，现在有一个新的属性可以在初始化期间使用，名为style_formats_merge。将此属性设置为true，它将把您的样式连接到默认集。

tinymce.init({
    style_formats_merge: true,
    style_formats: [
        {
            title: 'Line Height',
            items: [
                { title: 'Normal Line Height', inline: 'span', styles: { "line-height": '100%' } },
                { title: 'Line Height + 10%', inline: 'span', styles: { "line-height": '110%' } },
                { title: 'Line Height + 50%', inline: 'span', styles: { "line-height": '150%' } },
                { title: 'Line Height + 100%', inline: 'span', styles: { "line-height": '200%' } }
            ]
        }
    ]
});

- mcfea

Answer 2

最终，添加下面的代码解决了问题：

 ,style_formats:[
     {
       title: "标题",
       items: [
         {title: "一级标题",format: "h1"},
         {title: "二级标题",format: "h2"},
         {title: "三级标题",format: "h3"},
         {title: "四级标题",format: "h4"},
         {title: "五级标题",format: "h5"},
         {title: "六级标题",format: "h6"}
       ]
    },
    {
         title: "内联样式",
         items: [
             {title: "加粗",icon: "bold",format: "bold"}, 
             {title: "斜体",icon: "italic",format: "italic"}, 
            {title: "下划线",icon: "underline",format: "underline"}, 
            {title: "删除线",icon: "strikethrough",format: "strikethrough"}, 
            {title: "上标",icon: "superscript",format: "superscript"}, 
            {title: "下标",icon: "subscript",format: "subscript"}, 
            {title: "代码",icon: "code",format: "code"}
        ]
    }, 
    {
        title: "块级样式",
        items: [
            {title: "段落",format: "p"}, 
            {title: "引用",format: "blockquote"}, 
            {title: "Div",format: "div"}, 
            {title: "预格式化",format: "pre"}
        ]
    }, 
    {
        title: "对齐方式",
        items: [
            {title: "左对齐",icon: "alignleft",format: "alignleft"}, 
            {title: "居中",icon: "aligncenter",format: "aligncenter"}, 
            {title: "右对齐",icon: "alignright",format: "alignright"}, 
            {title: "两端对齐",icon: "alignjustify",format: "alignjustify"}
        ]
    }, 
    {
        title: "字体",
        items: [
            {title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
            {title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
            {title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
            {title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
            {title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
            {title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
            {title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
            {title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
            {title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
            {title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
            {title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
            {title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
            {title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
        ]
    },
    {
        title: "字体大小",
        items: [
            {title: '8pt', inline:'span', styles: { fontSize: '12px', 'font-size': '8px' } },
            {title: '10pt', inline:'span', styles: { fontSize: '12px', 'font-size': '10px' } },
            {title: '12pt', inline:'span', styles: { fontSize: '12px', 'font-size': '12px' } },
            {title: '14pt', inline:'span', styles: { fontSize: '12px', 'font-size': '14px' } },
            {title: '16pt', inline:'span', styles: { fontSize: '12px', 'font-size': '16px' } }
        ]
    }
]

- peris

Answer 3

如果您还需要从默认设置中删除元素，您可以直接从Github上的源代码复制/粘贴它们，并根据您的需求进行调整：

tinymce.init({
    style_formats: [
        // Add the defaults from above
    ]
// ...
}

编辑：感谢@lucas-moeskops的评论，已更新URL :)

- Roberto

---

URL 更新：https://github.com/tinymce/tinymce/blob/master/src/core/src/main/js/ui/FormatControls.js - Lucas Moeskops