Comment faire un éditeur HTML / JS WYSIWYG? [fermé]
J'ai essayé de nombreuses recherches Google différentes mais je n'ai pas pu trouver de tutoriel actuel (plus récent que 2006) sur la façon de créer un éditeur WYSIWYG. Je me rends compte qu'il y en a déjà beaucoup, mais je suis curieux de savoir comment ils fonctionnent réellement. J'ai regardé une partie du code source, mais c'est beaucoup à digérer. Il semble que le texte formaté ne puisse pas être placé dans une zone de texte, et pourtant, ils donnent l'illusion de faire exactement cela-comment?
3 answers
Javascript WYSIWYG editors do not use a textarea (du moins pas en externe, il est probable que dans les coulisses il y a une textarea qui est rempli avec le code qui compose le contenu WYSIWYG afin qu'il puisse être posté dans un formulaire).
Il y a plutôt deux propriétés qui sont utilisées pour rendre une zone modifiable dans une page Web: designMode, qui s'applique à un document entier, ou contentEditable, qui s'applique à un élément spécifique. Les deux propriétés étaient à l'origine des innovations Microsoft, mais ont été adopté par tous les principaux navigateurs (contentEditable fait maintenant partie de HTML5).
Une fois qu'un document (en termes d'éditeurs de texte enrichi, cela signifie généralement intégrer un iframe avec designMode défini dans votre page) ou un élément est rendu modifiable, le formatage est effectué en utilisant la méthode 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).
Afin de transmettre le contenu de l'editable l'élément vers le serveur, généralement le innerHTML de l'élément modifiable, est chargé dans une zone de texte, qui est publiée. La composition du code HTML généré dépend du navigateur.
Ressources:
J'ai une bonne idée de prendre ce code pour faire un éditeur WYSIWYG cool -
Pour faire un bel éditeur, 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 toute manière, je suis très heureux de faire ça.
Merci d'avoir posé cette question et d'avoir augmenté mon curiosité envers JavaScript.
Fondamentalement, ils masquent votre zone de texte et placent un iframe en tant que champ d'éditeur. Ils capturent votre entrée (texte + formatage) et écrivent le HTML correspondant dans l'iframe. Si vous soumettez votre formulaire, y compris 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 très simplifié.