IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Création d'un éditeur WYSIWYG online


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Création d'un éditeur WYSIWYG online
    Bonjour à tous !

    Ma question est très simple : comment créer un éditeur WYSIWYG en ligne ? C'est-à-dire à la manière de Google Docs ou TinyMCE.

    Est-ce qu'on peut faire ça avec du Javascript seul ?


    Merci de vos réponses

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, tu peux le faire en JavaScript pur, mais attention, ce n'est pas du niveau débutant et si tu regardes le poids d'un script comme TinyMCE, tu comprendras que c'est beaucoup de code !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Invité
    Invité(e)
    Par défaut
    J'ai bien vu

    Mais en fait ma question, c'est juste : comment peut-on réaliser un WYSIWYG, dans le principe ? Je n'arrive vraiment pas à voir comment on peut transformer un <textarea> en zone qui soit à la fois modifiable et où on puisse appliquer de la mise en forme...

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    le code est la pour ajouter des balises de mise en forme autour du texte.
    pour ce qui est du rendu le script remplace souvent le textearea par une autre balise html ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éprouvé
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    139
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2009
    Messages : 139
    Par défaut
    Il y a déjà CKEditor (http://ckeditor.com/demo) qui permet de faire de l'édition de texte enrichi en ligne. A priori ils ne passent pas par du textarea, mais gèrent les événements clavier/navigateur pour modifier un bloc html

  6. #6
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    Bonjour

    en fait tu ne transforme pas un textarea en éditeur , mais tu dois le construire de toute part a part d'une div ( ou span ) éditable , grâce a la propriété contenteditable="true".

    une fois ton conteneur rendu éditable , tu peux y associer des effets de mise en forme pour commencer otn apprentissage grâce a la fonction js : execCommand ( je te laisse chercher la doc )

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    le coup de la transformation du textearea est une securité en cas de desactivation du js ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Invité
    Invité(e)
    Par défaut
    Génial ! C'est exactement ce que je cherchais. Je ne pensais pas que ça consistait en un simple attribut

    [édité]

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. création d'un éditeur graphique sur la base d'un métamodèle
    Par hanounbk dans le forum Eclipse Platform
    Réponses: 2
    Dernier message: 12/03/2007, 17h11
  2. Aide sur l'éditeur wysiwyg dans une page ASP
    Par toussa dans le forum ASP
    Réponses: 2
    Dernier message: 03/06/2006, 08h55
  3. intégration d'un éditeur wysiwyg ?
    Par tim1 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 1
    Dernier message: 24/04/2006, 14h55
  4. Intégrer un éditeur WYSIWYG
    Par outlawz dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 29/09/2005, 19h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo