MODX CustomJS
bobray has since released his MessageManager Extra which greatly extends the front-end sending and receiving functionality of messages. However, you will still need to follow this tutorial if you want to send/receive rich-text messages using TinymceWrapper.
Rich-text Messages
*While this tutorial focuses on the Manager’s “Messages” feature it can also be used to turn any Manager textarea field into a RTE.
MODX has an internal messaging system that allows admins (or registered users) to send plain-text messages to other users from the Manager. It’s basic but it works.
With help from @bobray I was able to extend this feature so plain-text messages could be displayed on the front-end as part of a membership account. It works fine, but as the Admin I also wanted the ability to send rich-text messages from the Manager to front-end user accounts. That was going to require more work, and as far as I knew there’s no way to do it.
Except there is.
I had forgotten about the customJS
property built-into the TinymceWrapper plugin until @donshakespeare reminded me. Essentially it allows for the conversion of any back-end textarea into a RTE. Here’s how it’s done.
@donshakespeare, author of the TinymceWrapper MODX Extra provided the code below, and I added a few TinyMCE configuration settings to flesh it out.
- If you haven’t already done so create a custom Property Set (pset) for the TinymceWrapper Plugin.
Important: This will ensure your custom property settings won’t be overwritten when you update TW. - In the custom pset
chunkSuffix
field enter -custom. - Set
customJS
property to Yes. - Set
customJSchunks
property to Message. - Create a new Chunk and name it
TinymceWrapperMessage-custom
. This Chunk will contain the 3 code blocks below.
* If you want to use a static file for the Chunk, knock yourself out. - First we’ll add the
init
code so you can configure TinyMCE however you like. In your Chunk (or static file) paste the following three code blocks:
The properties shown above (e.g. plugins, toolbar, elements etc.) are for example only, change their values to suit your needs./* NOTE !Begin TinyMCE Configuration */ function tinyMessageInit(id){ tinymce.init({ selector: "#"+id, [ [$TinymceWrapperCommonCode] ], statusbar: true, plugins: "imagetools,autoresize,paste,contextmenu,image,media,fullscreen,code", valid_elements: "*[*]", resize: true, autoresize_min_height: 100, toolbar: "bullist numlist | link unlink | image media | styleselect", contextmenu: "code | link | image media | fullscreen" }) } /* !End TinyMCE Configuration */
- Next we’ll target the button that toggles TinyMCE on/off. Thus turning a
textarea
into a RTE field.
/* NOTE !Begin Enable/Disable Button Toggle */ function tinyMessageButton(thisButton,id){ if($(thisButton).hasClass("m_active")){ if($("#"+id).is(':visible') ){ $(thisButton).find("button").text("Disable TinyMCE"); $(thisButton).removeClass("m_active"); tinyMessageInit(id) } } else{ $(thisButton).addClass("m_active"); $(thisButton).find("button").text("Enable TinyMCE"); tinymce.get(id).destroy(); $("#"+id).fadeIn(); } } /* !End Enable/Disable Button Toggle */
- Finally we’ll target the textarea to apply TinyMCE, which in this case is the
messages
field. We’ll also generate the toggle button.
/* NOTE !Begin Target textarea */ Ext.onReady(function(){ $(document).on("mouseenter", ".modx-window", function () { if ($(this).has("input[name=sendemail]").length && $(this).has("textarea[name=message]").length){ var tinyContent = $(this).find("textarea[name=message]"); tinyMessageId = tinyContent.attr("id"); if ($(this).has(".tinyMessageButton").length){} else{ $(this).find(".x-toolbar-left-row").prepend("p onclick="tinyMessageButton(this,tinyMessageId)" class="tinyMessageButton m_active x-btn x-btn-small x-btn-icon-small-left x-btn-noicon" unselectable="on">Enable TinyMCE p>); } } }); }); /* !End Target textarea */
When you put those code blocks together you end up with a Messages textarea that can be toggled between plain- and rich-text.
Important Note
As it applies to the Messages field, to ensure your rich-text content is actually sent as... rich-text, you must disable TinyMCE before sending.
That’s right, compose your message as rich-text, but if you send the message with TinyMCE enabled your lovingly crafted rich-text content will be stripped leaving only plain-text/HTML. I know it seems counter-intuitive but be sure you’re looking at raw HTML when you hit Send.
That being said keep in mind the same message viewed in Manager > [User] > Messages (vs. on the front-end) will be plain-text/raw code. Why? The Manager Messages feature does not natively support viewing rich-text anymore than it does composing. Unlike the composing workaround shown here there doesn't seem to be one for viewing. Hopefully this will change in a future version of MODX but until then we have to deal with a slightly finicky workflow.
Get Creative
To use it elsewhere within the Manager simply:
- Determine the name of the textarea you want to target. Your browser's Web Inspector feature will be your friend.
- Either duplicate an existing Chunk or create a new one and give it a new name, e.g.
TinymceWrapperMyNewTextarea-custom
. - Add the (Chunk) name e.g., MyNewTextarea to the
customJSchunks
property as a comma-separated array, e.g.Message, MyNewTextarea
. - Use the above code and modify it for use with the new textarea.