Adding an editable (styled) box into content area

Hi, my first post - I downloaded modx last week and I’m really impressed with it. I was pretty sure I’d got my head around chunks, snippets, etc, but now I’m not so sure!

What I want is to give the user the ability to easily insert a specially-styled box into the main content area - into which they can add text of their choosing, and for them to be able to insert this box at any point in their main content.

Essentially it would just be one of those boxes made up of 4 containing divs for the 4 rounded corners (and styled in CSS), like this...



Is there some way the user could just enter a tag so that this HTML could be added automatically to the content area, but with the middle bit (<p></p>) still editable by them?

As I understand it, if I use a chunk, then the user has no control over what’s inside that chunk. And a template variable isn’t appropriate because the user may need to add more than one of these editable boxes on a page. I’ve tried using a snippet but quite honestly I’m getting nowhere. Is a snippet the right solution for this?

TIA

Seems like you’re looking more for templates in RTEs (like Tiny MCE and FCKeditor). I think you can do that but there’s not a simple solution that isn’t hackish I can think of using MODx.

The RTE doesn’t like items not in <p></p> tags. I suffered with this last night. You might want to try turning off the auto-cleanup feature (Manager > Resources > Plug-ins > TinyMCE and select the settings tab).

heres a link that might help set up custom templates into your tinymce editor:

http://modxcms.com/forums/index.php/topic,30069.msg182569.html#msg182569

(it may not be the same tinymce version # you have but the instructions should be the same along with the file setups)

I’m guessing (without really knowing...) that you could write a plugin that would look for a particular format option that you never use and then replace it with the four divs you are looking for.

So, for example, you might ask users to select ’Preformatted’ in TinyMCE, and then when the page is submitted, get the plugin to replace <pre></pre> with the divs and a paragraph tag.

Or you could use Breezer’s method, which looks way better.

Wow, what a quick response here!

Thanks for the advice - some good tips here, and more for me to read up on.

You know, in addition to that, I’m now wondering if I’ve been getting a bit hung with this whole ’template within a template’ way of thinking. Perhaps it would be just as easy for the user if I make 2 chunks out of that above code:

chunk 1: "boxopen" (the 4 opening divs)
chunk 2: "boxclose" (the 4 closing tags)

Then just tell them to enclose the text that they want in a box like this:
[glow=yellow,2,300]{{boxopen}} Your text here {{boxclose}}[/glow]

..and then for good measure, they should swipe over the whole lot and from the ’format’ dropdown, change paragraph to div. (OK, we’re getting a bit divtastic now, but at least it will be more valid code)

I’ll have a read and play around with what you’ve all suggested, but in the meantime, it’s good to know there are several ways to approach this. Thanks again.

{{boxopen/close}} chunk is yet another straightforward idea. Lots of ways to skin things in MODx.

modx rocks!!