scribe-plugin-enhanced-link-tooltip
Version:
A Scribe plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links.
78 lines (70 loc) • 2.05 kB
HTML
<!-- Pretty much copy and paste from http:/guardian.github.io/scribe -->
<html>
<head>
<meta charset="UTF-8">
<title>Scribe</title>
</head>
<style>
* {
box-sizing: border-box;
}
.toolbar {
margin-bottom: 1em;
}
button {
height: 3em;
}
button.active {
border-style: inset;
}
.scribe-editor-1 {
margin: 0 auto;
font-family: cursive;
}
.scribe {
height: 370px;
overflow: auto;
margin-bottom: 1em;
border: 1px solid hsl(0, 0%, 80%);
padding: 0.5em;
}
.scribe-html {
width: 100%;
font-family: monospace;
border: 1px solid hsl(0, 0%, 80%);
padding: 0.5em;
}
p {
margin-top: 0;
}
</style>
<link rel="stylesheet" href="scribe-plugin-link-tooltip.css">
<body>
<div class="scribe-editor-1">
<h1>Scribe</h1>
<div class="toolbar">
<button data-command-name="bold">Bold</button>
<button data-command-name="italic">Italic</button>
<button data-command-name="underline">Underline</button>
<button data-command-name="strikeThrough">Strike Through</button>
<button data-command-name="removeFormat">Remove Formatting</button>
<button data-command-name="linkTooltip">Link</button>
<button data-command-name="unlink">Unlink</button>
<button data-command-name="insertOrderedList">Ordered List</button>
<button data-command-name="insertUnorderedList">Unordered List</button>
<button data-command-name="indent">Indent</button>
<button data-command-name="outdent">Outdent</button>
<button data-command-name="blockquote">Blockquote</button>
<button data-command-name="code">Code</button>
<button data-command-name="h2">H2</button>
<button data-command-name="undo">Undo</button>
<button data-command-name="redo">Redo</button>
</div>
<div class="scribe"></div>
<h2>Output</h2>
<textarea class="scribe-html" rows="15" readonly></textarea>
</div>
<script src="http://guardian.github.io/scribe/bower_components/requirejs/require.js" data-main="./example"></script>
</body>
</html>