<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 =
|
$('<input type="hidden" name="my-html-content" />')
|
.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>
|
