12

我有一个使用高级主题的 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

4

3 回答 3

18

这是一个按钮，它将使段落成为标题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');
        }
    });
},
于 2012-01-05T13:16:36.623 回答
5

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`
于 2013-03-07T17:05:47.567 回答
3

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

于 2013-08-28T07:32:55.377 回答