jquery-markedit/examples/multiple-preview-panes.html at master · tstone/jquery-markedit · 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>MarkEdit Basic Example</title>
    <link rel="stylesheet" type="text/css" href="../jquery.markedit.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" />
    <style type="text/css">
        textarea { min-height: 250px; }
        .markedit { width: 75%; }

        .preview pre { margin-left: 10px; padding: 5px; overflow: auto; width: 50%; }
        #pane1 { font-family: Arial, Helvetica; color: blue; }
        #pane2 { background-color: black; color: white; }
        #pane3 { font-family: cursive; color: gray; background-color: orange; }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../showdown.js"></script>
    <script type="text/javascript" src="../jquery.markedit.js"></script>

    <script type="text/javascript">

        // Create a MarkEdit editor on page load
        $(function(){
            $('textarea').markedit({
                'preview' : false,
                'postload' : function() {
                    $('div.preview').each(function() {
                       $('textarea').markeditBindAutoPreview(this);
                    });
                }
            });
        });

    </script>
</head>
<body>
    <textarea>
**MarkEdit Basic Demo**

[Lorem Ipsum][1] is simply dummy text of the printing and typesetting industry.

    // MarkEdit for the win!
    $('textarea').markedit();


  [1]: http://www.lipsum.com/
    </textarea>

    <div class="preview" id="pane1"></div>

    <hr/>

    <div class="preview" id="pane2"></div>

    <hr/>

    <div class="preview" id="pane3"></div>

</body>
</html>