Skip to content

Instantly share code, notes, and snippets.

@nrkn

nrkn/iframe.html

Created July 14, 2015 23:57
Show Gist options
  • Save nrkn/00491cdb982072fb9193 to your computer and use it in GitHub Desktop.
Save nrkn/00491cdb982072fb9193 to your computer and use it in GitHub Desktop.
Download ZIP
Medium.js invoke in iframe
Raw
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>iframe</title>
<style>
#edit {
outline: 1px solid #ccc;
min-height: 1em;
}
</style>
<link href="medium.css" rel="stylesheet" />
</head>
<body>
<div id="edit">The quick brown fox</div>
<script src="undo.js"></script>
<script src="rangy-core.js"></script>
<script src="rangy-classapplier.js"></script>
<script src="medium.js"></script>
</body>
</html>
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>invoke in iframe</title>
<style>
iframe {
border: 1px solid #ddd;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<button>Bold</button>
<iframe src="iframe.html"></iframe>
<script>
(function(){
'use strict';
var button = document.querySelector( 'button' );
var iframe = document.querySelector( 'iframe' );
iframe.onload = function(){
var idocument = iframe.contentDocument;
var Medium = iframe.contentWindow.Medium;
var div = idocument.querySelector( '#edit' );
var medium = new Medium({
element: div,
mode: Medium.richMode,
tags: null,
autofocus: true,
attributes: null
});
button.onmousedown = function(){
medium.invokeElement( 'b', {
title: 'I\'m bold',
style: 'color: #39f'
});
return false;
};
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment