Как показать ckeditor с базовой панелью инструментов

Я показываю ckeditor на своей веб-странице, используя class="ckeditor" способ. Как настроить мой ckeditor, чтобы просто показать базовую панель инструментов. Здесь я нашел образец страницы для показа базовой панели инструментов, но не получал от документации, как это показать.

http://ckeditor.com/demo

проверьте вкладку "Пользовательская панель инструментов" и посмотрите первый образец, который имеет очень простой тип панели инструментов, как я могу показать его?

вот мой код

<body>
    <textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>

Я хочу показать базовую панель инструментов для всех экземпляров ckeditor моего сайта.

Ответ 1

Если вы используете Basic, он отобразит всю панель инструментов, поэтому используйте этот

CKEDITOR.config.toolbar = [
   ['Styles','Format','Font','FontSize'],
   '/',
   ['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
   '/',
   ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
   ['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;

Ответ 2

Если вы поместите два предыдущих ответа вместе, у вас будет полное решение. Прежде всего, нужно добавить параметры в файл 'config.js' в папку 'ckeditor'.

 CKEDITOR.editorConfig = function( config ) {
    config.skin = 'bootstrapck';
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    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','Iframe' ] },
            '/',
            { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
            { name: 'colors', items : [ 'TextColor','BGColor' ] },
            { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
        ];

    config.toolbar_Basic =
        [
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
        ];
};

Затем добавьте вызов в конфигурацию "Basic" в файле HTML.

            <textarea id="ckeditor"></textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'ckeditor',
                        {
                            toolbar : 'Basic', /* this does the magic */
                            uiColor : '#9AB8F3'
                        });
            </script>

Это должно быть все, что вам нужно, и, очевидно, не забудьте вызвать файл 'ckeditor.js' в вашем html файле.

Ответ 3

Вам нужно установить определенную конфигурацию при запуске.

<script type="text/javascript">
    CKEDITOR.replace( 'description',
    {
        toolbar : 'Basic', /* this does the magic */
        uiColor : '#9AB8F3'
    });
</script>

description ссылается на id редактора на вашем веб-сайте.

Интересные ссылки:

Ответ 4

ОБНОВЛЕНО НА 2018:

Те полезные тики в CKEditor только ушли и создали онлайн-редактор, который вы можете настроить в своем сердце! Это ночная сборка, поэтому статический URL-адрес вам бесполезен - перейдите из http://nightly.ckeditor.com в базовый вариант конфигуратора, затем выберите Кнопка CONFIGURATOR TOOLBAR.

Скопируйте и вставьте сгенерированный контент в файл config.js пакета ivoryckeditor (веб-папку), и он должен работать без каких-либо изменений в файле.

Я построил следующий простой макет, чтобы показать операции вырезания и вставки:

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
    { name: 'forms', groups: [ 'forms' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] }
];

config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};

Ответ 5

Я также застрял в этой проблеме, но после стольких испытаний я получил решение своей проблемы:

используйте это в ckeditor.rb: -

Ckeditor.setup do | config | требует "ckeditor/orm/active_record" config.cdn_url = "//cdn.ckeditor.com/4.12.1/full/ckeditor.js" конец

вы также можете перейти на базовый, стандартный или классический в соответствии с вашими требованиями

удачи