Comment créer un éditeur HTML application
Cette documentation est archivé et n'est pas maintenu.
Ce tutoriel décrit comment utiliser les fonctionnalités trouvées dans Microsoft Internet Explorer 5.5 ou version ultérieure pour créer une application éditeur HTML. L'application que vous créez dans ce tutoriel contient une région modifiable où les utilisateurs peuvent taper et formater du texte en utilisant toutes les commandes de formatage standard. Par exemple, les utilisateurs peuvent faire le texte en gras ou en italique, changer la taille de la police, et faire des listes à puces ou numérotées. Une barre d'outils contient les boutons de mise en forme, des boutons pour les fichiers d'ouverture et l'enregistrement et la liste déroulante des zones de liste pour les sélections de mise en forme de polices et de bloc. Un menu permet d'accéder à la fonctionnalité alternative fournie par la barre d'outils. Comme d'Internet Explorer 6, vous pouvez également utiliser l'objet HtmlDlgSafeHelper pour changer le visage ou la couleur de la police.
Avec cette application HTML Editor, les utilisateurs peuvent créer des documents HTML et les enregistrer sur le disque en format HTML ou texte. Si enregistré en tant que fichier .htm, les documents sont visibles dans Windows Internet Explorer ou dans l'application Éditeur HTML. Les fichiers enregistrés txt peuvent être consultés dans un éditeur de texte.
Ce tutoriel montre comment effectuer les opérations suivantes:
- Créer et utiliser des régions modifiables avec l'attribut contenteditable.
- Utilisez le formatage et la commande Identifiers méthode execCommand.
- Utilisez le comportement des éléments de la barre d'outils Internet Explorer. ainsi qu'un comportement de l'élément de menu et un HTML + TIME (Timed Extensions multimédia interactif) Comportement TIME2 qui affiche un écran d'accueil.
- Utilisez l'objet HtmlDlgSafeHelper pour accéder aux polices et les formats de bloc sur la machine d'un utilisateur, et pour afficher la boîte de dialogue de couleur. Internet Explorer 6 introduit l'objet HtmlDlgSafeHelper.
- Créer une application HTML (HTA).
Exigences et dépendances
Les développeurs qui veulent créer un éditeur HTML comme décrit dans ce tutoriel devrait être familier avec Microsoft JScript et HTML dynamique (DHTML). La connaissance des comportements d'élément est également utile.
Le contrôle CommonDialog utilisé dans ce tutoriel pour afficher les boîtes de dialogue Ouvrir et Enregistrer sous est un contrôle sous licence qui nécessite une licence de conception valide. Vous pouvez exécuter l'exemple, mais vous ne pouvez pas créer cette fonctionnalité sauf si vous avez Microsoft Visual Basic ou Microsoft Visual InterDev installé sur votre machine de développement. Pour plus d'informations, consultez COMMENT FAIRE: Configuration Internet Download pour Comdlg32.ocx.
Vous pouvez utiliser l'environnement de développement HTML, tels que Visual InterDev, pour compléter ce tutoriel. Visual InterDev est un bon choix car il offre une licence de conception pour le contrôle CommonDialog.
La plupart de la technologie décrite dans ce tutoriel est pris en charge par Internet Explorer 5.5 ou version ultérieure, à l'exception notable de l'objet HtmlDlgSafeHelper, ce qui nécessite Internet Explorer 6.
Ce tutoriel nécessite un certain nombre de fichiers dépendants afin de fonctionner correctement, y compris les icônes pour les boutons de la barre d'outils, et deux composants HTML (CTH). Tous ces fichiers sont inclus dans l'échantillon HTML Editor téléchargement. Avant de commencer le tutoriel, vous devez télécharger l'exemple de l'éditeur HTML. Suivez les étapes sur la page de téléchargement avant de continuer aux étapes de mise en œuvre.
Étapes de mise en œuvre
Cette section décrit, étape par étape, comment créer un éditeur HTML WYSIWYG HTA.
Étape 1: Créez le fichier HTML
Le fichier HTML que vous créez dans cette étape sert de base pour les fonctionnalités que vous ajoutez que le tutoriel progresse.
- Créez un fichier HTML. Ce fichier doit contenir les balises HTML standard, y compris HTML. TÊTE. et le corps. Vous pouvez également ajouter un élément TITLE dans la section HEAD si vous le souhaitez. L'exemple de code suivant montre à quoi doit ressembler le code HTML.
Deux éléments de barre d'outils sont utilisés pour qu'ils affichent sur deux lignes distinctes.
L'exemple suivant montre l'élément oToolbarToolbar.
Remarque L'ordre des éléments dans le code source HTML dicte l'ordre des éléments affichés sur la page rendu. Veillez à ajouter chaque élément à sa place pour assurer un rendu correct.
Étape 3: Créer le texte Fonctions de formatage
Les fonctions créées dans cette étape sont des éléments toolbarbutton créés dans la dernière étape. Ceux-ci comprennent une fonction qui exécute la plupart des commandes de formatage utilisées dans cet exemple ainsi que des fonctions pour changer la propriété fontSize et de modifier l'alignement du texte.
Vous pouvez également créer l'objet HtmlDlgSafeHelper et écrire des fonctions qui utilisent cet objet pour afficher la boîte de dialogue de couleur et changer le ForeColor ou BackColor. basé sur la sélection de l'utilisateur. Vous écrivez également des fonctions qui utilisent l'objet HtmlDlgSafeHelper pour récupérer un tableau de polices et un éventail de formats de blocs installés sur le système de l'utilisateur, remplir des éléments de ToolbarDropDownList sur la ToolbarButton avec ces tableaux, et changer la police ou le format de la sélection dans la région modifiable basé sur la sélection de l'utilisateur.
Créer toutes les fonctions de cette étape dans le bloc SCRIPT.- Créer une fonction appelée callFormatting avec un paramètre d'entrée unique qui appelle la méthode execCommand. Le paramètre passe Identifiants de commande appropriée à la fonction basée sur laquelle ToolbarButton est cliqué.