Comment créer un éditeur WYSIWYG HTML/JS ?

Question

Comment créer un éditeur WYSIWYG HTML/JS ?

Demandé el 20 de Avril, 2010: Quand la question a-t-elle été
11335 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai essayé de nombreuses recherches sur Google, mais je n'ai pas réussi à trouver un tutoriel actuel (plus récent que 2006) sur la façon de créer un éditeur WYSIWYG. Je réalise qu'il y en a déjà beaucoup, mais je suis curieux de savoir comment ils fonctionnent réellement. J'ai parcouru une partie du code source, mais c'est beaucoup à digérer. Il semble qu'un texte formaté ne puisse pas être placé dans une zone de texte, et pourtant ils donnent l'illusion de le faire - comment ?

Demandé el 20 de Avril, 2010 par LDK

Answer 1

3 Réponses

Answer 2

74voto

Daniel Vandersluis Points 30498

Les éditeurs WYSIWYG Javascript n'utilisent pas de zone de texte (du moins pas en externe, il est probable qu'en coulisses, une zone de texte soit remplie avec le code qui compose le contenu WYSIWYG afin qu'il puisse être affiché dans un formulaire).

Il y a plutôt deux propriétés qui sont utilisées pour créer une zone modifiable dans une page Web : designMode qui s'applique à l'ensemble d'un document, ou contentEditable qui s'applique à un élément spécifique. Ces deux propriétés étaient à l'origine des innovations de Microsoft, mais elles ont été adoptées par tous les principaux navigateurs ( contentEditable fait désormais partie de HTML5).

Une fois qu'un document (en termes d'éditeurs de texte enrichi, cela signifie généralement l'intégration d'une iframe avec un designMode défini dans votre page) ou un élément est modifiable, la mise en forme est effectuée à l'aide de la balise execCommand (pour laquelle il existe un certain nombre de modes différents - gras, italique, etc. -- qui ne sont pas nécessairement les mêmes dans tous les navigateurs. Voir ce tableau pour plus d'informations).

Pour transmettre le contenu de l'élément modifiable au serveur, il faut généralement utiliser l'élément innerHTML de l'élément modifiable, est chargé dans un textarea, qui est affiché. La composition du HTML généré dépend du navigateur.

Ressources :

Répondu el 20 de Avril, 2010 par Daniel Vandersluis (30498 Points )

0 votes

En passant, j'aimerais beaucoup voir une version en toile d'un éditeur WYSWIG semblable à bespin (voici un présentation vidéo )

Commenté el 20 de Avril, 2010 par David Murdoch

2 votes

Pour ceux qui sont intéressés, pour rendre un élément modifiable faites : <div contentEditable='true'></div>

Commenté el 21 de Avril, 2010 par LDK

2 votes

Je me pose la même question. Nous sommes maintenant en 2014 et en gardant HTML5 à l'esprit, cette réponse est-elle toujours valable ? Avons-nous besoin d'utiliser des iFrames même aujourd'hui ? cc @DavidMurdoch

Commenté el 23 de Juin, 2014 par Nexus

Answer 3

13voto

NewUser Points 108

J'ai une bonne idée de prendre ce code pour faire un éditeur WYSIWYG sympa

Pour faire un éditeur agréable, j'ai fait un code avec JavaScript qui ouvrira une nouvelle fenêtre contenant le résultat

Commençons par le corps.

<body> 
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>

Maintenant nous continuons avec le JavaScript-

function ShowResult()
{
    my_window = window.open("about:blank", "mywindow1");
//By the above line code we have opened a new window
    my_window.document.write(x);
//Here we have added the value of the textarea to the new window
}

Voyons le code dans son ensemble:-

<html>
<script type="text/javascript">
function ShowResult()
{
    my_window = window.open("about:blank", "mywindow1");
    my_window.document.write(x);
}
</script>
<body>
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value">
</textarea><br />
<button onclick="ShowResult()">see result!</button>
</body>
</html>

Si je peux vous aider de quelque manière que ce soit, je serai très heureux de le faire.

Merci de poser cette question et d'accroître ma curiosité envers JavaScript.

Répondu el 2 de Juin, 2012 par NewUser (108 Points )

4 votes

-1 pour l'utilisation de la balise <br />, la gestion des événements en ligne et le style en ligne !

Commenté el 2 de Avril, 2013 par Aakash Goel

27 votes

J'aimerais pouvoir vous mettre à l'abri de l'ignorance. Ce n'est qu'un exemple et l'affichage des règles de style en ligne rend les choses plus faciles à comprendre que de devoir se référer à un bloc supplémentaire de code css...

Commenté el 27 de Mai, 2014 par AM-

3 votes

@AakashGoel +1 pour équilibrer le tout.

Commenté el 7 de Septembre, 2015 par Ced

Afficher 1 autres commentaires

Answer 4

5voto

Reto Aebersold Points 6144

En gros, ils cachent votre zone de texte et placent un iframe comme champ d'édition. Ils capturent votre entrée (texte + mise en forme) et écrivent le HTML correspondant dans l'iframe. Si vous soumettez votre formulaire en incluant la zone de texte originale, ils copient le contenu de l'iframe dans la zone de texte et donc le code HTML est soumis.
Eh bien, c'est assez simplifié.

Répondu el 20 de Avril, 2010 par Reto Aebersold (6144 Points )

Comment créer un éditeur WYSIWYG HTML/JS ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment créer un éditeur WYSIWYG HTML/JS ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: