如何使用高级主题,简单布局将标题(h1,h2 ...)按钮添加到tinyMCE？

Question

我有一个使用高级主题的tinyMCE编辑器.我在高级主题上使用简单布局,因此我可以在init()上定义自己的工具栏,而不必深入了解tinyMCE正在做什么.

我遇到的问题是我的编辑器没有添加标题元素的按钮.我迫切需要这个选项,但没有找到关于这个问题的实用建议.

我正在做的一切都发生在tinymce.init()函数中,我在下面粘贴了它:

$("textarea.tinymce").not(".simple").tinymce({
            script_url : "/_lib/script/tiny_mce/tiny_mce.js",
            plugins : "wordcount,paste,spellchecker,table",
            theme : "advanced",
            theme_advanced_layout_manager : "SimpleLayout",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_toolbar_location : "top",
            theme_advanced_buttons1
                : "bold,italic,underline,strikethrough,|,sub,sup,|,charmap,|,forecolorpicker",
            theme_advanced_buttons2
                : "undo,redo,|,cut,copy,pastetext,pasteword,|,link,unlink,anchor,|,image,code",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_align : "left",
            height : 480,
            apply_source_formatting : false,
            convert_fonts_to_spans : true
        });

我正在使用jquery插件访问tinyMCE(我确定这与我的问题无关,但它解释了代码).

我有一个想法是使用theme_advanced_styles选项,但我不认为这将允许我插入实际的标题标签,而只是设置我的标记与跨度和什么看起来像标题.

任何想法都非常感激.干杯,J

Answer 1

这是一个按钮,它将在段落中生成一个heading1.将'formath1'添加到您的按钮列表并将其添加到您的tinymce init

setup : function(ed){
    ed.addButton('formath1', // name to add to toolbar button list
    {
        title : 'Make h1', // tooltip text seen on mouseover
        image : 'http://myserver/ma_button_image.png',
        onclick : function()
        {
        ed.execCommand('FormatBlock', false, 'h1');
        }
    });
},

Answer 2

可以formatselect使用theme: 'advanced'实例theme_advanced_buttons_[1-3]列表添加带有隐式样式的标题和其他元素:

tinyMCE.init({
    mode : 'textareas',
    theme : 'advanced',
    editor_selector : 'mceAdvanced',
    plugins: 'autolink,inlinepopups',
    theme_advanced_blockformats: 'p,address,pre,h1,h2,h3,h4,h5,h6',
    theme_advanced_buttons1: 'formatselect,|,bold,italic,removeformat',
    theme_advanced_buttons2: '',
    theme_advanced_buttons3: '',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_statusbar_location: 'bottom',
    theme_advanced_resizing: true,
    theme_advanced_resize_horizontal: false,
    relative_urls: false
});

我多余地,包括默认值只为示范,但TinyMCE的维基指出,由于2010-10-28可以减少或增加与元素,包括该元素列表:

 `p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp`