comment afficher 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 simplement une barre d'outils de base. Ici j'ai trouvé la page d'échantillon pour montrer une barre d'outils de base mais pas obtenir de la documentation comment montrer que.

http://ckeditor.com/demo

Vérifiez l'onglet personnalisé de la barre d'outils et voyez le premier échantillon qui a un type très basique de barre d'outils, Comment puis-je le montrer?

voici mon code

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

je veux afficher la barre d'outils de base pour toutes les instances de ckeditor de mon site web.

15
demandé sur spons 2012-11-21 21:43:51

4 réponses

si vous utilisez Basic il affichera toute la barre D'Outils, alors utilisez ceci

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']
] ;
46
répondu Monzur 2013-04-23 18:01:42

si vous regroupez les deux réponses précédentes, vous aurez la solution complète. La première chose est d'ajouter les options dans la 'config.js fichier dans ckeditor' dossier.

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

puis Ajouter 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 être tout ce dont vous avez besoin, et évidemment n'oubliez pas d'appeler le 'ckeditor.le fichier de js dans votre fichier html.

17
répondu Clinton Dobbs 2015-08-10 08:06:25

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 au id de l'éditeur sur votre site web.

liens Intéressants:

13
répondu Smamatti 2012-11-21 17:57:01

MISE À JOUR POUR 2018:

Ceux utiles tykes CKEditor sont seulement allés et créé un éditeur en ligne que vous pouvez personnaliser à votre contenu de cœur! C'est une nightly build donc une URL statique est d'aucune utilité pour vous naviguer à partir de http://nightly.ckeditor.com à la base configurateur option, puis sélectionnez l'option CONFIGURATEUR DE BARRE D'OUTILS bouton.

copier et coller le contenu généré dans le paquet ivoryckeditor config.fichier js (dossier Web) et elle devrait fonctionner sans besoin d'autres modifications de fichiers.

j'ai construit la mise en page simple suivante pour montrer les opérations de couper & 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
répondu Tim Tyler 2018-01-16 01:41:52