Logo

Summernote Examples


       <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! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

       <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();
      });
      

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo