如何向tinyMCE添加标题（h1，h2...）按钮，具有高级主题，简单布局？

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 选项，但我不认为这将允许我插入实际的标题标签，而只是使用 span 和其他东西来设置我的标记的样式，使其看起来像标题。

任何想法都非常感激。 干杯， J

Answer 1

这是一个可以从段落中创建标题的按钮。将“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 Wiki 声明，自 2010-10-28 可以减少或添加此元素列表，元素包括：

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

Answer 3

我发现 标题插件 是解决这个问题的完美解决方案。接受的答案也可以。我们发现的唯一问题是，当光标位于标题时，标题按钮不会显示为活动状态，因此再次按下该按钮以恢复格式变得不直观。标题插件正确显示活动状态。