Une brève analyse des principes de mise en œuvre des compétences en ligne WYSIWYG HTML editor_javascript

De nos jours, le développement de sites Web favorise de plus en plus l'expérience utilisateur, et il existe de plus en plus d'outils pour offrir plus de commodité aux utilisateurs, et l'éditeur de contenu HTML en ligne doit être considéré comme l'un des « plus anciens ». Ceux dotés de fonctions simples peuvent fournir aux utilisateurs un contrôle du style de texte, tel que la couleur du texte, la taille de la police, etc., tandis que ceux dotés de fonctions complexes peuvent même fournir des fonctions puissantes similaires à Word. Bien qu'il existe désormais de nombreux éditeurs open source, peu d'entre eux sont vraiment faciles à utiliser, leur travail d'amélioration est donc toujours en cours.

La plupart des éditeurs sur Internet ont aujourd'hui des fonctions très puissantes, elles nécessitent également beaucoup de configuration lors de leur utilisation. Bien entendu, le code sera naturellement "gonflé". Si nous n’avons pas besoin d’un éditeur aussi puissant, nous pouvons en implémenter un nous-mêmes, car le code n’est pas compliqué. Ce qui suit est un peu d'expérience personnelle, à titre de référence uniquement (en prenant ExtJS HTMLEditor comme exemple).

1. Initialisation. Une fois le chargement de la page terminé, ajoutez un IFrame à la page (facultatif). Ce qu'il faut noter ici, c'est que pour déterminer l'état de la page, attendez que la page soit complètement chargée avant de procéder pour éviter des erreurs dans lesquelles certains éléments ne peuvent pas être trouvés.

2. Ouvrez la fonction d'édition. Rendre l'IFrame modifiable (le code ci-dessous provient de l'éditeur HTML d'ExtJS) :

Copier le code Le code est le suivant :

// Récupère l'objet fenêtre de l'iframe
getWin : fonction(){
           return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//Récupérer l'objet document de l'iframe
getDoc : fonction(){
           return Ext.isIE ? this.getWin().document : (this.iframe.contentDocument || this.getWin().document);
},

//Ouvrez l'objet document et écrivez-y le contenu d'initialisation pour qu'il soit compatible avec FireFox
doc = this.getDoc();
doc.open();
doc.write('');
//Ouvrir le mode d'édition des objets du document
doc.designMode = "on";
doc.close();

De cette façon, vous pouvez écrire du contenu dans cet éditeur simple.

3. Récupérez le contenu de l'éditeur, le code est le suivant :

Copier le code Le code est le suivant :

//Récupère l'objet corps de l'éditeur
var corps = doc.body || doc.documentElement;
//Récupérer le contenu de l'éditeur
var content = corps.innerHTML;
//Traitement du contenu, comme le remplacement de certains caractères spéciaux, etc.
//Un peu de code

//Retourner le contenu
renvoyer le contenu ;

4. Ajoutez des paramètres de style. Bien que l'éditeur ci-dessus implémente des fonctions de base, il est vraiment trop simple. Certaines implémentations de style simple devraient être ajoutées. La méthode execCommand du document rend cette idée possible.

Copier le code Le code est le suivant :

//Méthode de commande d'exécution uniforme
fonction execCmd(cmd, valeur){
//Pour obtenir l'objet doc, référez-vous au code ci-dessus
//Appelez la méthode execCommand pour exécuter la commande
doc.execCommand(cmd, false, value === non défini ? null : value);
};

//Changer la police sélectionnée en gras, Ctrl-B
execCmd('gras');
//Souligner, Ctrl-U
execCmd('soulignement');
// Passage en italique, Ctrl-I
execCmd('italique');
//Définissez la couleur du texte
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : couleur);
//Insérer un élément de contenu au niveau du curseur
fonction insertAtCursor(text){
//Pour obtenir l'objet win, référez-vous au code ci-dessus
si(Ext.isIE){
     win.focus();
var r = doc.selection.createRange();
Si(r){
         r.collapse(true);
          r.pasteHTML(text);                          }sinon si(Ext.isGecko || Ext.isOpera){
     win.focus();
​​ execCmd('InsertHTML', texte);
}sinon si(Ext.isSafari){
​​ execCmd('InsertText', texte);
>
>

5. Allez plus loin. Vous pouvez maintenant modifier le style. Si l'éditeur dispose d'une barre d'outils (cela devrait être inévitable), nous souhaitons également que les boutons de la barre d'outils soient automatiquement mis en surbrillance ou affichés normalement en fonction du style de la position du curseur. La méthode queryCommandState() du document permet de concrétiser cette idée.

Copier le code Le code est le suivant :

//Pour obtenir l'objet doc, référez-vous au côté opposé
//Si le curseur est en gras
var isBold = doc.queryCommandState('bold');
si(isBold){
//Changer le style du bouton Gras
>
//Bien sûr, le code ci-dessus peut être fusionné, ce n'est qu'un indice

//Souligner
doc.queryCommandState('underline');
//italique
doc.queryCommandState('italic');

Cet article ne fournit qu'une idée simple pour implémenter l'éditeur, et certains codes peuvent être utilisés directement. Il est recommandé aux amis qui souhaitent implémenter leur propre éditeur de se référer au code HTMLEditor dans ExtJS, qui est simple et clair, et peut être étendu dessus.

Un dernier rappel : veillez à faire attention aux problèmes de compatibilité des navigateurs et n'attendez pas la fin pour tester la compatibilité. Pour une si grande quantité de code JavaScript, les ajustements sont plus pénibles.