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.

1. 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.
2. In the custom pset chunkSuffix field enter -custom.
3. Set customJS property to Yes.
4. Set customJSchunks property to Message.
5. 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.
6. 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:
   

   /* 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 */

   The properties shown above (e.g. plugins, toolbar, elements etc.) are for example only, change their values to suit your needs.
7. 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 */

8. 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 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:

1. Determine the name of the textarea you want to target. Your browser's Web Inspector feature will be your friend.
2. Either duplicate an existing Chunk or create a new one and give it a new name, e.g. TinymceWrapperMyNewTextarea-custom.
3. Add the (Chunk) name e.g., MyNewTextarea to the customJSchunks property as a comma-separated array, e.g. Message, MyNewTextarea.
4. Use the above code and modify it for use with the new textarea.