Vous êtes ici : Accueil » programmation » Installer un wysiwyg CKEditor dans ma balise textarea et ajouter le plugin Youtube et codesnippet
Pour télécharger CKEditor, il faut se rendre sur le site Internet https://ckeditor.com/ ou taper Ckeditor sur votre page de recherche. Cliquez en haut à gauche pour choisir la version souhaitée. Je vous propose de télécharger le plugin complet sur mon site: Cliquez içi pour télécharger un sript demo.
Dézipez le fichier téléchargé et placez le dans la racine de votre site.
Ajouter un wysiwyg CKEditor dans ma balise textarea et ajouter le plugin Youtube et codesnippet
<p>Contenu de la page :<br/>
<textarea name="contenu" id='contenu' class="form-conrol ckeditor" rows="10" cols="50" >
<?php if (!empty($_POST["contenu"])) {echo htmlentities($_POST["contenu"]);} else {echo $contenu;}?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contenu',{
height:300,
extraPlugins: 'codesnippet,youtube',
codeSnippet_theme: 'monokai_sublime'
});
</script></p>
Le script en dessous du </textarea> sert à activer le plugin codesnipet ainsi que le syntax Highlighting.
Copiez coller le code qui suit entre les balises <head> </head>
<!-- Include in head --->
<link href="ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
<script type="text/javascript" src="ckeditor/plugins/codesnippet/lib/highlight/highlight.min.js">;</script>
<script>hljs.highlightAll();</script>
<link href="ckeditor/plugins/codesnippet/lib/highlight.js/styles/monokai_sublime.css" rel="stylesheet">
Les scripts ci-dessus servent à afficher le codesnippet avec la syntaxe Highlighting
Comment ajouter le plugin youtube sur ckeditor?
Le plugin permet d'ajouter une vidéo youtube sur une page de votre site internet. Pour cela, il faut se rendre sur le site CKeditor.com, cliquez en haut à gauche et selectionnez la version souhaitée. Ensuite, une barre en haut s'offre à vous, vous devez cliquer sur le bouton Add-ons puis depuis votre barre de recherche, vous tapez simplement youtube. Un plugin YOUTUBE s'affiche, vous cliquez dessus et vous le télécharger.
Pour vérifier si le plugin est déjà installé par défaut, cliquez sur le fichier index.html de votre dossier
C:/wamp64/www/dossier_de_monsite/ckeditor/samples . une page web local devrait s'ouvrir si vous voyez le plugin youtube,
inutile de le rajouter. Si le plugin n'existe pas, nous allons vous montrer comment le télécharger, alors vous recuperez les fichiers précédemment téléchargés et vous le placerez dans le sous dossier plugin de votre dossier ckeditor.
Ensuite, rendez vous dans la racine ckeditor et ouvre le fichier config.js cherchez la variable { name: 'about' } et ajouter juste en dessous la varaible<< , { name: 'youtube' } >> précédée d'une virgule.
Ajoutez en dessous de la variable << config.removeButtons = 'Underline,Subscript,Superscript'; >>
config.extraPlugins = 'youtube';
Actualisez maintenant la page local : http://monsite/ckeditor/samples/index.html et vous verez que le plugin a été rajouté.
Vous pourrez inserer votre vidéo , vous pouvez faire de même pour le plugin cosnippet
Voici une petite vidéo
Les paramètres du fichier config.js sont les suivant
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
config.extraPlugins = 'imageuploader';
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'youtube';
config.youtube_width = '640';
config.youtube_height = '480';
config.youtube_responsive = true;
config.youtube_older = false;
config.youtube_related = true;
config.youtube_autoplay = false;
config.youtube_controls = true;
config.youtube_privacy = false;
};
Pour ajouter un extrait de code codesnippet