web-dev-qa-db-fra.com

comment montrer ckeditor avec la barre d'outils de base

Je montre un ckeditor dans ma page Web en utilisant class="ckeditor". Comment puis-je configurer mon ckeditor pour afficher uniquement une barre d'outils de base. Ici, j’ai trouvé l’exemple de page pour montrer une barre d’outils de base mais ne pas savoir comment le montrer.

http://ckeditor.com/demo

consultez l'onglet de la barre d'outils personnalisée et voyez le premier exemple contenant un type de base de barre d'outils. Comment puis-je l'afficher?

voici mon code

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

Je souhaite afficher une barre d’outils de base pour toutes les instances de ckeditor de mon site Web.

ckeditor
15
coure2011

Si vous utilisez Basic, toutes les barres d’outils seront affichées.

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']
] ;
47
Monzur

Si vous mettez ensemble les deux réponses précédentes, vous aurez la solution complète. La première chose à faire est d’ajouter les options dans le fichier 'config.js' de votre dossier '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']
        ];
};

Ajoutez ensuite l'appel à la configuration 'Basic' dans le fichier HTML.

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

Cela devrait suffire et il ne faut évidemment pas oublier d'appeler le fichier 'ckeditor.js' dans votre fichier html.

17
Clinton Dobbs

Vous devez définir une configuration spécifique au lancement.

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

description fait référence à la id de l'éditeur sur votre site Web.

Liens intéressants: 

13
Smamatti

MIS À JOUR POUR 2018:

Ces outils utiles sur CKEditor ont seulement créé un éditeur en ligne que vous pouvez personnaliser à votre guise! C'est une construction nocturne, de sorte qu'une URL statique ne vous est d'aucune utilité - naviguez de http://nightly.ckeditor.com vers l'option de configuration de base, puis sélectionnez le bouton TOOLBAR CONFIGURATOR.

Copiez et collez le contenu généré dans le fichier config.js (dossier Web) du groupe ivoryckeditor et cela devrait fonctionner sans qu'il soit nécessaire de modifier le fichier.

J'ai construit la disposition simple suivante pour montrer les opérations de copier/coller et:

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';
};
0
Tim Tyler