Discussion

Vous êtes ici : Accueil » programmation » Installer un wysiwyg CKEditor dans ma balise textarea et ajouter le plugin Youtube et codesnippet

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


Date de publication:  26/11/2020 par admin10

Dernière modification: le 14/04/2021 20:06:58 par admin10

Chargement...

Les cours de PHP sur toutes les facettes.

Les cours de PHP sur toutes les facettes.

Page précédent 200 201 202 203 205 206 207 208 209 Page suivante

Laisser un commentaire





gmty57


zack77 Mercredi 23 Juin 2021

Aucun commentaire pour le moment concernant le sujet « Installer un wysiwyg CKEditor dans ma balise textarea et ajouter le plugin Youtube et codesnippet »!