NiceSnippets.com
Bootstrap 4 With Wysiwyg Text Editor Example
Free Bootstrap 4 wysiwyg text editor demo. bootstrap 4 wysiwyg text editor like ckeditor. wysiwyg text editor with image upload source code free. wysiwyg text editor with php and mysql. this is best jquery editor plugin for bootstap 4.
We allows to free snippets of wysiwyg text editor php , you can download full code of wysiwyg text editor angularjs layout. Here in this post i will give you example of wysiwyg text editor bootstrap snippet and you will get simple code of html, css and jquery. In responsive wysiwyg text editor with jquery and bootstrap snippet i give you three tab with html, css and js, you can easily get code of wysiwyg text editor download layout.
<!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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/components/bootstrap/dist/css/bootstrap-theme.min.css"></link>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class="container">
<h1 class="text-center text-white">Simple, beautiful wysiwyg editors</h1><br>
<div class="jumbotron">
<textarea class="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
</div>
</div>
<script src="http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/components/wysihtml5x/dist/wysihtml5x-toolbar.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/components/handlebars/handlebars.runtime.min.js"></script>
<script src="http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/dist/bootstrap3-wysihtml5.min.js"></script>
</body>
</html>
body{
padding-top: 50px;
background-color: #5acf9d;
}
.dropdown-menu li a,
.btn{
color:#000;
}
.dropdown-menu{
padding-left:5px;
}
.dropdown-menu li a:hover{
color:#000;
width: 100% !important;
text-decoration: none;
}
.dropdown-menu li{
display: inline-block !important;
width: 120px;
}
.wysihtml5-toolbar{
list-style: none;
padding: 0px;
}
.wysihtml5-toolbar li{
display: inline-block;
}
$('.textarea').wysihtml5({
toolbar: {
fa: true
}
});
