jQuery 如何自定义ckeditor的工具栏
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8077115/
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 do I customize ckeditor's toolbar
提问by user1019706
I am using ckeditor and want to customize the toolbar and text entering area as the gap between two sentences much. I am unable to find the toolbar.js or config.js where i should do the changes..
我正在使用ckeditor并希望将工具栏和文本输入区域自定义为两个句子之间的差距。我无法找到应该在其中进行更改的 toolbar.js 或 config.js。
how do i customize the above both
我如何自定义上述两个
回答by Damien Pirsy
Sonal's answer isn't wrong in itself, but DOESN'T REFER TO CKEDITOR.FCKeditorwas (and is) a good product, but it's now replaced by the new CKEditor, so using those config might not really work.
Sonal 的回答本身并没有错,但并未提及 CKEDITOR。FCKeditor曾经(并且现在)是一个很好的产品,但它现在被新的 CKEditor 所取代,因此使用这些配置可能真的不起作用。
As you can read in the docs here, you can pass custom configuration options by editing the config.js
file, which is located in the root folder of CKeditor (in a fresh installation..if you moved it act accordingly)
正如您可以在此处的文档中阅读的那样,您可以通过编辑config.js
位于 CKeditor 根文件夹中的文件来传递自定义配置选项(在全新安装中..如果您移动了它,请采取相应的行动)
The file already contains these lines:
该文件已包含以下几行:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
You can the find the WHOLE list of available configuration in their API DOCS. Coming to your problem, you can set what you want/don't want in your toolbars like this (check the toolbar§):
您可以在他们的API DOCS 中找到可用配置的完整列表。谈到您的问题,您可以像这样在工具栏中设置您想要/不想要的内容(检查工具栏§):
// This is actually the default value.
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
As for the lines being to high, I don't know if you want to change at rendering mode or if you want to change the default behaviour of isnerting a <p>
tag at each line break.
In the latter case, use
至于线条太高,我不知道您是要在渲染模式下更改还是要更改<p>
在每个换行符处插入标签的默认行为。在后一种情况下,使用
config.enterMode = CKEDITOR.ENTER_BR;
You can find a detailed explanation here (EnterMode §)
您可以在此处找到详细说明(EnterMode §)
If you want, you can also pass custom configsat runtime by using:
如果需要,您还可以在运行时使用以下命令传递自定义配置:
CKEDITOR.replace( '#textarea_id', { customConfig : '/myconfig.js' } );
Or this (to replace your custom with the fall-back of the default ones)
或者这个(用默认的后备替换你的自定义)
CKEDITOR.replace( '#textarea_id', { customConfig : '' } );
回答by Arjun Choudhary
<script type="text/javascript">
$(document).ready(function(){
CKEDITOR.replace(
'textarea_name',
{
toolbar: [
['Image','Flash']
],
},
{height: 550},{width:500}
);
});
</script>