Content Editable and Tiddlywiki

The contenteditible works in Tiddlywiki

Example

  1. Create a new tiddler in https://tiddlywiki.com
  2. Put the below in tiddler body and save
<ol contenteditable autofocus>
  <li>First try adding an item to this list</li>
  <li>Next try bolding text with the usual hotkey</li>
</ol>

646_chrome

Note: It wont be saved! But nice to be used like a scratchpad!

1 Like

Interesting,

If it can be printed, captured or copy and pasted before it is lost, it could be used for those temporary edits like insert name here.

If you use an iframe to host a data url containing an HTML page where the body is contenteditable

<iframe style="border:none;width:100%;height:auto;margin:0px" src='data:text/html;charset=utf-8, <html><title>Textfile</title><body contenteditable style="font:normal 13.6px sans-serif;background-color:%23f0fcff;margin:0;padding:0;"></body>'</iframe>

Then you can right-click inside the iframe, choose Save frame (or whatever your browser offers), then you can save your scratch pad to disk.

Horribly convoluted, but it works.

1 Like

@CodaCoder I have never seen Save Frame, which browser and does it need an addon?

This is amazing! I cannot see This Frame in Chrome/Edge, but it works in Firefox.

1 Like

Yes, Firefox.  

You can drop the data: url directly in the browser address bar.

I hadn’t thought about this before. It should be relatively simple to make some very crude WYSIYG editor widgets by just catching the events from the input elements. I am going to play with it a bit, it may be simple enough to just make a macro that handles it, if not I may try to make some new widgets.

1 Like

@CodaCoder I took the snippet you provided above and placed it in a tiddler on tiddlywiki.com with FireFox and its not working. Any suggestions so I can experiment?

This?

TW
  <script>
    /* Receive messages */
  </script>
  Tiddler
    iframe (data url)
      <html>
        <script> 
          /* capture events */
          /* post messages to parent window */
        </script>
        <body contenteditable>
          Stuff
        </body>
</>

Might work. Looks messy.

The screen I posted is TW .com

For me it works! FF /Windows 10.

I wonder what is happening?

On TiddlyWIki.com - FF 102.0.1 (64-bit) / Windows 11

Tony,
There is one imbalanced angle bracket. It is here (> </iframe>)

Use this code

<iframe style="border:none;width:100%;height:auto;margin:0px" src='data:text/html;charset=utf-8, <html><title>Textfile</title><body contenteditable style="font:normal 13.6px sans-serif;background-color:%23f0fcff;margin:0;padding:0;"></body>'></iframe>

I think this ordered list is the simplest one (see the first post of this thread)! When @inmysocks adds events and JS code to save the changes, that would be amazing! As Jed said, this may be a light and simple WYSIYG. That is exciting :wink:

Thanks @Mohammad .

Of note is

  • if I use the Edit / Preview then This Frame > Print Frame
    • If can preview the output by resulting pages

This makes me wonder if we could prepopulate an iframe with the rendered output of a multi-page tiddler then using “content editable” to insert page breaks to do the final page layout.