Traitement de texte en ligne.

Bonjour à toutes et à tous,

Comment puis-je intégrer à un site qui utilise "jQuery" et sans ajouter un autre framework complet 'une zone de texte éditable' comme celles ci-dessous ?

avec EXT JS :
http://extjs.com/deploy/dev/examples/form/dynamic.html
Bloque "Form 3 - A little more complex"
champs "Biography"

avec CKEditor
http://ckeditor.com/ckeditor/3.0b2/_samples/ajax.html

Par avance merci

:google:

Tape "wysiwig jquery" et tu tombes sur un plugin jquery intéressant dès le 1er lien.

Bonsoir.

Voir aussi : http://plugins.jquery.com/project/TextAreaResizer

Bonsoir.

Après avoir vu la page de démo et signalé le plugin TextareaResizer, il m'est venu l'envie de le tester et la déception il est buggé.

Voici une version modifiée et la page de test :

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
/* 
    jquery-textarearesizer-1.1.0.js
    
    Modifié par Daniel Hagnoul le 17 avril 2009.
        
    jQuery TextAreaResizer plugin
    Created on 17th January 2008 by Ryan O'Dell 
    Version 1.0.4
    
    Converted from Drupal -> textarea.js
    Found source: http://plugins.jquery.com/misc/textarea.js
    $Id: textarea.js,v 1.11.2.1 2007/04/18 02:41:19 drumm Exp $
*/
(function($) {
    var textarea;
    var staticOffset;
    var iLastMousePos = 0;
    var iMin = 32;
    var grip;
 
    $.fn.TextAreaResizer = function() {
        return this.each(function() {
            textarea = $(this);
            staticOffset = null;
            var largeur = parseInt($(this).css("width")) + 3;            
            var divparent = $(this).wrap("<div class='resizable-textarea' style='overflow:visible;'></div>").parent();            
            var divgrippie = $("<div class='grippie' style='width:" + largeur + "px;'></div>").appendTo(divparent);
 
            $(divgrippie).bind("mousedown",{el:this}, startDrag);
        });
    };
 
    function startDrag(e) {
        textarea = $(e.data.el);
        textarea.blur();
        iLastMousePos = mousePosition(e).y;
        staticOffset = textarea.height() - iLastMousePos;
        textarea.css('opacity', 0.25);
        $(document).mousemove(performDrag).mouseup(endDrag);
        return false;
    }
 
    function performDrag(e) {
        var iThisMousePos = mousePosition(e).y;
        var iMousePos = staticOffset + iThisMousePos;
        if (iLastMousePos >= (iThisMousePos)) {
            iMousePos -= 5;
        }
        iLastMousePos = iThisMousePos;
        iMousePos = Math.max(iMin, iMousePos);
        textarea.height(iMousePos + 'px');
        if (iMousePos < iMin) {
            endDrag(e);
        }
        return false;
    }
 
    function endDrag(e) {
        $(document).unbind('mousemove', performDrag).unbind('mouseup', endDrag);
        textarea.css('opacity', 1);
        textarea.focus();
        textarea = null;
        staticOffset = null;
        iLastMousePos = 0;
    }
 
    function mousePosition(e) {
        return { x: e.clientX + document.documentElement.scrollLeft, y: e.clientY + document.documentElement.scrollTop };
    };
})(jQuery);

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Test TextAreaResizer</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        textarea.resizable {
            display:block;
            margin-bottom:0px;
            width:450px;
            height:100px;
        }
        div.grippie {
            background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
            border:1px solid #dddddd;
            cursor:s-resize;
            height:9px;
            overflow:hidden;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript" src="jquery-textarearesizer-1.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            $("textarea.resizable").TextAreaResizer();
         });
    </script>
</head>
<body>
    <div id="conteneur">
        <textarea class="resizable">Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte. Un très long texte.</textarea>
    </div>
</body>
</html>