article:
JS Plugin: WYSIHTML5
article:
Elements Design: Touch Gesture Icons

JS Plugin: Bootstrap WYSIHTML5

Advertisement

WYSIHTML5 is an open source rich text editor, valid HTML5 code.

bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap


Screenshot

Plugin: Bootstrap WYSIHTML5


Implementation

css code
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">               
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/prettify.css">
<link rel="stylesheet" type="text/css" href="css/wysiwyg-color.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css">

javascript code
<script type="text/javascript" src="javascripts/wysihtml5-0.3.0.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascripts/prettify.js"></script>
<script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
<script type="text/javascript" src="javascripts/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="javascripts/bootstrap-button.js"></script>

<script>
    $('.textarea').wysihtml5();
</script>

<script type="text/javascript" charset="utf-8">
    $(prettyPrint);
</script>   

html code
<textarea class="textarea" placeholder="Enter text ..." style="width: 610px; height: 300px"></textarea> 



demo
source
download
github

Advertisement
Tags: twitter, bootstrap, rich, text, editor, online, js, javascript, css, html, html5, wysihtml5

Leave a Comment

No Comment

© Creative3x Ltd.