The Goal

Give your Ace editor a more unified look to better match the MODX Manager styling.

Author
Name:
Profession: Designer/Developer/Artist
Specialties: Front-end dev.; hand-drawing
Years’ Experience: 15
Employer: Self-employed
Tutorial Details
Experience Level: Beginner
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?
Skills: CSS
Tools: MODX, editor
Completion Time: 15-30 minutes
Related Article: Source
Tags: modx, tinymcewrapper, ace, editor
Memo +
Memo:

The mod in Step 4 is supposed to be included in the next major TW release (3.x.x).

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

Customize Ace Your Way

Credit: @donshakespeare, author of the TinymceWrapper MODX Extra provided the modified plugin code and various javascript below as well as the override instructions. I did the CSS mods.

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 small but it fits in better with the Manager styling. I admit this is a lot of fuss for something that isn’t visible most of the time, not to mention the Manager styling will almost certainly change at some point. Still, even if the Manager “look” does change it should be pretty easy to update the Ace styling, too.

Let’s Get Started

Important: This tutorial assumes you’ve duplicated the TinymceWrapper Chunk(s), given them a suffix, e.g. “-custom”, and are using a custom TW Property Set. If not your changes will be overwritten the next time you update TW.

The CSS we’ll be overriding is in the twAceEditor.js plugin located in assets/components/tinymcewrapper/tinymceplugins/.
  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.