Merge pull request #132 from teambition/master

修复 enter 键问题和支持固定 toolbar
sofish · Feb 4, 2015 · 6cb6e09 · 6cb6e09
2 parents 44d75cc + 8218133
commit 6cb6e09
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 107 deletions.
diff --git a/index.html b/index.html
@@ -48,6 +48,24 @@
   <span id="hinted" class="icon-pre disabled" title="Toggle Markdown Hints"></span>
 </div>
 
+<!-- <div id="custom-toolbar" class="pen-menu pen-menu" style="display: block; top: 20px; left: 10px;">
+  <i class="pen-icon icon-insertimage" data-action="insertimage"></i>
+  <i class="pen-icon icon-blockquote" data-action="blockquote"></i>
+  <i class="pen-icon icon-h2" data-action="h2"></i>
+  <i class="pen-icon icon-h3" data-action="h3"></i>
+  <i class="pen-icon icon-p active" data-action="p"></i>
+  <i class="pen-icon icon-code" data-action="code"></i>
+  <i class="pen-icon icon-insertorderedlist" data-action="insertorderedlist"></i>
+  <i class="pen-icon icon-insertunorderedlist" data-action="insertunorderedlist"></i>
+  <i class="pen-icon icon-inserthorizontalrule" data-action="inserthorizontalrule"></i>
+  <i class="pen-icon icon-indent" data-action="indent"></i>
+  <i class="pen-icon icon-outdent" data-action="outdent"></i>
+  <i class="pen-icon icon-bold" data-action="bold"></i>
+  <i class="pen-icon icon-italic" data-action="italic"></i>
+  <i class="pen-icon icon-underline" data-action="underline"></i>
+  <i class="pen-icon icon-createlink" data-action="createlink"></i>
+</div> -->
+
 <div data-toggle="pen" data-placeholder="im a placeholder">
   <h2>Enjoy live editing (+markdown)</h2>
 
@@ -81,6 +99,7 @@ <h2>Enjoy live editing (+markdown)</h2>
 
   // config
   var options = {
+    // toolbar: document.getElementById('custom-toolbar'),
     editor: document.querySelector('[data-toggle="pen"]'),
     debug: true,
     list: [

diff --git a/src/pen.css b/src/pen.css
@@ -39,7 +39,7 @@
   background: transparent;
   background-image: none;
 }
-
+.pen-menu { min-width: 320px; }
 .pen-menu, .pen-input{font-size:14px;line-height:1;}
 .pen-menu{white-space:nowrap;box-shadow:1px 2px 3px -2px #222;background:#333;background-image:linear-gradient(to bottom, #222, #333);opacity:0.9;position:fixed;height:36px;border:1px solid #333;border-radius:3px;display:none;z-index:1000;}
 .pen-menu:after {top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
@@ -82,7 +82,6 @@
   line-height: 1em;
   margin-left: .2em;
 }
-
 .pen-menu .icon-location:before { content: '\e815'; } /* '' */
 .pen-menu .icon-fit:before { content: '\e80f'; } /* '' */
 .pen-menu .icon-bold:before { content: '\e805'; } /* '' */
@@ -117,7 +116,6 @@
 .pen-menu .icon-h6:before { content: 'H6'; }
 .pen-menu .icon-p:before { content: 'P'; }
 .pen-menu .icon-insertimage:before { width:1.8em;margin:0;position:relative;top:-2px;content:'IMG';font-size:12px;border:1px solid #fff;padding:2px;border-radius:2px; }
-
 .pen {
   position: relative;
 }