javascript 内联 CKEditor 工具栏没有 h2 元素的对齐按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14782152/
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
Inline CKEditor toolbar has no alignment buttons for h2 elements
提问by Nick Zinger
(also on their demo page http://ckeditor.com/demo#inline)
（也在他们的演示页面http://ckeditor.com/demo#inline）
Why is this the case? Even if I take their inline sample (http://nightly.ckeditor.com/13-02-08-08-51/standard/samples/inlineall.html) and remove the js code for separate toolbars for heading blocks, I still don't get the alignment option.
为什么会这样？即使我采用他们的内联示例（http://nightly.ckeditor.com/13-02-08-08-51/standard/samples/inlineall.html）并删除标题块的单独工具栏的 js 代码，我仍然不要得到对齐选项。
I'd like to give users the option to align headings. What am I missing?
我想让用户可以选择对齐标题。我错过了什么？
I'm also not getting other "block" options like BulletedList, but that's less of an issue.
我也没有得到像 BulletedList 这样的其他“阻止”选项，但这不是问题。
UPDATE:To repeat the issue you need to have contenteditable="true" applied to a heading element. So, one fix is to wrap the heading in a div with the contenteditable="true". But this doesn't help my case.
更新：要重复这个问题，您需要将 contenteditable="true" 应用于标题元素。因此，一种解决方法是使用 contenteditable="true" 将标题包装在一个 div 中。但这对我的情况没有帮助。
回答by zessx
You need the Justify plugin since CKEditor 4.
从 CKEditor 4 开始，您需要 Justify 插件。
- Download Justify plugin here
- Paste it into ckeditor/plugins/
- Add the plugin to your ckeditor.
- 在此处下载 Justify 插件
- 将其粘贴到 ckeditor/plugins/
- 将插件添加到您的 ckeditor。
Here is the javascript code :
这是javascript代码：
$(function() {
CKEDITOR.config.extraPlugins = 'justify';
});
You don't have anything more to do, Justify plugin will be automatically added to the paragraphtoolbarGroup
您无需再做任何事情，Justify 插件会自动添加到paragraph工具栏组中
EDIT
编辑
By alignment, I thought you were talking about right|center|leftalign.
By alignment，我以为你在谈论right|center|left对齐。
Here, for h tags, we've got those groups :
在这里，对于 h 标签，我们有这些组：
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
editor.on( 'configLoaded', function() {
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
'forms,iframe,image,newpage,removeformat,scayt,' +
'smiley,specialchar,stylescombo,templates,wsc';
editor.config.toolbarGroups = [
{ name: 'editing', groups: [ 'basicstyles', 'links' ] },
{ name: 'undo' },
{ name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
{ name: 'about' }
];
});
}
['basicstyles', 'links', 'undo', 'selection', 'clipboard', 'about'], there's no aligngroup, simply add it.
['basicstyles', 'links', 'undo', 'selection', 'clipboard', 'about']，没有align组，只需添加它。
You don't event have to modify anything after a new CKEditor install, this group is already in the inline basic configuration
安装新的 CKEditor 后，您无需修改任何内容，该组已处于内联基本配置中
回答by Reinmar
It's impossible to enable align buttons on h2editable. CKEditor cannot modify editable container, because that change simply wouldn't be visible in data got from editor, because editor.getData()returns innerHTMLnot outerHTML.
在h2可编辑时启用对齐按钮是不可能的。CKEditor 无法修改可编辑容器，因为在从编辑器获取的数据中根本看不到该更改，因为editor.getData()返回的innerHTML不是outerHTML.
I'm also afraid that simple bypass doesn't exist. You can wrap h2with editable div, set enterMode=BR, remove buttons like format combo from toolbar, but that would be still incomplete solution, because user will be able to remove that h2, split it by pasting some block elements or leave it somehow and write outside it. This issues may be fixed, but I guess that you don't want to spend on this another month :).
我也担心简单的旁路不存在。你可以h2用 editable包裹div，设置 enterMode=BR，从工具栏中删除像格式组合这样的按钮，但这仍然是不完整的解决方案，因为用户将能够删除它h2，通过粘贴一些块元素来拆分它或以某种方式留下它并在外面写它。这个问题可能会解决，但我猜你不想再花一个月的时间:)。
回答by Nick Zinger
So, one year later I came back and handled it differently. I took the justify plugin, and made a copy of it that only works the elements with which the original plugin doesn't. I had to modify it to suit my needs, but commenting the following out was a start(plugin.js):
所以，一年后我回来并以不同的方式处理它。我使用了 justify 插件，并制作了它的副本，该副本仅适用于原始插件不适用的元素。我不得不修改它以满足我的需要，但评论以下内容是一个开始（plugin.js）：
if ( editor.blockless )
return;
I don't know how interesting this is, but if anyone needs it, leave a comment and I'll post the entire source. It basically adds the text-align css to the editor element, instead of the inner block elements.
我不知道这有多有趣，但如果有人需要它，请发表评论，我会发布整个来源。它基本上将 text-align css 添加到编辑器元素，而不是内部块元素。
回答by Anatolii Pazhyn
ensure you are using Full CKEditor version
确保您使用的是完整的 CKEditor 版本
