jquery.insert-at-cursor/example.html at master · RIPm/jquery.insert-at-cursor · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
    <head>
        <meta charset="utf-8">
        <title>Insert string/dom at caret</title>
        <link href="bundle.css" rel="stylesheet"></link>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="jquery.insert-at-cursor.js"></script>
        <style>
         #a {
             border: 1px solid #ccc;
         }
         #o {
             border: 1px solid green;
         }
         span{
             color: red;
         }
         b {
             color: blue;
             cursor: pointer;
         }
        </style>
    </head>

    <body>
        <h3>Contenteditable div</h3>
        <hr/>
        <div contenteditable="true" class="a" id="a">
            <span contenteditable='false'>{456}</span>
            1231
            <span contenteditable='false'>{456}</span>
            23
        </div>
        <br/>
        <div contenteditable="true" class="a" id="o">

        </div>
        <br/>
        <b id="b" type="button">add for first</b>&nbsp;&nbsp;|&nbsp;&nbsp;
        <b id="e" type="button">add for second</b>&nbsp;&nbsp;|&nbsp;&nbsp;
        <b id="f" type="button">add for all</b>
        <br/><br/>
        <b id="c" type="button">print first(not html)</b>&nbsp;&nbsp;|&nbsp;&nbsp;
        <b id="d" type="button">print second(not html)</b>
        <br/>
        <br/>
        <h3>Normal input</h3>
        <hr/>
        <input id="ao" type="text" value=""/>
        <b id="bo" type="button">add</b>

        <script>

         $(function() {
             $.initCursor('.a');

             $('#b').click(function() {
                 $("#a").insertAtCursor("<span contenteditable='false'>{456}</span>");
             })
             $("#e").click(function() {
                 $("#o").insertAtCursor("<span contenteditable='false'>{123}</span>");
             })
             $("#f").click(function() {
                 $('.a').insertAtCursor("<span contenteditable='false'>{all}</span>");
             });

             $("#c").click(function() {
                 var text= $.trim($("#a").text());
                 alert(text);
                 console.log(text);
             })
             $("#d").click(function() {
                 var text= $.trim($("#o").text());
                 alert(text);
                 console.log(text);
             });

             $('#bo').click(function() {
                 $("#ao").insertAtCursor('{text}');
             })

         })
        </script>
    </body>
</html>