[jquery2.02] mini wysiwig pour s'entrainer

**keokaz** · 30/06/2013, 18h25

Bonjour, j' aimerais avec jquery concevoir un petit wysiwig.
pour commencer j'aimerais faire quelque chose de simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="menu">
	<span>H1</span>
</div>
<textarea id="editer">
 
</textarea>

Quel serait la bonne façon de procéder pour écrire un texte dans le textarea , de sélectionner se texte et de mettre des balises avant et après ce texte ?

Quelle est la méthode de jquery pour récupérer ce que l'on a surligner ?

merci d'avance pour la réponse

**danielhagnoul** · 30/06/2013, 23h01

Bonsoir

Il y a déjà de nombreux plugins existants.

Textarea : le code de mon plugin dvjhBBCodeTextarea vous aidera peut-être à démarrer.

HTML5 : il serait peut-être plus intéressant de démarrer le projet sur une division éditable. Exemple d'utilisation d'une division modifiable : http://www.developpez.net/forums/d12...sion-editable/

**keokaz** · 02/07/2013, 04h08

Merci de ta réponse

;

ça m'est encore trop brutal pour le code, je voulais commencer par quelque chose de plus
simple possible

,

j'ai pris cette fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
function insertTag(startTag, endTag, textareaId, tagType) {
    var field  = document.getElementById(textareaId);
    var scroll = field.scrollTop;
    field.focus();
 
    if (window.ActiveXObject) { // C'est IE
        var textRange = document.selection.createRange();           
        var currentSelection = textRange.text;
 
        textRange.text = startTag + currentSelection + endTag;
        textRange.moveStart("character", -endTag.length - currentSelection.length);
        textRange.moveEnd("character", -endTag.length);
        textRange.select();    
    } else { // Ce n'est pas IE
        var startSelection   = field.value.substring(0, field.selectionStart);
        alert(startSelection);
        var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
        var endSelection     = field.value.substring(field.selectionEnd);
 
        field.value = startSelection + startTag + currentSelection + endTag + endSelection;
        field.focus();
        field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
    }
 
    field.scrollTop = scroll; // et on redéfinit le scroll.
}

le code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>
<html lang="fr">
    <head>
        <script src="../info/jq/js/jquery.js"></script>
                <script src="wysi.js"></script>
        <style>
            div{color:red}
        </style>
        <script>
            function afficheHtml()
            {
                txtBB = document.getElementById("textarea").value;
                document.getElementById("afficheHTML").innerHTML=txtBB;
            }
            </script>
    </head>
    <body>
 
<form  method="post">
    <div>
        <p>
            <input type="button" value="G" onclick="insertTag('<b>','</b>','textarea');" />
        </p>
    </div>
 
    <textarea id="textarea" cols="150" rows="10"></textarea>
 
    <div id="previewDiv"></div>
 
    <p>
        <input type="button" value="Visualiser" onclick="alert(afficheHtml())" />
    </p>
 
    <div id="viewDiv"></div>
</form>
        <div id="afficheHTML">
 
        </div>
    </body>  
</html>

ici comment faire pour faire en sorte de travailler uniquement et directement sur le textarea ?
que le visiteur ne voit pas les bbcodes ? pour que cela soit plus ergnomique ?

[jquery2.02] mini wysiwig pour s'entrainer

jQuery

Vue hybride

Discussions similaires

Partager

Partager