CKEditor comme éditeur WYSIWYG

par Administrateur :: il y a 8 mois , Mise à jour :: il y a 7 mois

PcSoft à intégré un editeur WYSIWYG dans la liste des champs de saisie, cependant, ce dernier ne permet pas d'étendre ou de modifier le style et code généré, il est basique pour par exemple répondre à des messages ou rédiger de simple message un peu stylé. C'est pourquoi il est parfois néssessaire de remplacer ce derrnier par un editeur plus puissant comme Ckeditor. je vous invite à proposer d'autre éditeur open source via les commentaires en bas de ce poste.

Ckeditor intégration c'est parti.

Nous allons voir comment intégrer l'éditeur CKEditor comme éditeur WYSIWYG à WebDev.

Première étape, récuperer la version 4 directement sur le site https://ckeditor.com/

Décompacter l'archive dans votre répertoire du site afin d'avoir la même structure que la capture ci-dessous :

Une fois cela en place, il faut charger le javascript Ckeditor dans la description de la page :

Note : Comme vous pouvez le voir, je charge un CSS, celui-ci ne fait pas parti de Ckeditor, c'est un CSS de surchage afin de styliser le rendu perssonnel.

Maintenant, nous allons créer deux champs, SAI_Contenu et SAI_Ckeditor, pourquoi ?  Parce que SAI_Ckeditor va recevoir l'application et SAI_Contenu va permettre de récuperer le code généré et le sauvegarder.

Passer la souris au dessus du champs SAI_Ckeditor et noter l'alias (dans mon appli au moment de la rédaction de l'article, "A1"), puis entrez dans la description de la cellule, direction l'onglet "Avancé" et ajouter les lignes comme la capture, adapter votre alias :

A cette instant, effectué un GO et vérifier le chargement de Ckeditor.

A présent, on va créer une procédure navigateur que j'appel RestoreArticle(SAI_Ckeditor) avec comme vous pouvez le voir, le passage en paramètre du champs SAI_Ckeditor, cette procédure est appelé dans le code navigateur de votre page dans la partie chargement, cela permet de charger un document précédement créer si il est en modification.

PROCÉDURE RestoreArticle(sValeurHTML est une chaîne)

jsRestoreArticle(sValeurHTML)

Ensuite on crée une procédure, cette fois de type JavaScript qui est appelée par la procédure ci-dessus.

function jsRestoreArticle(sValeur){
	return CKEDITOR.instances.A1.setData(sValeur);
}

Même sénario pour récupérer le HTML que Ckeditor à généré, on crée la procédure JavaScript jsRécupèreValeur() qui va nous retourner le HTML dans la procédure RécupèreValeur()

puis on crée la procédure RécupèreValeur()

PROCÉDURE RécupèreValeur() : chaîne

sValeurHTML est une chaîne = jsRecupereValeur()

RENVOYER sValeurHTML

Et enfin, dans le code d'un bouton dans le code navigateur, on ajoute simplement la ligne suivante :

SAI_Ckeditor = RécupèreValeur()

Il ne vous reste que le code hajoute / hmodifie à mettre en place et vous voilà paré pour créer un forck de WordPress :D

 

0 commentaire
2 + 5 =

@Copyright 2012 - 2020 MJMS Informatique et services

Site web réalisé avec WebDev