The Goal

Turn any textarea in the MODX Manager into a fully customizable rich-text editor.

Author
Name:
Profession: Designer/Developer/Artist
Specialties: Front-end dev.; hand-drawing
Years’ Experience: 15
Employer: Self-employed
Tutorial Details
Experience Level: Noob
Noob: No technical skills required.
Beginner: Basic technical skills and knowledge.
Intermediate: Code literate. Strong technical skills.
Advanced: Code “fluent”. Extensive technical skills.
Über Geek: Need I say more?
Tools: MODX
Completion Time: Less than 15 minutes
Tags: modx, tinymce, rte, tinymcewrapper
Note +
Memo:

You may find this TinymceWrapper thread on the MODX forums useful, too.

This is a member-contributed tutorial. If possible, contact the author with questions or comments.

MODX CustomJS

Update
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.

Credit
@donshakespeare, author of the TinymceWrapper MODX Extra provided the code below, and I added a few TinyMCE configuration settings to flesh it out.
  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.

Going Forward
There’s been some speculation that the Messages feature might be removed from the next big version of MODX. Apparently some people are questioning if it’s a feature worth keeping. I hope it stays.

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.