Skip to content

Commit 27cf587

Browse files
noirbizarrenoirbizarre
committed
Allow toolbar to be multiline
1 parent ea7b00b commit 27cf587

23 files changed

+172
-49
lines changed

‎OPTIONS.md

+10
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,16 @@ enables/disables whether the toolbar should be displayed when selecting multiple
232232

233233
The set of buttons to display on the toolbar.
234234

235+
Can also be nested for multiline toolbar:
236+
`[['bold', 'italic', 'underline', 'pre'], ['anchor', 'h2', 'h3', 'quote']]`
237+
238+
**NOTE:**
239+
Depending on the theme you are using, you may need to make some visual
240+
adjustment for proper rendering
241+
(ie. when buttons don't have fixed width).
242+
243+
244+
235245
***
236246
#### `diffLeft`
237247
**Default:** `0`

‎demo/multiline-toolbar.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>medium editor | demo</title>
6+
<link rel="stylesheet" href="css/demo.css">
7+
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
8+
<link rel="stylesheet" href="../dist/css/medium-editor.css">
9+
<link rel="stylesheet" href="../dist/css/themes/flat.css" id="medium-editor-theme">
10+
</head>
11+
<body>
12+
<a href="https://github.com/yabwe/medium-editor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
13+
<div class="top-bar">
14+
Theme:
15+
<select id="sel-themes">
16+
<option value="themes/default" selected>default</option>
17+
<option value="themes/roman">roman</option>
18+
<option value="themes/mani">mani</option>
19+
<option value="themes/flat">flat</option>
20+
<option value="themes/bootstrap">bootstrap</option>
21+
<option value="themes/tim">tim</option>
22+
<option value="themes/beagle">beagle</option>
23+
</select>
24+
</div>
25+
<div id="container">
26+
<h1>Medium Editor</h1>
27+
<div class="editable">
28+
<h2>Font Awesome</h2>
29+
<p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
30+
<p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones...</p>
31+
</div>
32+
</div>
33+
<p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
34+
<script src="../dist/js/medium-editor.js"></script>
35+
<script>
36+
var editor = new MediumEditor('.editable', {
37+
toolbar: {
38+
buttons: [
39+
['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'pre'],
40+
['h2', 'h3', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'quote'],
41+
['orderedlist', 'unorderedlist', 'outdent', 'indent', 'anchor', 'image', 'removeFormat']
42+
],
43+
},
44+
buttonLabels: 'fontawesome'
45+
});
46+
cssLink = document.getElementById('medium-editor-theme');
47+
48+
document.getElementById('sel-themes').addEventListener('change', function () {
49+
cssLink.href = '../dist/css/' + this.value + '.css';
50+
});
51+
</script>
52+
</body>
53+
</html>

‎dist/css/themes/beagle.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.medium-toolbar-arrow-under:after {
2-
border-color: #000 transparent transparent transparent;
3-
top: 40px; }
2+
border-color: #000 transparent transparent transparent; }
43

54
.medium-toolbar-arrow-over:before {
65
border-color: transparent transparent #000 transparent; }

‎dist/css/themes/beagle.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/bootstrap.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.medium-toolbar-arrow-under:after {
2-
border-color: #428bca transparent transparent transparent;
3-
top: 60px; }
2+
border-color: #428bca transparent transparent transparent; }
43

54
.medium-toolbar-arrow-over:before {
65
border-color: transparent transparent #428bca transparent; }

‎dist/css/themes/bootstrap.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/default.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.medium-toolbar-arrow-under:after {
2-
border-color: #242424 transparent transparent transparent;
3-
top: 50px; }
2+
border-color: #242424 transparent transparent transparent; }
43

54
.medium-toolbar-arrow-over:before {
65
border-color: transparent transparent #242424 transparent;

‎dist/css/themes/default.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/flat.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.medium-toolbar-arrow-under:after {
2-
top: 60px;
32
border-color: #57ad68 transparent transparent transparent; }
43

54
.medium-toolbar-arrow-over:before {

‎dist/css/themes/flat.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/themes/tim.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.medium-toolbar-arrow-under:after {
2-
border-color: #2f1e07 transparent transparent transparent;
3-
top: 60px; }
2+
border-color: #2f1e07 transparent transparent transparent; }
43

54
.medium-toolbar-arrow-over:before {
65
border-color: transparent transparent #2f1e07 transparent; }

0 commit comments

Comments
 (0)