Skip to content

Instantly share code, notes, and snippets.

@robertleeplummerjr

robertleeplummerjr/iframe.html

Created February 12, 2015 17:02
Show Gist options
  • Save robertleeplummerjr/b2570d1e97871bf66595 to your computer and use it in GitHub Desktop.
Save robertleeplummerjr/b2570d1e97871bf66595 to your computer and use it in GitHub Desktop.
Download ZIP
Medium.js with IFrame
Raw
iframe.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Medium.js with an Iframe</title>
<script src="bower_components/undo/undo.js"></script>
<script src="bower_components/rangy-official/rangy-core.min.js"></script>
<script src="bower_components/rangy-official/rangy-classapplier.min.js"></script>
<script src="medium.js"></script>
<link href="medium.css" rel="stylesheet">
</head>
<body>
<h3>In IFrame</h3>
<button id="iFrameBold">Bold</button>
<iframe id="iFrameEditor" src="" style="width: 100%;height: 32px; border: none;"></iframe>
<h3>In Div</h3>
<button id="divBold">Bold</button>
<div id="divEditor" style="border:1px solid blue;height: 30px;"></div>
</body>
<script>
var iFrameDoc = document.getElementById('iFrameEditor').contentWindow.document,
iFrameBold = document.getElementById('iFrameBold'),
iFrameStyle = iFrameDoc.createElement('link'),
iFrameDivEditor = iFrameDoc.createElement('div'),
iFrameBody = iFrameDoc.body,
divBold = document.getElementById('divBold'),
divEditor = document.getElementById('divEditor');
iFrameBody.style.margin = 0;
iFrameStyle.setAttribute('href', 'medium.css');
iFrameStyle.setAttribute('rel', 'stylesheet');
iFrameDivEditor.setAttribute('style', 'border:1px solid green;height:30px');
iFrameDoc.body.appendChild(iFrameStyle);
iFrameDoc.body.appendChild(iFrameDivEditor);
var iFrameMedium = new Medium({
element: iFrameDivEditor,
mode: Medium.richMode,
tags: null,
placeholder: 'Test Text',
autofocus: true,
attributes: null
}),
divMedium = new Medium({
element: divEditor,
mode: Medium.richMode,
tags: null,
placeholder: 'Test Text',
autofocus: true,
attributes: null
});
iFrameBold.onmousedown = function(e){
iFrameMedium.select();
console.log('bold');
iFrameMedium.invokeElement('b', {
title: "I'm bold!",
style: "color: #66d9ef"
});
return false;
};
divBold.onmousedown = function(e){
divMedium.select();
console.log('bold');
divMedium.invokeElement('b', {
title: "I'm bold!",
style: "color: #66d9ef"
});
return false;
};
iFrameMedium.value('Test text');
divMedium.value('Test text');
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment