-
Notifications
You must be signed in to change notification settings - Fork 263
/
index-dev.html
125 lines (109 loc) · 3.62 KB
/
index-dev.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">
<title>bootstrap-wysihtml5</title>
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap-theme.min.css"></link>
<link rel="stylesheet" type="text/css" href="src/bootstrap3-wysihtml5.css"></link>
<style type="text/css" media="screen">
.btn.jumbo {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
margin-right: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.editable {
width: 100%;
height: 200px;
font-size: 14px;
line-height: 18px;
background-color: white;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top:40px">
<h1 style="font-size:58px">bootstrap-wysihtml5 <br/><small>Simple, beautiful wysiwyg editors</small></h1>
<hr style="border-color: white"/>
<!--
<div class="editable" placeholder="Enter text ..."></div>
-->
<textarea class="editable" placeholder="Enter text ..."></textarea>
</div>
<div class="row">
<div class="span6">
<h2>About</h2>
<p>
bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of <a href="https://github.com/xing/wysihtml5">wysihtml5</a> and <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap 3</a>
</p>
<p style="text-align:center; margin-top:20px">
<a class="btn btn-large btn-primary jumbo" href="https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/">View project on Github</a>
</p>
</div>
<div class="span6" >
<h2>Usage</h2>
<p>
<pre>$('.textarea').wysihtml5();</pre>
</p>
</div>
</div>
</div>
<!--
<script src="components/wysihtml5/dist/wysihtml5-0.3.0.js"></script>
-->
<script src="components/wysihtml5x/dist/wysihtml5x-toolbar.js"></script>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/handlebars/handlebars.runtime.min.js"></script>
<script src="src/generated/templates.js"></script>
<script src="src/bootstrap3-wysihtml5.js"></script>
<script src="src/locales/bootstrap-wysihtml5.en-US.js"></script>
<script src="src/locales/bootstrap-wysihtml5.de-DE.js"></script>
<script src="src/generated/commands.js"></script>
<script>
var customTemplates = {
custombuttons: function(customOptions) {
var size = (customOptions.options && customOptions.options.size) ? ' btn-'+customOptions.options.size : '';
return "<li>" +
"<div class='btn-group'>" +
"<a class='btn btn-default" + size + "' data-wysihtml5-command='insertHTML' data-wysihtml5-command-value='…' title='CTRL+B' tabindex='-1'>&hellip</a>" +
"</div>" +
"</li>";
},
};
$('.editable').wysihtml5({
toolbar: {
'blockquote': false,
'font-styles': {},
'emphasis': {
'small': false
},
'html': true,
'custombuttons': true,
'smallmodals': true
},
customTemplates: customTemplates,
events: {
'load': function() {
$('.editable').html('Some text here after loading.');
console.log('loaded!');
},
'change_view': function() {
console.log('View changed');
}
},
locale: 'de-DE',
shortcuts: {
75: "createLink"
}
});
</script>
</body>
</html>