TinyEditor l'éditeur HTML WYSIWYG simple et facile à utiliser

Il y a quelques jours, je vous ai présenté un éditeur XHTML domestique. Aujourd'hui, je veux vous recommander TinyEditor. Il s'agit d'un éditeur HTML WYSIWYG simple et facile à utiliser qui vient de sortir par Leigeber.com, un blog bien connu de conception Web.

• Il est écrit en javascript et ne dépend pas d'autres bibliothèques
• Ceci est un éditeur léger, et les fichiers à appeler ne sont que 8KB
• Il peut gérer la plupart des exigences de formatage HTML, et les fonctions intégrées rendent les balises générées aussi simples que possible
• La petite icône utilisée dans l'éditeur utilise la technologie CSS Sprite, réduisant les connexions HTTP
• Tester la réussite dans les navigateurs grand public
• Peut être utilisé dans des projets personnels ou commerciaux, suivant une licence Creative Commons

1. Référez les fichiers JS et CSS fournis par TinyEditor dans des fichiers de page Web
2. L'ajout des balises requises par l'éditeur au fichier de page Web est en fait une TextArea, comme suit

    <TextArea id = STYLE STYLE = Largeur: 400px; hauteur: 200px> </ textarea>

   Notez que la longueur et la largeur définies dans TextArea sont de la taille de l'éditeur.

3. Initialisez l'éditeur via les scripts et configurez divers paramètres comme suit:

    New Tiny.Editor.Edit ('Editor', {id: 'entrée', // (doit) L'IDWidth: 584 de la TextArea définie dans la deuxième étape ci-dessus, // (facultatif) Editor Width Height: 175, // (Facultatif) Editor Height CSSClass: 'Te', // (facultatif) Editor Class, Utilisé pour contrôler le style ControlClass: 'TECONTROL', // (facultatif) ButterChy ClassRowClass: 'teheader', // (facultatif) Editor Button Line ClassdividerClass: 'TeDivider', // (facultatif) Éditeur Contrôles de style bouton: ['' Bold ',' italic ',' sous-lin '|', 'LeftAlign', 'Centerrign', 'droite', 'Blockjustify', '|', 'Unstorat', '|', 'undo', 'Redo', 'n', 'Font', 'Size', ',', '|', ',' Image ',' hr ',' Link ',', '|', ',' Cut ',' Copin Ajouter des contrôles de bouton à l'éditeur au besoin, où '|' représente la ligne de division verticale entre les boutons de fonction, et 'n' représente la ligne divisée entre les lignes de bouton Footer: true, // (facultatif). L'éditeur génère XHTML ou HTML TAG CSSFILE: 'style.css', // (facultatif) Fichier CSS externe à attacher à l'éditeur Contenu: 'Démarrage du contenu', // (Facultatif) Définissez le contenu initial dans la zone d'édition CSS: `` Body {Background-Color: ', éditeur', // (Optional) Réglage de l'éditeur Édition BODODID: 'éditeur', // (Optional) Réglage de l'éditeur Édition BODODID: 'éditeur', //) Définir la zone d'édition idfooterclass: 'tefooter', // (facultatif) Définissez l'éditeur Cllasstoggle: {text: 'Source Code', activeText: 'Visualisation', CSSClass: 'toggle'}, // (facultatif) Définissez le code source en parcourant Toggle Classe de bouton de réglage});

   On peut dire qu'il est hautement configurable et que les éléments de configuration sont relativement clairs.

Dans l'application réelle de TinyEditor, il convient de noter qu'avant de soumettre le contenu de l'éditeur, la fonction Instance.Post () doit être appelée pour s'assurer que le dernier contenu visuel de la zone d'édition est converti en texte de balise.

Voir l'exemple: http://sandbox.leigeber.com/tinyeeditor/