Galactic Civilizations 3
CKEditor - Personnalisation

CKEditor - Personnalisation

Catégorie: Javascript.
Posté par le 03/10/2011.
Dernière mise à jour le 03/05/2012.

<<Tutoriel précédent    Tutoriel suivant>>

Description

Ce tutoriel vous expliquera comment personnaliser votre éditeur de texte CKEditor.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en HTML. Ce tutoriel nécessite également que CKEditor soit installé correctement.

Nous allons considérer que le fichier contenant l'éditeur de texte (index.HTML) se trouve à la racine, que les fichiers de configurations de CKEditor se trouvent dans /CKEditor/ckeditor et que les modules se trouvent dans /CKEditor/modules.

Personnalisation de l’éditeur de texte

Personnalisation des fonctionnalités

En premier lieu, nous allons limiter les fonctionnalités de l’éditeur de texte. Pour ce faire créez un fichier dans le répertoire /CKEditor/modules/ et appelez le CKEDITOR_config.js.

CKEDITOR_config.js

var editor = CKEDITOR.replace( 'editeur',
{
toolbar : [
{ name: 'document',   items: [ 'NewPage', '-', 'Source', 'ShowBlocks', 'Preview', '-', 'Templates' ] },
{ name: 'clipboard',   items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing',   items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker',  'Scayt' ] },
'/',
{ 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: 'styles',   items: [ 'Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors',   items: [ 'TextColor', 'BGColor', 'Smiley', 'Image', 'SpecialChar'] },
{ name: 'insert',  items: ['Table','HorizontalRule' ] }
]
});

Vous pouvez modifier la configuration ci-dessus comme bon vous semble (ajouter ou retirer des fonctionnalités). Maintenant, il ne reste plus qu'à modifier le fichier index.html afin d’intégrer le fichier à la page web :

index.html

...
</form>
<script
type="text/javascript" src="CKEditor/modules/CKEDITOR_config.js"></script>
...

Application d’un style CSS

Nous allons créer une feuille de style CSS pour ensuite l’appliquer à notre éditeur. Pour ce faire, créez à la racine un fichier style.css.

style.css

h1{
  color:red;
  text-decoration:underline;
}
strong{
  color:blue;
}

Maintenant modifions le fichier /CKEditor/modules/CKEDITOR_config.js de la sorte :

CKEDITOR_config.js

...
],
contentsCss : 'style.css'
});

CKEditor style

Si cette feuille de style CSS est la même que celle utilisée pour le design de votre site, le texte que vous écrirez dans CKEditor aura la même mise en page que sur celui-ci.

Le prochain tutoriel vous expliquera comment personnaliser la liste des styles de votre éditeur de texte.

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent    Tutoriel suivant>>

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: CKEditor CSS editeur de texte html JavaScript personnaliser web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don