Thank you Brian. I think that would get me going quickly. I'll try it out this week.
And, you're right. That TinyEditor is pure genius! Cheers, -- Scott On Saturday, May 23, 2020 at 1:41:51 PM UTC-4, Brian Theado wrote: > > You could use iframes and adapt the 400 bytes of genius from > https://github.com/umpox/TinyEditor to suit your needs. This editor has 3 > text boxes along the top. One for each of html, css, and javascript. As you > type in them, the results is rendered in the box at the bottom. > > The TinyEditor code itself requires javascript. TiddlyWiki won't let you > directly embed javascript, so two levels of iframe are needed. Here is some > code you can pasted into tiddler in any TW and see the TinyEditor in action: > > \define iframehtml(content) > <!--CSS from excellent article at > https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/-- > > > <div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; > height: 0; overflow: hidden;"> > <iframe style="position: absolute; top:0; left: 0; width: 100%; height: > 100%;" > src=<<makedatauri """$content$""" "text/html">>> > </div> > \end > > <$macrocall $name=iframehtml content=""" > <!-- The 400 bytes of genius from https://github.com/umpox/TinyEditor --> > <body > oninput="i.srcdoc=h.value+'<style>'+c.value+ > '</style><script>'+j.value+'<\/script>'"> > <style> > textarea,iframe{width:100%;height:50%} > body{margin:0} > textarea{width:33%;font-size:18} > </style> > <textarea placeholder=HTML id=h></textarea> > <textarea placeholder=CSS id=c></textarea> > <textarea placeholder=JS id=j></textarea> > <iframe id=i> > """/> > > > Your use case would require only the javascript textbox. The html would be > hard-coded somehow to always display the output of the javascript from the > textbox. > > Maybe this isn't the best approach, but it would allow you to quickly get > a working prototype. > > Brian > > On Fri, May 15, 2020 at 5:16 PM Scott Sauyet <[email protected] > <javascript:>> wrote: > >> My recent success dynamically building a stand-alone TW to document a >> corporate system -- with many thanks due to helpful people here! -- has >> made me want to revisit something >> <https://groups.google.com/d/msg/tiddlywiki/2E5bvI1KI_E/hwJfG1oLAgAJ> I >> stopped working on several years ago when I changed jobs. It's another bit >> of documenting a system (this time a code library) by dynamically >> generating a TW. I have most of the pieces in place given what I've done >> recently. (It's behind a corporate wall, I'm afraid, so I can't share, but >> it's working quite well.) >> >> But there is one piece that I haven't even considered yet. If you visit >> the Ramda documentation <https://ramdajs.com/docs/>, you will see in the >> top-right of the code examples the choice of visiting that example in >> Ramda's >> REPL <https://ramdajs.com/repl/> or to open it inline. For the inline >> part we're embedding <https://runkit.com/docs/embed> RunKit >> <https://runkit.com/>. This is a nice feature for library >> documentation. Sanctuary.js <https://sanctuary.js.org/> has something >> even nicer. >> >> I have no problem trying to write my own version of something like this >> as a TW plugin, but I was wondering if this has already been done. >> Searches for REPL and Tiddlywiki turned up nothing useful. >> >> Are there any code sandbox / REPL plugins already available? Or is there >> anything similar that I might look to for inspiration, some way to sandbox >> some dynamic JS code away from the TW environment? >> >> Cheers, >> >> -- Scott >> >> -- >> You received this message because you are subscribed to the Google Groups >> "TiddlyWiki" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/tiddlywiki/101de743-eab4-45c7-a251-2ed782815e59%40googlegroups.com >> >> <https://groups.google.com/d/msgid/tiddlywiki/101de743-eab4-45c7-a251-2ed782815e59%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/83b362be-cbbe-4b7c-91e1-887d763f9404%40googlegroups.com.
