Keen | Summernote WYSIWYG

Super simple WYSIWYG editor.
For more info please visit the plugin's Demo Page or Github Repo.

Summernote Examples

Default Demo

Modal Demos

HTML
JS


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Summernote Examples
									</h3>
								</div>
								<!--begin::Form-->
								<form>
									<div class="card-body">
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Default Demo</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<div class="summernote" id="kt_summernote_1"></div>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<a href="" class="btn btn-light-primary font-weight-bold" data-toggle="modal" data-target="#kt_summernote_modal">Launch modal examples</a>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-3"></div>
											<div class="col-lg-9">
												<button type="submit" class="btn btn-primary mr-2">Submit</button>
												<button type="submit" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!--end::Form-->
							</div>


						// Class definition

						var KTSummernoteDemo = function () {
							// Private functions
							var demos = function () {
								$('.summernote').summernote({
									height: 150
								});
							}

							return {
								// public functions
								init: function() {
									demos();
								}
							};
						}();

						// Initialization
						jQuery(document).ready(function() {
							KTSummernoteDemo.init();
						});

Validation State Examples

Success State

Success! You've done it.

Example help text that remains unchanged.

Error State

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

HTML
JS


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Validation State Examples
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form form-label">
									<div class="card-body">
										<div class="form-group row is-valid">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<div class="summernote"></div>
												<div class="valid-feedback">Success! You've done it.</div>
												<span class="form-text text-muted">Example help text that remains unchanged.</span>
											</div>
										</div>
										<div class="form-group row is-invalid">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<div class="summernote"></div>
												<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
												<span class="form-text text-muted">Example help text that remains unchanged.</span>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-3"></div>
											<div class="col-lg-9">
												<button type="submit" class="btn btn-primary mr-2">Submit</button>
												<button type="submit" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!--end::Form-->
							</div>


						// Class definition

						var KTSummernoteDemo = function () {
							// Private functions
							var demos = function () {
								$('.summernote').summernote({
									height: 150
								});
							}

							return {
								// public functions
								init: function() {
									demos();
								}
							};
						}();

						// Initialization
						jQuery(document).ready(function() {
							KTSummernoteDemo.init();
						});

Custom

Layout

features

Pricing Tables

Wizards

Invoices

Login

Error Pages

Summernote WYSIWYG

Summernote Examples

Validation State Examples

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Custom

Layout

features

Pricing Tables

Wizards

Invoices

Login

Error Pages

Quick Actions

Summernote WYSIWYG

Summernote Examples

Validation State Examples

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9