squire-example/index.html at main · neokeld/squire-example · 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
<meta charset="UTF-8">
<body>
    <header class="header">
        <div class="wrapper">
            <h1>Squire HTML Editor Test</h1>
            <h2>the &lt;textarea&gt; of the future</h2>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-centered">
                <div id="menu" class="menu" contenteditable="false">
                    <div class="group">
                        <div class="item" id="bold"><i class="fa fa-bold"></i></div>
                        <div class="item" id="italic"><i class="fa fa-italic"></i></div>
                        <div class="item" id="underline"><i class="fa fa-underline"></i></div>
                    </div>
                    <div class="group">
                        <div class="item" id="makeOrderedList"><i class="fa fa-list"></i></div>
                    </div>
                </div>
                <div id="app"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-centered">
                <h1>About</h1>
                <p>Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible. It is built for the present and the future, and as such does not support truly ancient browsers. It should work fine back to around Opera 10, Firefox 3.5, Safari 4, Chrome 9 and IE8.
                </p>
                <p>Unlike other HTML5 rich text editors, Squire was written as a component for writing documents (emails, essays, etc.), not doing wysiwyg websites. If you are looking for support for inserting form controls or flash components or the like, you'll need to look elsewhere. However for many purposes, Squire may be just what you need, providing the power without the bloat.</p>
            </div>
        </div>
    </div>
</body>
<script src="dist/bundle.umd.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="fa/css/all.min.css"/>