Update

taufik-nurrohman · May 22, 2017 · dc70306 · dc70306
1 parent 0f14877
commit dc70306
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>Rich Text Editor</title>
     <link href="favicon.ico" rel="shortcut icon">
     <link href="rich-text-editor.css" rel="stylesheet">
-    <style>@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400i,700i|Roboto+Mono:400,700,400i,700i);body,kbd{font-family:'Roboto Condensed',Helmet,FreeSans,Sans-Serif}.rich-text-editor-source,code{font-family:'Roboto Mono','Courier New',Courier,'Nimbus Mono L',Monospace;font-size:86%}body,html{padding:.5em;margin:0;font-size:18px;line-height:1.5;background:#ffa;color:#000}.rich-text-editor-tool{opacity:1;visibility:visible;background:#000}.rich-text-editor-tool a{color:#aaa}.rich-text-editor-tool a:focus,.rich-text-editor-tool a:hover{background:0 0;color:#ccc}.rich-text-editor-source{background-color:#000;color:#bbb;font-size:70%;line-height:1.25;text-shadow:0 1px 3px #000}a{color:#00a;text-decoration:none}.rich-text-editor{box-shadow:0 1px 3px rgba(0,0,0,.4)}.rich-text-editor-view{padding:2em}.rich-text-editor-view abbr,a:focus,a:active{border:none;color:#a00}.rich-text-editor-view kbd{display:inline-block;vertical-align:middle;background:#eee;color:#444;text-shadow:0 1px 0 #fff;border-top:1px solid #f5f5f5;border-bottom:1px solid #ccc;padding:0 .35em;box-shadow:0 1px 3px rgba(0,0,0,.2)}</style>
+    <style>@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400i,700i|Roboto+Mono:400,700,400i,700i);body,kbd{font-family:'Roboto Condensed',Helmet,FreeSans,Sans-Serif}.rich-text-editor-source,code{font-family:'Roboto Mono','Courier New',Courier,'Nimbus Mono L',Monospace;font-size:86%}body,html{padding:.5em;margin:0;font-size:18px;line-height:1.5;background:#ffa;color:#000}.rich-text-editor-tool{opacity:1;visibility:visible;background:#000}.rich-text-editor-tool a{color:#aaa}.rich-text-editor-tool a:focus,.rich-text-editor-tool a:hover{background:0 0;color:#ccc}.rich-text-editor-source{background-color:#000;color:#bbb;font-size:70%;line-height:1.25;text-shadow:0 1px 3px #000}a{color:#00a;text-decoration:none}.rich-text-editor{box-shadow:0 1px 3px rgba(0,0,0,.4)}.rich-text-editor-view{padding:2em}.rich-text-editor-view abbr,a:focus,a:active{border:none;color:#a00}.rich-text-editor-view kbd{display:inline-block;background:#eee;color:#444;text-shadow:0 1px 0 #fff;border-top:1px solid #f5f5f5;border-bottom:1px solid #ccc;padding:0 .35em;box-shadow:0 1px 3px rgba(0,0,0,.2)}</style>
   </head>
   <body>
     <form method="get">
@@ -20,8 +20,9 @@ <h2>Examples</h2>
       <li><a href="rich-text-editor.x-x.html" target="_blank">Disable Source View</a></li>
       <li><a href="rich-text-editor.tool-x.html" target="_blank">Hide Editor Tools</a></li>
       <li><a href="rich-text-editor.tool-v.html" target="_blank">Show Editor Tools</a></li>
-      <li><a href="rich-text-editor.tool-top.html" target="_blank">Put Editor Tools on Top</a></li>
       <li><a href="rich-text-editor.tool-custom.html" target="_blank">Custom Editor Tools</a></li>
+      <li><a href="rich-text-editor.tool-top.html" target="_blank">Custom Editor Tools: Position</a></li>
+      <li><a href="rich-text-editor.t-custom.html" target="_blank">Custom Editor Tools: Icons</a></li>
       <li><a href="rich-text-editor.t.code.html" target="_blank">Custom Tool: Code</a></li>
       <li><a href="rich-text-editor.t.abbr.html" target="_blank">Custom Tool: Abbreviation</a></li>
       <li><a href="rich-text-editor.t.font.html" target="_blank">Custom Tool: Font</a></li>

diff --git a/rich-text-editor.css b/rich-text-editor.css
@@ -96,8 +96,8 @@
   font:inherit;
   font-family:'Courier New',Courier,'Nimbus Mono L',Monospace;
   padding:.25em .5em;
-  resize:vertical;
   overflow:auto;
+  resize:none;
   display:none;
 }
 .rich-text-editor.source .rich-text-editor-view {display:none}

diff --git a/rich-text-editor.min.css b/rich-text-editor.min.css
diff --git a/rich-text-editor.t-custom.html b/rich-text-editor.t-custom.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Demo</title>
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="rich-text-editor.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Plain Text</h1>
+    <p><textarea></textarea></p>
+    <h1><a href="http://fontawesome.io" rel="nofollow" target="_blank">Font Awesome</a></h1>
+    <p><textarea></textarea></p>
+    <script src="rich-text-editor.min.js"></script>
+    <script>
+    var textareas = document.querySelectorAll('textarea'),
+        editor_0 = new RTE(textareas[0], {
+            text: {
+                b: ['Bold', '<strong>B</strong>', 'Ctrl+B'],
+                i: ['Italic', '<em>I</em>', 'Ctrl+I'],
+                u: ['Underline', '<u>U</u>', 'Ctrl+U'],
+                a: ['Link', 'A', 'Ctrl+L'],
+                x: ['Source', '&#x22ef;', 'Ctrl+Shift+X']
+            }
+        }),
+        editor_1 = new RTE(textareas[1], {
+            text: {
+                b: ['Bold', '<i class="fa fa-bold"></i>', 'Ctrl+B'],
+                i: ['Italic', '<i class="fa fa-italic"></i>', 'Ctrl+I'],
+                u: ['Underline', '<i class="fa fa-underline"></i>', 'Ctrl+U'],
+                a: ['Link', '<i class="fa fa-link"></i>', 'Ctrl+L'],
+                x: ['Source', '<i class="fa fa-ellipsis-h"></i>', 'Ctrl+Shift+X']
+            }
+        });
+    </script>
+  </body>
+</html>