<!-- RIBBON -->
<div id="ribbon">

				<span class="ribbon-button-alignment"> 
					<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh"  rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true">
						<i class="fa fa-refresh"></i>
					</span> 
				</span>

    <!-- breadcrumb -->
    <ol class="breadcrumb">
        <li>Home</li><li>Forms</li><li>Bootstrap Editors</li>
    </ol>
    <!-- end breadcrumb -->

    <!-- You can also add more buttons to the
    ribbon for further usability

    Example below:

    <span class="ribbon-button-alignment pull-right">
    <span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
    <span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
    <span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
    </span> -->

</div>
<!-- END RIBBON -->

<!-- MAIN CONTENT -->
<div id="content">

    <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h1 class="page-title txt-color-blueDark">
                <i class="fa fa-pencil-square-o fa-fw "></i>
                Forms
			<span>> 
				Bootstrap Editors
			</span>
            </h1>
        </div>
        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
            <ul id="sparks" class="">
                <li class="sparks-info">
                    <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                    <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                        1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                    </div>
                </li>
                <li class="sparks-info">
                    <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                    <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                        110,150,300,130,400,240,220,310,220,300, 270, 210
                    </div>
                </li>
                <li class="sparks-info">
                    <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                    <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                        110,150,300,130,400,240,220,310,220,300, 270, 210
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->

        <div class="row">

            <!-- NEW WIDGET START -->
            <article class="col-sm-12 col-md-12 col-lg-6">

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget jarviswidget-color-purple" id="wid-id-2" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-fullscreenbutton="false" data-widget-sortable="false">
                    <!-- widget options:
                    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                    data-widget-colorbutton="false"
                    data-widget-editbutton="false"
                    data-widget-togglebutton="false"
                    data-widget-deletebutton="false"
                    data-widget-fullscreenbutton="false"
                    data-widget-custombutton="false"
                    data-widget-collapsed="true"
                    data-widget-sortable="false"

                    -->
                    <header>
                        <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>
                        <h2>Markdown</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body no-padding">

						<textarea id="mymarkdown" class="custom-scroll" style="max-height:180px;">
### Hello there 
How are you?

I have bellow task for you :

Select from this text...
Click the bold on THIS WORD and make THESE ONE italic
Link GOOGLE to google.com
Test to insert image (and try to tab after write the image description)
Test Preview
And ending here... Click "List"

Enjoy!							
						</textarea>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget well" id="wid-id-4" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-fullscreenbutton="false" data-widget-sortable="false">
                    <!-- widget options:
                    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                    data-widget-colorbutton="false"
                    data-widget-editbutton="false"
                    data-widget-togglebutton="false"
                    data-widget-deletebutton="false"
                    data-widget-fullscreenbutton="false"
                    data-widget-custombutton="false"
                    data-widget-collapsed="true"
                    data-widget-sortable="false"

                    -->
                    <header>
                        <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>
                        <h2>Markdown API</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body">

                            <h3>Markdown API</h3>

                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Method Name</th>
                                    <th>Description</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><code>
                                            showEditor()</code></td>
                                    <td>Toggle on the editor visibility</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            showPreview()</code></td>
                                    <td>Toggle on the preview visibility</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            hidePreview()</code></td>
                                    <td>Toggle off the editor visibility</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            isDirty()</code></td>
                                    <td>Check the editor content state, return true if the original content was changed</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            getContent()</code></td>
                                    <td>Get the editor content</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            setContent(<em>string</em> content)</code></td>
                                    <td>Set the editor content</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            findSelection(<em>string</em> words)</code></td>
                                    <td>Find some words/sentence within the editor and returned selection object(containing word position and other useful information).</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            getSelection()</code></td>
                                    <td>Get the current selected chunk of words within the editor.</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            setSelection(<em>int</em> start, <em>int</em> end)</code></td>
                                    <td>Tell the editor to select a span of words from <code>
                                            start</code> to <code>
                                            end</code>.</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            replaceSelection(<em>string</em> content)</code></td>
                                    <td>Replace the current selected chunk of words within the editor with any content.</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            getNextTab()</code></td>
                                    <td>Get the next tab memory. Returned selection object(containing word position and other useful information).</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            setNextTab(<em>int</em> start, <em>int</em> end)</code></td>
                                    <td>Tell the editor to select a span of words from <code>
                                            start</code> to <code>
                                            end</code> at next <code>
                                            tab</code> keypress event.</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            enableButtons(<em>string</em> name)</code></td>
                                    <td>Enabled a button by <code>
                                            name</code> that described in <code>
                                            buttons</code> or <code>
                                            additionalButtons</code> arrays. Passing <code>
                                            all</code> will enabled all buttons.</td>
                                </tr>
                                <tr>
                                    <td><code>
                                            disableButtons(<em>string</em> name)</code></td>
                                    <td>Disabled a button by <code>
                                            name</code> that described in <code>
                                            buttons</code> or <code>
                                            additionalButtons</code> arrays. Passing <code>
                                            all</code> will disabled all buttons.</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>
            <!-- WIDGET END -->

            <!-- NEW WIDGET START -->
            <article class="col-sm-12 col-md-12 col-lg-6">

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget jarviswidget-color-blue" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-fullscreenbutton="false" data-widget-sortable="false">
                    <!-- widget options:
                    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                    data-widget-colorbutton="false"
                    data-widget-editbutton="false"
                    data-widget-togglebutton="false"
                    data-widget-deletebutton="false"
                    data-widget-fullscreenbutton="false"
                    data-widget-custombutton="false"
                    data-widget-collapsed="true"
                    data-widget-sortable="false"

                    -->
                    <header>
                        <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>
                        <h2>Summernote (Lightweight)</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body no-padding">

                            <div class="summernote">

                            </div>

                            <div class="widget-footer smart-form">

                                <div class="btn-group">

                                    <button class="btn btn-sm btn-primary" type="button">
                                        <i class="fa fa-times"></i> Cancel
                                    </button>

                                </div>
                                <div class="btn-group">

                                    <button class="btn btn-sm btn-success" type="button">
                                        <i class="fa fa-check"></i> Save
                                    </button>

                                </div>

                                <label class="checkbox pull-left">
                                    <input type="checkbox" checked="checked" name="autosave" id="autosave">
                                    <i></i>Auto Save
                                </label>

                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget well" id="wid-id-1">
                    <!-- widget options:
                    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                    data-widget-colorbutton="false"
                    data-widget-editbutton="false"
                    data-widget-togglebutton="false"
                    data-widget-deletebutton="false"
                    data-widget-fullscreenbutton="false"
                    data-widget-custombutton="false"
                    data-widget-collapsed="true"
                    data-widget-sortable="false"

                    -->
                    <header>
                        <span class="widget-icon"> <i class="fa fa-pencil"></i> </span>
                        <h2>Example </h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body">

                            <h3>Summernote Example</h3>
                            <p>
                                <button id="edit" class="btn btn-primary" onclick="edit()" type="button">
                                    Edit
                                </button>
                                <button id="save" class="btn btn-primary" onclick="save()" type="button">
                                    Save
                                </button>
                            </p>
                            <p></p>
                            <div class="click2edit">
                                <pre><code class="javascript">var edit = function() { $('.click2edit').summernote() };</code></pre>
                            </div>

                            <h5>HTML:</h5>
				<pre><code class="xml">&lt;button id="edit" class="btn btn-primary" onclick="edit()" type="button"&gt;Edit 1&lt;/button&gt;
                        &lt;button id="save" class="btn btn-primary" onclick="save()" type="button"&gt;Save 2&lt;/button&gt;
                        &lt;div class="click2edit"&gt;click2edit&lt;/div&gt;</code></pre>
                            <h5>Script:</h5>
				<pre><code class="javascript">var edit = function() {
                        $('.click2edit').summernote({focus: true});
                        };
                        var save = function() {
                        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
                        $('.click2edit').destroy();
                        };</code></pre>

                            <script>
                                var edit = function() {
                                    $('.click2edit').summernote({
                                        focus : true
                                    });
                                };
                                var save = function() {
                                    $('.click2edit').destroy();
                                };
                            </script>

                            <h5>Documentation:</h5>
                            <p class="alert alert-info">
                                Full API for Summernote.js, including keybored shortcuts, PHP Examples, Django installation, and Rails (gem) integration can be found <a href="http://hackerwins.github.io/summernote/features.html#api">here</a>
                            </p>
                        </div>
                        <!-- end widget content -->


                        <!-- end widget div -->
                    </div>

                </div>
                <!-- end widget -->

            </article>
            <!-- WIDGET END -->

        </div>

        <!-- end row -->

    </section>
    <!-- end widget grid -->

</div>
<!-- END MAIN CONTENT -->