javascript 如何使用高级主题，简单布局将标题（h1，h2 ...）按钮添加到tinyMCE？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8742062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add heading (h1, h2...) buttons to tinyMCE with advanced theme, simple layout?
提问by Joe Green
I have a tinyMCE editor which uses the advanced theme. I am using the simple layout on that advanced theme so I can define my own toolbars on init() without having to get too deep into what tinyMCE is doing.
我有一个使用高级主题的 tinyMCE 编辑器。我在那个高级主题上使用了简单的布局，所以我可以在 init() 上定义我自己的工具栏，而不必太深入了解 tinyMCE 正在做什么。
The problem I have is that my editor doesn't have buttons for adding heading elements. I am desperately in need of this option but can find no practical advice on the subject.
我的问题是我的编辑器没有用于添加标题元素的按钮。我非常需要这个选项，但找不到关于这个问题的实用建议。
Everything I'm doing happens inside the tinymce.init() function, which I have pasted below:
我所做的一切都发生在 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
});
I am using the jquery plugin to access tinyMCE ( I'm sure this has nothing to do with my question but it explains the code ).
我正在使用 jquery 插件访问 tinyMCE（我确定这与我的问题无关，但它解释了代码）。
One idea I had was to use the theme_advanced_styles option but I don't think this will allow me to insert actual heading tags, but rather just style my markup with spans and whatnot to look like a header.
我的一个想法是使用 theme_advanced_styles 选项，但我认为这不允许我插入实际的标题标签，而只是用跨度和诸如此类的东西来设置我的标记样式，使其看起来不像标题。
Any ideas greatly appreciated. Cheers, J
任何想法都非常感谢。干杯，J
回答by Thariama
Here is a button which will make a heading1 out of a paragraph. Add 'formath1' to your buttonlist and add this to your tinymce init
这是一个按钮，它将使段落的标题1。将“format1”添加到您的按钮列表并将其添加到您的 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');
}
});
},
回答by Alastair
Adding headings and other elements with implicit styling can be added via formatselectwith theme: 'advanced'instances' theme_advanced_buttons_[1-3]list:
增加标题和其他元素与隐式造型可通过加入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
});
I superfluously-included the default values just for demonstration but the TinyMCE Wikistates that, since 2010-10-28this element list can be reduced or added to with elements including:
我多余地，包括只为示范，但默认值TinyMCE的维基，由于美国2010-10-28此元素列表可以减少或增加的元素，包括：
`p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp`
回答by Adrian Heine
I found the heading pluginto be just a perfect solution for this problem. The accepted answer works ok, too. The only issue we found is that the heading button does not appear active when your cursor is at a heading, thus making it non-intuitive that you can press the button again to revert the formatting. The heading plugin correctly displays an active state.
我发现标题插件只是这个问题的完美解决方案。接受的答案也可以。我们发现的唯一问题是，当您的光标位于标题上时，标题按钮不会显示为活动状态，因此您可以再次按下按钮以恢复格式变得不直观。标题插件正确显示活动状态。
