TinymceWrapper: Customizing Ace Editor

The MODX TinymceWrapper (TW) Extra comes bundled with both the Ace and CodeMirror editors, either of which can be used inline or “popped” in a modal, and each with CSS hard-coded into their respective plugin. This tutorial focuses on the Ace editor window, specifically the “Close” button in inline mode which we’ll override with our own stylesheet.

I wanted the Ace “Close” button to resemble the disclosure arrows found in the Document and Content sections of the Manager, and to also remove the box-shadow from the editor window. Here’s a video of how it looks:

As you can see the end result is very minor but it fits in better with the Manager styling. I'm the first to admit this is a lot of fuss for something that isn’t even visible most of the time, not to mention the Manager styling will almost certainly change at some point. Still, it should be pretty easy to update the Ace styling going forward if/when necessary.

Let’s Get Started

1. First we need to copy the CSS from the plugin which starts around line 181. I’ve formatted it for easier viewing.
   

   .x-window-body {
   	overflow-x: hidden!important;
   }
   .codeT,.coder {
   	position: relative;
   }
   .codeT {
   	width:100%; resize: vertical; color: #000; min-height: 300px; margin: 0 auto;
   }
   .mce-popCode .mce-title {
   	text-align: center;
   }
   .mce-popCode .mce-close-button {
   	display: none;
   }
   .ace_editor {
   	text-align: left!important;
   }
   .mce-popCode .ace_editor {
   	height: inherit; width: 99.5%!important;
   }
   .coder .ace_editor {
   	height: inherit; width: inherit;
   }
   .mce-popAceEditor,.mce-popAceEditor .mce-container-body {
   	width: inherit!important;
   }
   .coder > .mce-close-button {
   	position: absolute; top: -1.25em; right: 0; cursor: pointer; background: #FFF; margin: 0 19px -4px 0; text-align: center; border-radius: 5px 5px 0 0; padding: 2px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);
   }
   .coder .ace_editor {
   	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);
   }
   .mce-popCode .ace_editor {
   	box-shadow: none;
   }
   .coder > .mce-close-button > .mce-ico {
   	font-size: 15px; color: #000;
   }

2. Paste the above code into a new ace.css file. You can rename it but the references in this tutorial use “ace.css”.
3. Now we need to update a few selectors. The code below only shows the modified selectors, the rest of the CSS is the same as the original (above). You can modify things however you like, this is just how I chose to do it. My changes are commented as // NOTE:.

   .coder > .mce-close-button {
   	position: absolute;
   	top: -22px; // NOTE: Center button vertically
   	right: 0;
   	cursor: pointer;
   //	background: #FFF; // NOTE: Moved this below
   	margin: 0 3px -4px 0;
   	text-align: center;
   //	border-radius: 5px 5px 0 0; // NOTE: Remove border-radius
   //	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4); // NOTE: Remove shadow
   }
   /*
   .coder .ace_editor { // NOTE: Remove shadow
   	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);
   }
   */
   .coder > .mce-close-button > .mce-ico {
   	font-size: 15px; color: #999; font-weight: 600; // NOTE: Mimic the disclosure arrows
   // 	background: #fff; // NOTE: Custom
   	-webkit-radius: 50%;
   	-moz-border-radius: 50%;
   	-o-border-radius: 50%;
   	border-radius: 50%; // NOTE: Nice circular background color
   	transition: all 0.3s; // NOTE: This replicates the Manager hover animation
   	padding: 1px; // NOTE: To center the “x"
   	width: 16px; height: 16px; // NOTE: Custom
   }
   .coder > .mce-close-button > .mce-ico:hover { // NOTE: New selector to get the blue background on hover
   	color: #fff; // NOTE: Custom
   	background: #3697cd; // NOTE: Custom
   }
   div.coder.ta { // NOTE: New selector to push editor window down to make room for the button
   	margin-top: .85em;
   }

4. Note: Depending on your version of TW this step may not be necessary. If so you can skip to Step 5.
   
   To verify, look for this line in the plugin around line 182:
   

   if(!$("#mainCSSAceEditor").length){

   If you find it change it to:
   

   if(!$("#mainCSSAceEditor").length && editor.getParam("twAceEditorSettings",{}).twLoadCSS !== 0){

5. In the TinymceWrapperCommonCode Chunk which you should have already duplicated and renamed TinymceWrapperCommonCode-custom, add twLoadCSS: 0, //default 1 to the twAceEditorSettings property:

   tinymce.init({
       ...
       external_plugins: {
         twAceEditor: "[ [++assets_url] ]components/tinymcewrapper/tinymceplugins/twAceEditor.js",
       },
       twAceEditorSettings: {
          ...
          twLoadCSS: 0 //default 1
       }
   })

   This prevents the default (hard-coded) CSS in twAceEditor.js from loading.
6. Almost done. All that’s left is to add a bit of javascript to the fields where we use Ace. For example, most likely you want to use Ace in the “Content” field so navigate to the TinymceWrapper Chunk:
   
   [ Resource Tree ] > Elements > Chunks > TinymceWrapper > TinyMCE > Backend > TinymceWrapperContent-custom.
   
   Then copy/paste tinymce.DOM.loadCSS('/css/ace.css'); at the very top of the file, before the init call:

   tinymce.DOM.loadCSS('/css/ace.css');
   tinymce.init({
     ...
   })

   This will ensure your custom stylesheet ace.css will be appended after other Ace-related CSS in the Manager document head. Now you can style Ace however you like and your changes will survive future TW updates.
   Note: If necessary modify the path and/or file name.

Repeat Step 6 for any TinymceWrapper Chunk where you want to use Ace, such as TVs.

That’s it. Your Ace “Close” button should now look just like the one in the video.