<section>
	<h1 class="blue" data-id="#plugins/editor"><i class="ace-icon fa fa-text-height grey"></i> Editor</h1>

	<div class="hr hr-double hr32"></div>
	<!-- #section:plugins/editor -->
	
	
	<!-- #section:plugins/editor.wysiwyg -->
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/editor.wysiwyg">Wysiwyg Editor</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more info about wysiwyg plugin, please see its page at:
				<a href="http://mindmup.github.io/bootstrap-wysiwyg/">http://mindmup.github.io/bootstrap-wysiwyg/</a>
			</li>

			<li>
				To use it, you should include:
				<br />
				<code>assets/js/jquery.hotkeys.js</code> 
				<br />
				<code>assets/js/bootstrap-wysiwyg.js</code>
			</li>

			<li>
				For ease of use I have made a wrapper for it and some extra options
			</li>
			
			<li>
				A basic example is as follows:
<pre data-language="html">
<div id="my-editor"><!-- custom html data --></div>
</pre>
<pre data-language="javascript">
$('#my-editor').ace_wysiwyg();
</pre>

			</li>
		  </ul>
		</div>
		 
		<h3 class="info-title smaller">Options</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Current ace_wysiwyg wrapper options are:
				<ol>
					<li><code>wysiwyg</code> options to send to the plugin</li>
					<li><code>speech_button</code> whether to add speech input button in Chrome</li>
					<li><code>toolbar</code> an array of toolbar buttons and options</li>
					<li><code>toolbar_place</code> optional toolbar placement function</li>
				</ol>
				
				For example the following creates a wyswiwyg with 3 toolbar buttons:
<pre data-language="javascript">
$('#my-editor').ace_wysiwyg({
  toolbar: {
    'bold',
    'italic',
    null,

    {
        name: 'font',
        title: 'Custom tooltip',
        values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
    }
  }
});
</pre>
			</li>
			
			<li>
				As you can see each toolbar button, is a string or an array of options.
				<br />
				All buttons have the following properties:
				<ol>
					<li><code>title</code> which is button's tooltip text</li>
					<li><code>icon</code> which is button's icon</li>
					<li><code>className</code> which is button's class name</li>
				</ol>
			</li>
			
			<li>
				A <code>null</code> value puts a separator(space) between buttons.
			</li>

			<li>
				Toolbar buttons and options are as follows:
				<ol>
					<li><code>font</code> which takes an array as font names:
<pre data-language="javascript">
{
   name: 'font',
   title: 'optional custom tooltip',
   icon: 'fa-leaf', //some custom icon
   values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
}
</pre>
					</li>
					<li><code>fontSize</code> which takes an array as font sizes:
<pre data-language="javascript">
{
   name: 'fontSize',
   title: 'optional custom tooltip',
   values:{1 : 'Size#1' , 2 : 'Size#2' , 3 : 'Size#3' , 4 : 'Size#4' , 5 : 'Size#5'}
}
</pre>
					</li>
					
					<li><code>bold</code>:
<pre data-language="javascript">
'bold',

//or
{
   name: 'bold',
   title: 'optional custom tooltip',
   icon: 'fa-leaf' //some custom icon
}
</pre>
					</li>
					<li><code>italic</code></li>
					<li><code>strikethrough</code></li>
					<li><code>underline</code></li>
					
					<li><code>insertunorderedlist</code></li>
					<li><code>insertorderedlist</code></li>
					<li><code>outdent</code></li>
					<li><code>indent</code></li>
					
					<li><code>justifyleft</code></li>
					<li><code>justifycenter</code></li>
					<li><code>justifyright</code></li>
					<li><code>justifyfull</code></li>
					
					<li><code>createLink</code> which inserts a link:
<pre data-language="javascript">
{
   name: 'createLink',
   title: 'optional custom tooltip',
   placeholder: 'link input placeholder',
   button_class: 'btn-purple',//insert button's class
   button_text: 'Add Link'//insert button's text
}
</pre>
					</li>
					
					<li><code>unlink</code></li>
					
					<li><code>insertImage</code> which inserts an image:
<pre data-language="javascript">
{
   name: 'createLink',
   title: 'optional custom tooltip',
   placeholder: 'image url input placeholder',
   button_insert_class: 'btn-purple',//insert button's class
   button_insert: 'Add Link',//insert button's text
   
   choose_file: true,//'Whether there should be a "Choose File" button
   button_class: 'btn-success',//choose button's class
   button_text: 'Choose an Image'//choose button's text
}
</pre>
					</li>
					
					<li>
						<code>foreColor</code> and <code>backColor</code>
						which have a list of color values:
<pre data-language="javascript">
{
   name: 'foreColor',
   title: 'optional custom tooltip',
   values: ['red', 'blue', '#FF7721']
}
</pre>
					</li>
					
					<li><code>undo</code></li>
					<li><code>redo</code></li>
					<li><code>viewSource</code></li>
				</ol>
			</li>
			
			<li>
				For an example please see <code>examples/wysiwyg.html</code>
			</li>
			
			<li>
				By default toolbar is placed before content area.
				Using <code>toolbar_place</code> you can put the toolbar somewhere else:
<pre data-language="javascript">
$('#editor2').css({'height':'200px'}).ace_wysiwyg({
 toolbar_place: function(toolbar) {
    //for example put the toolbar inside '.widget-header'
    return $(this).closest('.widget-box')
           .find('.widget-header').prepend(toolbar)
           .find('.wysiwyg-toolbar').addClass('inline');
 }
});
</pre>
				It should return the new toolbar
			</li>
			
			<li>
				Add <code>.wysiwyg-style1</code> and <code>.wysiwyg-style2</code>
				to toolbar for alternative styles:
<pre data-language="javascript">
$('#editor2').ace_wysiwyg().prev().addClass('wysiwyg-style2');
</pre>
			</li>
		   </ul>
		 </div>


		<h3 class="info-title smaller">Notes</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Normally you want to send the contents of wysiwyg editor to server.
				<div class="space-4"></div>
				Most plugins convert a textarea element into a wysiwyg editor,
				by hiding the textarea and creating an editable DIV or iframe,
				and updating textarea's content as needed.
				
				<div class="space-4"></div>
				
				You can use the following method to send html content to server along with form data:
<pre data-language="javascript">
$('#myform').on('submit', function() {
  var hidden_input =
  $('&lt;input type="hidden" name="my-html-content" /&gt;')
  .appendTo('#myform');

  var html_content = $('#myeditor').html();
  hidden_input.val( html_content );
  //put the editor's HTML into hidden_input and it will be sent to server
});
</pre>

			</li>
			
			<li>
				Firefox by default supports image resize inside wyswiwyg editor.
				<br />
				For other browsers you can use jQuery UI's resizable feature.
				<br />
				An example is included in wysiwyg demo page:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>wysiwyg.js</code>
				<br />
				Search for <code>enableImageResize</code> function inside it
			</li>
		 </ul>
		</div>
	</div>
	<!-- /section:plugins/editor.wysiwyg -->
	
	
	<div class="space-12"></div>
	
	<!-- #section:plugins/editor.markdown -->
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#plugins/editor.markdown">Markdown Editor</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For more info about markdown editor plugin, please see its page at:
				<a href="http://toopay.github.io/bootstrap-markdown/">http://toopay.github.io/bootstrap-markdown/</a>
			</li>
		 
			<li>
				To use markdown editor you should include 
				<code>assets/js/markdown/markdown.js</code>
				and
				<code>assets/js/markdown/bootstrap-markdown.js</code>
				and optionally
				<code>assets/js/bootbox.js</code>
				if you prefer bootstrap modals to default browser dialogs
			</li>
			
			<li>
				For better styling you should put it inside a widget box
<pre data-language="html">
<div class="widget-box widget-color-blue">
   <div class="widget-header widget-header-small"></div>
   <div class="widget-body">
      <div class="widget-main no-padding">
         <textarea name="content" data-provide="markdown" rows="10"></textarea>
      </div>
   </div>
</div>
</pre>
			</li>
			
			<li>
				By specifying <code>data-provide="markdown"</code> attribute for the textarea element,
				markdown editor will automatically be initiated.
			</li>

		 </ul>
		</div>
	</div>
	<!-- /section:plugins/editor.markdown -->

	<!-- /section:plugins/editor -->
</section>