From 625bacdc5618c279e959127344965f895dc2b038 Mon Sep 17 00:00:00 2001
From: easylogic <cyberuls@gmail.com>
Date: Tue, 26 Jan 2016 00:22:59 +0900
Subject: [PATCH] update hint , toolbar, icons

---
 00-getting-started.md |   7 ++-
 01-deep-dive.md       | 137 ++++++++++++++++++++++++++++++++++++++++++
 02-examples.md        |  34 ++++++++++-
 _config.yml           |   6 +-
 4 files changed, 178 insertions(+), 6 deletions(-)

diff --git a/00-getting-started.md b/00-getting-started.md
index 5f1832d..f0d83cf 100644
--- a/00-getting-started.md
+++ b/00-getting-started.md
@@ -48,17 +48,20 @@ Include the Following code in your HTML <code>&lt;HTML&gt;</code> tag
 {% highlight html %}
 <!-- include libraries(jQuery, bootstrap, fontawesome) -->
 <link href="{{ site.bootstrap_css }}" rel="stylesheet">
-<link href="{{ site.fontawesome_css }}" rel="stylesheet">
 <script src="{{ site.jquery_js }}"></script> 
 <script src="{{ site.bootstrap_js }}"></script> 
 
 <!-- include summernote css/js-->
 <link href="{{ site.summernote_css }}" rel="stylesheet">
-<script src="{{ site.summernote_js }}"></script>
+<script src="{{ site.summernote_js }}"></script> 
 {% endhighlight %}
 
 Don't forget to change the file's path if you downloaded summernote in a different folders.
 
+> ##### Remove font-awesome dependency
+> After v0.7.4, font-awesome depedency is removed.
+
+
 ### Insert
 
 Add <code>div</code> into <code>body</code>; this targeted element will later be rendered to summernote editing tool.
diff --git a/01-deep-dive.md b/01-deep-dive.md
index d904bc2..4bfab3d 100644
--- a/01-deep-dive.md
+++ b/01-deep-dive.md
@@ -9,6 +9,126 @@ permalink: /deep-dive/
 
 Customize by Initializing various options and modules.
 
+### Custom Icon
+
+
+You can define icon list by your icon set. 
+
+{% highlight javascript %}
+$('#summernote').summernote({
+  icons : {
+    font : 'fa fa-font',
+    ...
+  }
+});
+{% endhighlight %}
+
+#### Summernote Icon Set
+
+
+> After v0.7.4, summernote use own icon set. 
+
+summernote icon has note-icon-* prefix.
+ 
+{% highlight javascript %}
+  icons: {
+    'align': 'note-icon-align',
+    'alignCenter': 'note-icon-align-center',
+    'alignJustify': 'note-icon-align-justify',
+    'alignLeft': 'note-icon-align-left',
+    'alignRight': 'note-icon-align-right',
+    'indent': 'note-icon-align-indent',
+    'outdent': 'note-icon-align-outdent',
+    'arrowsAlt': 'note-icon-arrows-alt',
+    'bold': 'note-icon-bold',
+    'caret': 'note-icon-caret',
+    'circle': 'note-icon-circle',
+    'close': 'note-icon-close',
+    'code': 'note-icon-code',
+    'eraser': 'note-icon-eraser',
+    'font': 'note-icon-font',
+    'frame': 'note-icon-frame',
+    'italic': 'note-icon-italic',
+    'link': 'note-icon-link',
+    'unlink': 'note-icon-chain-broken',
+    'magic': 'note-icon-magic',
+    'menuCheck': 'note-icon-check',
+    'minus': 'note-icon-minus',
+    'orderedlist': 'note-icon-orderedlist',
+    'pencil': 'note-icon-pencil',
+    'picture': 'note-icon-picture',
+    'question': 'note-icon-question',
+    'redo': 'note-icon-redo',
+    'square': 'note-icon-square',
+    'strikethrough': 'note-icon-strikethrough',
+    'subscript': 'note-icon-subscript',
+    'superscript': 'note-icon-superscript',
+    'table': 'note-icon-table',
+    'textHeight': 'note-icon-text-height',
+    'trash': 'note-icon-trash',
+    'underline': 'note-icon-underline',
+    'undo': 'note-icon-undo',
+    'unorderedlist': 'note-icon-unorderedlist',
+    'video': 'note-icon-video'
+  }
+{% endhighlight %}
+
+#### Font-Awesome Icon Set
+
+you also can use font-awesome icons.
+
+> First, load font-awesome css file.
+
+{% highlight html %}
+<link href="{{ site.fontawesome_css }}" rel="stylesheet"> 
+{% endhighlight %}
+ 
+please set icon option. 
+ 
+{% highlight javascript %}
+  icons: {
+   'align': 'fa fa-align',
+   'alignCenter': 'fa fa-align-center',
+   'alignJustify': 'fa fa-align-justify',
+   'alignLeft': 'fa fa-align-left',
+   'alignRight': 'fa fa-align-right',
+   'indent': 'fa fa-indent',
+   'outdent': 'fa fa-outdent',
+   'arrowsAlt': 'fa fa-arrows-alt',
+   'bold': 'fa fa-bold',
+   'caret': 'caret',
+   'circle': 'fa fa-circle',
+   'close': 'fa fa-close',
+   'code': 'fa fa-code',
+   'eraser': 'fa fa-eraser',
+   'font': 'fa fa-font',
+   'frame': 'fa fa-frame',
+   'italic': 'fa fa-italic',
+   'link': 'fa fa-link',
+   'unlink': 'fa fa-chain-broken',
+   'magic': 'fa fa-magic',
+   'menuCheck': 'fa fa-check',
+   'minus': 'fa fa-minus',
+   'orderedlist': 'fa fa-list-ol',
+   'pencil': 'fa fa-pencil',
+   'picture': 'fa fa-picture-o',
+   'question': 'fa fa-question',
+   'redo': 'fa fa-repeat',
+   'square': 'fa fa-square',
+   'strikethrough': 'fa fa-strikethrough',
+   'subscript': 'fa fa-subscript',
+   'superscript': 'fa fa-superscript',
+   'table': 'fa fa-table',
+   'textHeight': 'fa fa-text-height',
+   'trash': 'fa fa-trash',
+   'underline': 'fa fa-underline',
+   'undo': 'fa fa-undo',
+   'unorderedlist': 'fa fa-list-ul',
+   'video': 'fa fa-video-camera'
+  }
+{% endhighlight %} 
+
+
 ### Custom toolbar, popover
 
 Summernote allows you to make own custom toolbar.
@@ -70,6 +190,12 @@ You can compose a toolbar with pre-shipped buttons.
   * `ul`: toggle unordered list
   * `paragraph`: dropdown for paragraph align
   * `height`: set line height
+  * `justifyCenter`: set align center   
+  * `justifyLeft`: set align left 
+  * `justifyRight`: set align right 
+  * `justifyFull`: set align jusitfy 
+  * `outdent`: set outdent
+  * `indent`: set indent
 * Misc
   * `fullscreen`: toggle fullscreen editing mode
   * `codeview`: toggle wysiwyg and html editing mode
@@ -112,6 +238,17 @@ popover: {
 }
 {% endhighlight %}
 
+#### Hide toolbar
+
+You can hide summernote toolbar. 
+
+{% highlight javascript %}
+$('#summernote').summernote({
+  toolbar: false
+});
+{% endhighlight %} 
+ 
+
 ### Custom placeholder
 You can define placeholder with `placeholder` option.
 
diff --git a/02-examples.md b/02-examples.md
index d6c1c24..1c9cb9e 100644
--- a/02-examples.md
+++ b/02-examples.md
@@ -109,7 +109,6 @@ If you include a `CodeMirror` on a page, you can use CodeMirror to Codeview. Inc
 {% highlight html %}
 <!-- include libraries(jQuery, bootstrap, fontawesome) -->
 <link href="{{ site.bootstrap_css }}" rel="stylesheet"> 
-<link href="{{ site.fontawesome_css }}" rel="stylesheet">
 <script src="{{ site.jquery_js }}"></script> 
 <script src="{{ site.bootstrap_js }}"></script> 
 
@@ -192,6 +191,7 @@ Summernote support autocomplete features, hint for helping typing. You can defin
 </tbody>
 </table>
 
+
 ### Hint for words
 
 <div class="hint2basic"></div>
@@ -342,3 +342,35 @@ $(".hint2mention").summernote({
   }
 });
 {% endhighlight %}
+
+
+### Hint Direction
+ 
+ You can set hint direction (top or bottom), default value is bottom. 
+
+<div class="hint2direction"></div>
+<script type="text/javascript">
+$(".hint2direction").on('summernote.init', function(e, layoutInfo) {
+  layoutInfo.statusbar.hide();
+}).summernote({
+  height: 40,
+  toolbar: false,
+  placeholder: 'type with apple, orange, watermelon, lemon',
+  hintDirection : 'top',
+  statusbar: false,
+  hint: {
+    words: ['apple', 'orange', 'watermelon', 'lemon'],
+    match: /\b(\w{1,})$/,
+    search: function (keyword, callback) {
+      callback($.grep(this.words, function (item) {
+        return item.indexOf(keyword) === 0;
+      }));
+    }
+  }
+});
+</script>
+{% highlight javascript %}
+$(".hint2direction").summernote({
+  hintDirection : 'top'
+});
+{% endhighlight %}
diff --git a/_config.yml b/_config.yml
index 6e6254f..6f3ba7a 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,14 +10,14 @@ url: "http://summernote.org" # the base hostname & protocol for your site
 github_username: summernote
 
 # Summernote settings
-version: 0.7.3
+version: 0.7.4
 repository: "https://github.com/summernote/summernote"
 jquery_js: "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"
 bootstrap_css: "http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"
 bootstrap_js: "http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"
 fontawesome_css: "http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css"  
-summernote_js: "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.3/summernote.js"
-summernote_css: "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.3/summernote.css"
+summernote_js: "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.4/summernote.js"
+summernote_css: "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.4/summernote.css"
 
 # Build settings
 markdown: kramdown