Created
February 12, 2015 17:02
-
-
Save robertleeplummerjr/b2570d1e97871bf66595 to your computer and use it in GitHub Desktop.
Medium.js with IFrame
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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