other-editors.php

<?php

//initilize the page
require_once("inc/init.php");

//require UI configuration (nav, ribbon, etc.)
require_once("inc/config.ui.php");

/*---------------- PHP Custom Scripts ---------

YOU CAN SET CONFIGURATION VARIABLES HERE BEFORE IT GOES TO NAV, RIBBON, ETC.
E.G. $page_title = "Custom Title" */

$page_title = "Bootstrap Editors";

/* ---------------- END PHP Custom Scripts ------------- */

//include header
//you can add your custom css in $page_css array.
//Note: all css files are inside css/ folder
$page_css[] = "your_style.css";
include("inc/header.php");

//include left panel (navigation)
//follow the tree in inc/config.ui.php
$page_nav["forms"]["sub"]["bootstrap_editors"]["active"] = true;
include("inc/nav.php");

?>
<!-- ==========================CONTENT STARTS HERE ========================== -->
		<!-- MAIN PANEL -->
		<div id="main" role="main">
			<?php
				//configure ribbon (breadcrumbs) array("name"=>"url"), leave url empty if no url
				//$breadcrumbs["New Crumb"] => "http://url.com"
				$breadcrumbs["Forms"] = "";
				include("inc/ribbon.php");
			?>

			<!-- 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 -->

		</div>
		<!-- END MAIN PANEL -->
<!-- ==========================CONTENT ENDS HERE ========================== -->

<?php 
	//include required scripts
	include("inc/scripts.php"); 
?>

<!-- PAGE RELATED PLUGIN(S) -->
<script src="<?php echo ASSETS_URL; ?>/js/plugin/summernote/summernote.js"></script>
<script src="<?php echo ASSETS_URL; ?>/js/plugin/markdown/markdown.min.js"></script>
<script src="<?php echo ASSETS_URL; ?>/js/plugin/markdown/to-markdown.min.js"></script>
<script src="<?php echo ASSETS_URL; ?>/js/plugin/markdown/bootstrap-markdown.min.js"></script>


<script type="text/javascript">
	
	$(document).ready(function() {

		/*
		 * SUMMERNOTE EDITOR
		 */
		
		$('.summernote').summernote({
			height : 180,
			focus : false,
			tabsize : 2
		});
	
		/*
		 * MARKDOWN EDITOR
		 */

		$("#mymarkdown").markdown({
			autofocus:false,
			savable:true
		})
					
	
	})

</script>

<?php 
	//include footer
	include("inc/footer.php"); 
?>