How can I prevent that Redactor (and other WYSIWYG editors!) is messing up MODX tag language?

Redactor
#1

Hi there,

I always struggle with the problem that WYSIWYG editors are messing up MODX template language code. Especially if I use more complex Snippet calls with a lot of parameters this is a big problem.

Sample Snippet call before Redactor:

[[!Register?
    &submitVar=`registerbtn`
    &activationResourceId=`482`
    &activationEmailTpl=`ActivationEmailTpl`
    &activationEmailSubject=`Thanks for Registering!`
    &submittedResourceId=`483`
    &usergroups=`Members`
    &validate=`nospam:blank,
      username:required:minLength=^8^,
      password:required:minLength=^8^,
      password_confirm:password_confirm=^password^,
      fullname:required,
      email:required:email`
    &placeholderPrefix=`reg.`
]]

and after activating Redactor:

<p>
</p>
<p>[[!Register?
</p>
<p>    &submitVar=`registerbtn`
</p>
<p>    &activationResourceId=`482`
</p>
<p>    &activationEmailTpl=`ActivationEmailTpl`
</p>
<p>    &activationEmailSubject=`Thanks for Registering!`
</p>
<p>    &submittedResourceId=`483`
</p>
<p>    &usergroups=`Members`
</p>
<p>    &validate=`nospam:blank,
</p>
<p>  username:required:minLength=^8^,
</p>
<p>  password:required:minLength=^8^,
</p>
<p>  password_confirm:password_confirm=^password^,
</p>
<p>  fullname:required,
</p>
<p>  email:required:email`
</p>
<p>    &placeholderPrefix=`reg.`
</p>
<p>]]
</p>

If you turn on Rich Text for a resource its not possible to switch back without saving the messy stuff (need to go to database and manually set back the richtext field.

Any hint on how to prevent this behavior?
Shouldn’t this be a feature of the MODX wysiwyg editors to ignore MODX tag/template language?

Greetings,
Martin

#2

Hi Martin,

There’s not a whole lot we can do about that in Redactor currently (that I can think of at least) but I do know that can be very annoying.

To get around having to put complex tags into the content, there’s a few options I’ve used in the past:

  • Put it in a chunk, and call the chunk in the content instead. A simple one line [[$signupForm]] rather than what you posted will go a long way. It’s still likely to be wrapped in a <p> tag.
  • Use ContentBlocks with the Snippet input type to insert it instead. Or the Chunk input type to basically insert the chunk approach again.
  • Create a template variable “afterContent” that is available on all templates (though perhaps only for the full admins rather than every editor), and put any tags in there.
#3

Martin,

I too share your frustration here. My gripe is that even if you use HTML entities for the [[ and ]] characters when you switch back out of source mode those entities are converted back to the [[ and ]] characters. This isn’t so much a fault of Redactor but how JavaScript fundamentally handles inserting entities into the DOM.

Mark’s work arounds are currently your best options. If we come up with anything for native to Redactor itself we’ll definitely let you know.

I did just have one thought. If the new Redactor API provides a hook that allows us to modify the content before it is sent to MODX to be saved in the database we may be able to add some sort of support that, based on a selector like a class name, does a find and replace for converting [[ and ]] pairs to entities. I’ll look into if the v11 API, which we will ship with Redactor for MODX 3.0 supports this.

#4

[Update]
Bah, on second thought that wouldn’t work. Redactor doesn’t send the data itself over XHR, it update the DOM in the MODX form. So, I think we’d have to do this on the server side by

  • on save
  • within a certain selector, or based on a RegEx, convert [[ and ]] to entities so they are saved that way in the DB

What I’m describing is basically already available as part of Garry’s plugin here and may be worth a shot:
http://www.modx360.com/blog/2010/02/12/prevent-parsing-modx-tags/

#5

Thanks, jp - will have a look at this