Editeur WYSIWYG CKEditor
Posté le Friday 27 April 2012 | Catégories : Javascript, (x)HTML, CMS
CKEditor permet de transformer une zone de texte (textarea) en un éditeur html WYSIWYG
La documentation est malheureusement un peu "lourde". Voici la procédure pour démarrer rapidement:
- Télécharger CKEditor, et le placer à la racine de votre site (obligatoire)
- Ajouter ckeditor.js
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script> - Ajouter une textarea:
<textarea name="ma-textarea" id="ma-textarea"></textarea> - Créer et configurer l'éditeur CKEditor. L'exemple ci-dessous correspond au screenshot. L'interface est en français, seuls certains boutons sont affichés, et seuls quelques formats (h2, h3, h4, p) sont disponibles dans le menu.
window.onload = function() {
CKEDITOR.replace('ma-textarea', {
language : 'fr',
format_tags : 'p;h2;h3;h4;h5;h6',
toolbar : 'Full',
toolbar_Full : [
{
name: 'document',
items : [ 'Source','-','Save','DocProps' ]
},
{
name: 'clipboard',
items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ]
},
{
name: 'editing',
items : [ 'Find','Replace','-','SelectAll']
},
{
name: 'tools',
items : [ 'Maximize', 'ShowBlocks','-','About' ]
},
'/',
{
name: 'styles',
items : [ 'Format' ]
},
{
name: 'basicstyles',
items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ]
},
{
name: 'paragraph',
items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ]
},
{
name: 'links',
items : [ 'Link','Unlink','Anchor' ]
},
{
name: 'insert',
items : [ 'Image', 'Flash','Table','HorizontalRule','SpecialChar' ]
}
]}
);
};
