自定义 tinymce 4.0.5 styleselect 工具栏菜单 [英] Customize tinymce 4.0.5 styleselect toolbar menu

问题描述

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

我以如下方式初始化了一个 TinyMCE 4.0.5:

tinymce.init({language_url : '/webobbywebapp/js/tiny_mce/language/es.js',选择器:'textarea'，插件:图像，链接，打印"，工具栏:styleselect | undo redo | removeformat | 粗斜体下划线 | aligncenter alignjustify | Bullist numlist outdent indent | 链接 | 打印 | fontselect fontsizeselect"，菜单栏:假，状态栏:真，调整大小:真});

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

现在我正在尝试使用以下代码修改 styleselect 菜单，但 fontselect 和 fontsizeselect 显示为禁用

<前>,style_formats:[{title: "标题_",项目:[{title: "Header 1",format: "h1"}, {title: "Header 2",format: "h2"}, {title: "Header 3",format: "h3"}, {title: "Header 4",format: "h4"}, {title: "Header 5",format: "h5"}, {title: "Header 6",format: "h6"}]},{title: "_Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},{title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "上标",格式:"上标"},{标题:"下标",图标:"下标",格式:"下标"},{标题:"代码",图标:"代码",格式:"代码"}]},{title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},{title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"},{title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},{title: "Classes", items: 'fontsizeselect'},{title: "dddClasses", items: 'fontselect'}]

解决方案

最后，添加以下代码即可解决问题:

<前>,style_formats:[{title: "标题",项目: [{title: "Header 1",format: "h1"},{title: "Header 2",format: "h2"},{title: "Header 3",format: "h3"},{title: "Header 4",format: "h4"},{title: "Header 5",format: "h5"},{标题:标题6"，格式:h6"}]},{title: "内嵌",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},{title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "上标",格式:"上标"},{标题:"下标",图标:"下标",格式:"下标"},{标题:"代码",图标:"代码",格式:"代码"}]},{title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},{title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"},{title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},{title: "字体家族",项目: [{title: 'Arial', inline: 'span', 样式: { 'font-family':'arial'}},{title: 'Book Antiqua', inline: 'span', 样式: { 'font-family':'book antiqua'}},{title: 'Comic Sans MS', inline: 'span', 样式: { 'font-family':'comic sans ms,sans-serif'}},{title: 'Courier New', inline: 'span', 样式: { 'font-family':'courier new,courier'}},{title: 'Georgia', inline: 'span', 样式: { 'font-family':'georgia,palatino'}},{title: 'Helvetica', inline: 'span', 样式: { 'font-family':'helvetica'}},{title: 'Impact', inline: 'span', 样式: { 'font-family':'impact,chicago'}},{title: 'Open Sans', inline: 'span', 样式: { 'font-family':'Open Sans'}},{title: 'Symbol', inline: 'span', 样式: { 'font-family':'symbol'}},{title: 'Tahoma', inline: 'span', 样式: { 'font-family':'tahoma'}},{title: 'Terminal', inline: 'span', 样式: { 'font-family':'terminal,monaco'}},{title: 'Times New Roman', inline: 'span', 样式: { 'font-family':'times new roman,times'}},{title: 'Verdana', inline: 'span', 样式: { 'font-family':'Verdana'}}]},{标题:字体大小"，项目:[{title: '8pt', inline:'span', 样式: { fontSize: '12px', 'font-size': '8px' } },{title: '10pt', inline:'span', 样式: { fontSize: '12px', 'font-size': '10px' } },{title: '12pt', inline:'span', 样式: { fontSize: '12px', 'font-size': '12px' } },{title: '14pt', inline:'span', 样式: { fontSize: '12px', 'font-size': '14px' } },{title: '16pt', inline:'span', 样式: { fontSize: '12px', 'font-size': '16px' } }]}]

I'm trying to customize the default styleselect toolbar menu so I can add to it a custom menu element. The idea is to place font size as a styleselect submenu:

I initialized a TinyMCE 4.0.5 in the following way:

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
});

As I'm not able to find how to customize the default styleselect menu I'm also trying to create a complete new menu where i can add font size control. But I don't want to show any toolbar, I want a single menu bar.

EDIT: Right now I'm trying to modify the styleselect menu using the following code, but fontselect and fontsizeselect appear disabled

,style_formats:
[{
    title: "Headers_",
    items: [{title: "Header 1",format: "h1"}, {title: "Header 2",format: "h2"}, {title: "Header 3",format: "h3"}, {title: "Header 4",format: "h4"}, {title: "Header 5",format: "h5"}, {title: "Header 6",format: "h6"}]
}, 
            {title: "_Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"}, 
            {title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]}, 
            {title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]}, 
            {title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]}, 
            {title: "Classes", items: 'fontsizeselect'},
    {title: "dddClasses", items: 'fontselect'
}]

解决方案

Finally, adding the following code did the trick:

    ,style_formats:[
         {
           title: "Headers",
           items: [
             {title: "Header 1",format: "h1"},
             {title: "Header 2",format: "h2"},
             {title: "Header 3",format: "h3"},
             {title: "Header 4",format: "h4"},
             {title: "Header 5",format: "h5"},
             {title: "Header 6",format: "h6"}
           ]
        },
        {
             title: "Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"}, 
            {title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]}, 
            {title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]}, 
            {title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]}, 
            {
                title: "Font Family",
                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: "Font Size", 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' } }
]
}]

这篇关于自定义 tinymce 4.0.5 styleselect 工具栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！