How do people go about giving their editors the right level of flexibility when it comes to design? I’m specifically looking for ways to implement a title that may have additional HTML in.
Let’s take this example of some HTML markup from a design, where some of the title may be italicised:
<h2><em>Behold the</em> mighty title</h2>
I don’t want to give the editors full blown access to a RTE as it’s supposed to be a title. I’ve solved this many times before using either multiple textboxes and/or a trimmed down markdown editor. These feel rather clunky and particularly bad from an editor perspective - I’m looking for the “golden egg” solution"!
I’ve built sites before where we had a specific “RTE Headline” configuration of the rich text editor (TinyMCE in this case), where we only gave access to styles like Bold, Italic, and possibly Foreground Color. Most importantly, we disabled the Source Code button, so they could not add things that way around. It mostly worked well, save for a few TinyMCE quirks on HTML tags, I would say.
Keeping it simple.. custom rendering of the h2 to wrap the first two words in the <em>.. (so editor still only has simple textbox)
Or maybe a little more logic.. look for a stop word, 10 words first 3… etc..
Depends on the complexity of the title that you want to hand off to the editor and how well the styling fits if they have have carte blanche with some sort of html/markup editing…
<h2><em>Behold the mighty title that I have completely overextended for no reason what so ever just because I can</em> so there </h2>
As of v16.3, the Tiptap RTE can be configured to allow a subset of capabilities, e.g. only bold and italic.
So you could use a minimal configuration for Tiptap, enabling only the italic extension, no toolbar items, and set the dimensions height to 50px.
The downside of this is that Tiptap will wrap the text in a <p> tag. (There are ways around this, but would mean rolling your own custom Tiptap property-editor, with a forced Document schema.)
I have an inherited site that doesn’t use RTEs - everything is in markdown.
One of the few advantages of this are they can do italics and the like without borking everything. Causes all sorts of other issues but might work for you?
For this specific use-case, we’ve successfully used a standard TextBox, but allowed the editors to use asterisks to emphasize certain words (so in your example they’d input "*Behold the* mighty title") — and we’d take care of the rest.
It’s been used both for italicizing and bolding of said headers - even for rendering the emphasized part in a lighter weight than the rest, when the design dictated it.
Like @greystate I prefer teaching editors a little Markdown. But then the client needs to put in line breaks, and I often end up just creating a simple RTE for that.
From an editor experience point of view, I’d rather use an RTE than making editors write a technical syntax, markdown.
Lee’s suggestion of using a forced document schema feels like the right answer. I also wonder if there’d be appetite for a collection of custom property editors for stripped-back RTEs.
Thanks for the insights! Seems like RTE and Markdown are the preferences here. I’m keen to get stuck into the new world of TipTap to see what it can do so this sounds like a perfect opportunity.
I had a little play with your package @greystate - works nicely, thanks for sharing
