Add custom buttons

metatooling · Oct 3, 2019 · 82716e5 · 82716e5
1 parent a0497a4
commit 82716e5
Showing 1 changed file with 35 additions and 3 deletions.
diff --git a/docs/usage.rst b/docs/usage.rst
@@ -10,6 +10,38 @@ To use interdoc in a project::
 
 .. raw:: html
 
-   <script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
-   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
-         <script>var editor = new MediumEditor('div p');</script>
+    <script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
+    <script src="//cdn.jsdelivr.net/gh/metatooling/medium-button/src/medium-button.js"></script>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
+
+    <script>
+     var editor = new MediumEditor('body p', {
+         toolbar: {
+           buttons: ['b', 'h2', 'warning', 'pop']
+         },
+         extensions: {
+             // compact
+             'b':  new MediumButton({label:'BOLD', start:'<b>', end:'</b>'}),
+             'h2': new MediumButton({label:'h2', start:'<h2>', end:'</h2>'}),
+
+            // expanded
+            'warning': new MediumButton({
+               label: '<i class="fa fa-exclamation-triangle"></i>',
+               start: '<div class="warning">',
+               end:   '</div>'
+            }),
+
+         // with JavaScript
+            'pop': new MediumButton({
+               label:'POP',
+               action: function(html, mark, parent){
+                         alert('hello :)')
+                         return html
+                       }
+             })
+
+
+         }
+     })
+
+    </script>