Skip to content

Instantly share code, notes, and snippets.

@cobbweb

cobbweb/index.html

Created January 16, 2014 03:41
Show Gist options
  • Save cobbweb/8449414 to your computer and use it in GitHub Desktop.
Save cobbweb/8449414 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrating Sir Trevor Format Bar inside a scrolling element/container
Raw
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../sir-trevor-icons.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../sir-trevor.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
}
.scrolling-container {
position: absolute;
top: 200px;
left: 200px;
width: 800px;
height: 800px;
overflow-y: auto;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="scrolling-container">
<form>
<div class="errors"></div>
<textarea class="sir-trevor" name="content"></textarea>
<input type="submit" value="Submit">
</form>
</div>
<script src="../components/jquery/jquery.js"></script>
<script src="../components/underscore/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="../components/Eventable/eventable.js" type="text/javascript" charset="utf-8"></script>
<script src="../sir-trevor.js" type="text/javascript" charset="utf-8"></script>
<script src="../locales/de.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
SirTrevor.DEBUG = true;
SirTrevor.LANGUAGE = "en";
SirTrevor.setBlockOptions("Text", {
onBlockRender: function() {
console.log("Text block rendered");
}
});
window.editor = new SirTrevor.Editor({
el: $('.sir-trevor'),
blockTypes: [
"Heading",
"Text",
"List",
"Quote",
"Image",
"Video",
"Tweet"
],
formatBarContainer: $('.scrolling-container')
});
$('form').bind('submit', function(){
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment