simple example of Summernote.js
A Pen by Bhavin Patel on CodePen.
<div class="container-fluid"> | |
<h1>Summernote.js <small>WYSIWYG Editor</small></h1> | |
<small>with bootstrap 3</small> | |
<div class="row"> | |
<div class="col-xs-12"> | |
<textarea name="" id="ta-1" cols="30" rows="30"></textarea> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-xs-12 text-right"> | |
<button class="btn btn-sm btn-primary" id="btn-get-content">Get Content</button> | |
<button class="btn btn-sm btn-primary" id="btn-get-text">Get Text</button> | |
<button class="btn btn-sm btn-success" id="btn-set-content">Set Content</button> | |
<button class="btn btn-sm btn-danger" id="btn-reset">Reset</button> | |
</div> | |
</div> | |
<hr> | |
<div class="row"> | |
<code class="col-xs-12" id="content"> | |
</code> | |
</div> | |
</div> |
(function() { | |
var content = | |
"<p><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzC_Ho_08G0m7PyxJOPLpPujM9UTLxvaE-5nXewscnqa3GMWjGwg' alt='Image result for summernote.js'></p><h1>Summernote</h1>"; | |
var $sumNote = $("#ta-1") | |
.summernote({ | |
callbacks: { | |
onPaste: function(e,x,d) { | |
$sumNote.code(($($sumNote.code()).find("font").remove())); | |
} | |
}, | |
dialogsInBody: true, | |
dialogsFade: true, | |
disableDragAndDrop: true, | |
// disableResizeEditor:true, | |
height: "150px", | |
tableClassName: function() { | |
alert("tbl"); | |
$(this) | |
.addClass("table table-bordered") | |
.attr("cellpadding", 0) | |
.attr("cellspacing", 0) | |
.attr("border", 1) | |
.css("borderCollapse", "collapse") | |
.css("table-layout", "fixed") | |
.css("width", "100%"); | |
$(this) | |
.find("td") | |
.css("borderColor", "#ccc") | |
.css("padding", "4px"); | |
} | |
}) | |
.data("summernote"); | |
//get | |
$("#btn-get-content").on("click", function() { | |
var y =$($sumNote.code()); | |
console.log(y[0]);console.log(y.find("p> font")); | |
var x = y.find("font").remove(); | |
$("#content").text($("#ta-1").val()); | |
}); | |
//get text$($sumNote.code()).find("font").remove()$($sumNote.code()).find("font").remove() | |
$("#btn-get-text").on("click", function() { | |
$("#content").html($($sumNote.code()).text()); | |
}); | |
//set | |
$("#btn-set-content").on("click", function() { | |
$sumNote.code(content); | |
}); //reset | |
$("#btn-reset").on("click", function() { | |
$sumNote.reset(); | |
$("#content").empty(); | |
}); | |
})(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script> |
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); | |
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); | |
body { | |
padding: 20px; | |
font-family: "open sans"; | |
color: #555; | |
} | |
label { | |
font-weight: 600; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet" /> |
simple example of Summernote.js
A Pen by Bhavin Patel on CodePen.