145 lines
3.9 KiB
HTML
145 lines
3.9 KiB
HTML
<!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="components/components-font-awesome/css/font-awesome.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;
|
|
}
|
|
|
|
div.textarea {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
background-color: white;
|
|
min-height: 200px;
|
|
}
|
|
|
|
div.textarea.fixed {
|
|
overflow-y: scroll;
|
|
height: 200px;
|
|
}
|
|
|
|
</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"/>
|
|
<h1>First editor (Textarea)</h1>
|
|
<textarea id="textarea1" class="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
|
|
<h1>Second editor (Div)</h1>
|
|
<div id="textarea2" class="textarea fixed" placeholder="Enter text ..."></div>
|
|
<h1>Third editor (Div)</h1>
|
|
<div id="textarea3" class="textarea" placeholder="Enter text ..."></div>
|
|
</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>
|
|
$('#textarea1').wysihtml5({
|
|
toolbar: {
|
|
'html': true
|
|
},
|
|
locale: 'de-DE',
|
|
parserRules: {
|
|
'tags': {
|
|
'a': {
|
|
'check_attributes': {
|
|
'href': 'href'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#textarea2').wysihtml5({
|
|
toolbar: {
|
|
'html': true,
|
|
fa: true
|
|
},
|
|
locale: 'de-DE'
|
|
});
|
|
|
|
$('#textarea3').wysihtml5({
|
|
toolbar: {
|
|
'html': true
|
|
},
|
|
size: 'sm',
|
|
locale: 'de-DE'
|
|
});
|
|
|
|
//Example for setting value at runtime
|
|
$('#textarea1').val('Some text');
|
|
console.log($('#textarea1').val());
|
|
$('#textarea3').html('Some text');
|
|
console.log($('#textarea3').html());
|
|
|
|
function copyVals() {
|
|
console.log('here');
|
|
$('#textarea2').html($('#textarea1').val());
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<p>
|
|
Copy text from textare1 to textarea2:
|
|
</p>
|
|
<input type="button" onclick="copyVals()" value="copy"/>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|