如何自定义ckeditor的工具栏 [英] How do I customize ckeditor's toolbar

问题描述

我使用ckeditor，想要自定义工具栏和文本输入区作为两个句子之间的差距。
我找不到toolbar.js或config.js我应该做的更改..

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..

如何自定义上述两个

推荐答案

Sonal的回答本身并不错，但不参考CKEDITOR。 FCKeditor 是（和）是一个很好的产品，但它现在替换为新的CKEditor，所以使用这些配置可能不工作。

Sonal's answer isn't wrong in itself, but DOESN'T REFER TO CKEDITOR. FCKeditor was (and is) a good product, but it's now replaced by the new CKEditor, so using those config might not really work.

在文档 此处 中，您可以传递自定义配置选项通过编辑位于CKeditor根文件夹中的 config.js 文件（在新安装中...如果您移动它，则执行相应操作）

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)

文件已包含以下行：

CKEDITOR.editorConfig = function( config )
{
        // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
};

您可以在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' ] }
];

对于行为高，我不知道你是否想要在渲染模式或者如果要更改每个换行符处的< p> 标记的默认行为。
在后一种情况下，使用

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

config.enterMode = CKEDITOR.ENTER_BR;

您可以找到详细说明 here（EnterMode§）

如果愿意，您还可以通过 custom configs 在运行时使用：

If you want, you can also pass custom configs at 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 : '' } );

这篇关于如何自定义ckeditor的工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！