如何自定义 ckeditor 的工具栏

Question

我正在使用ckeditor，想要自定义工具栏和文本输入区域，因为两个句子之间的间隙很大。 我无法找到应该进行更改的toolbar.js 或config.js。

我如何自定义上述两者

Answer 1

Sonal 的答案本身并没有错，但不引用 CKEDITOR。 FCKeditor 曾经是（现在也是）一个很好的产品，但它现在被新的 CKEditor 取代了，所以使用这些配置可能不会真正起作用。

正如您可以在此处的文档中阅读的那样a>，您可以通过编辑 config.js 来传递自定义配置选项，该文件位于 CKeditor 的根文件夹中（在全新安装中......如果您将其移动到相应地）

该文件已包含这些行：

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

您可以在其 API 文档。谈到您的问题，您可以像这样在工具栏中设置您想要/不想要的内容（检查 toolbar §):

// 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' ] }
];

至于线太高，我不知道你是否想在渲染模式下改变，或者是否想改变 isnerting 的默认行为每个换行符处的

标记。
在后一种情况下，使用

config.enterMode = CKEDITOR.ENTER_BR;

您可以在此处找到详细说明（EnterMode § )

如果您愿意，您还可以在运行时传递自定义配置，方法是使用：

CKEDITOR.replace( '#textarea_id', { customConfig : '/myconfig.js' } );

或者这个（用默认配置的后备替换您的自定义配置）

CKEDITOR.replace( '#textarea_id', { customConfig : '' } );

Answer 2

<script type="text/javascript">
    $(document).ready(function(){
        CKEDITOR.replace(
            'textarea_name',
            {
                toolbar: [
                    ['Image','Flash']
                ],
            },
            {height: 550},{width:500}
        );
    });
</script>

Answer 3

这是最简单的例子

CKEDITOR.replace('textarea_id', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike', 'TextColor', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
    ],
    height: 100,
    skin: 'v2',
    enterMode: 1,
    shiftEnterMode: 2
});

Answer 4

它对我有用

CKEDITOR.replace('article', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike', 'TextColor', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
    ]
});