%PDF-
%PDF-
Mini Shell
Mini Shell
<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> 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> 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"><button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
<div class="click2edit">click2edit</div></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 -->
<script type="text/javascript">
/* DO NOT REMOVE : GLOBAL FUNCTIONS!
*
* pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
*
* // activate tooltips
* $("[rel=tooltip]").tooltip();
*
* // activate popovers
* $("[rel=popover]").popover();
*
* // activate popovers with hover states
* $("[rel=popover-hover]").popover({ trigger: "hover" });
*
* // activate inline charts
* runAllCharts();
*
* // setup widgets
* setup_widgets_desktop();
*
* // run form elements
* runAllForms();
*
********************************
*
* pageSetUp() is needed whenever you load a page.
* It initializes and checks for all basic elements of the page
* and makes rendering easier.
*
*/
pageSetUp();
// PAGE RELATED SCRIPTS
// pagefunction
var pagefunction = function() {
// summernote
$('.summernote').summernote({
height : 180,
focus : false,
tabsize : 2
});
// markdown
$("#mymarkdown").markdown({
autofocus:false,
savable:true
})
};
// end pagefunction
// load summernote, and all markdown related plugins
loadScript("js/plugin/summernote/summernote.min.js", function(){
loadScript("js/plugin/markdown/markdown.min.js", function(){
loadScript("js/plugin/markdown/to-markdown.min.js", function(){
loadScript("js/plugin/markdown/bootstrap-markdown.min.js", pagefunction);
});
});
});
</script>
Zerion Mini Shell 1.0