We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 40088
    • 708 Posts
    Hmmm... that's interesting.

    Does your example code go in the twAceEditor file or is it a customJS kinda thing?
      Todd
      • 42562
      • 1,145 Posts
      Replace:
       tinymce.DOM.loadCSS('/css/ace.css');

      With:
      var taskCounter = 0;
      var aceCheck = setInterval(function(){
        if($("style#mainCSSace").length){
          taskCounter++;
        }
        if(taskCounter = 1){
          setTimeout(function(){
            $("head").append('<link rel="stylesheet" href="/css/ace.css">');
            clearInterval(aceCheck);
          }, 1000);
        }
      },2000);
        TinymceWrapper: Complete back/frontend content solution.
        Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
        5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
        • 40088
        • 708 Posts
        It does indeed add the stylesheet immediately before the closing </head> tag, but for some reason the styles are not being applied.

        Thanks. I'm getting closer.
          Todd
          • 40088
          • 708 Posts
          Update:

          When the editor window opens this appears immediately after my stylesheet,

          <style id="mainCSSAceEditor">...


          So my styles are still being overwritten.
            Todd
            • 42562
            • 1,145 Posts
            Gotcha!
            See update https://github.com/donShakespeare/twAceEditor

            Open said plugin, around line 182
            if(!$("#mainCSSAceEditor").length){

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


            Now you have ya self a cool way to nuke the style you love sooo much twLoadCSS ... from here, you are own your own
             tinymce.init({
                external_plugins: {
                  twAceEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twAceEditor.js",
                },
                twAceEditorSettings: {
                   twLoadCSS: 0 //default 1
                }
             })
              TinymceWrapper: Complete back/frontend content solution.
              Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
              5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
              • 40088
              • 708 Posts
              Getting closer.

              I'm using Ace inline but with the above code Ace opens in "popped"mode, and my Ace theme gets replaced with something else.

              Granted, my custom Ace CSS is now working.
                Todd
                • 42562
                • 1,145 Posts
                Please see full twAceEditorSettings config https://github.com/donShakespeare/twAceEditor
                tinymce.init({
                  external_plugins: {
                    twAceEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twAceEditor.js", //plugin location
                  },
                  twAceEditorSettings: { // pass in any Ace official setting you like to overwrite default behaviour
                    twAceEditorCDNbase: "",
                    twPoppedTitle: "",
                    twPopped: 0, // popped (default) or inline
                    twPoppedWidth: "",
                    twPoppedHeight: "",
                    twEmmetUrl: "", // emmet.js version must be for Ace
                    twViewInlineButtonText: "View Inline",
                    twCloseButtonText: "Close",
                    twLoadCSS: 0, //default 1
                    twInlineWidth: "auto",
                    twInlineHeight: 250
                  },
                  toolbar: "code",
                  contextmenu: "code"
                });
                  TinymceWrapper: Complete back/frontend content solution.
                  Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                  5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
                  • 40088
                  • 708 Posts
                  Got it.

                  I had two instances of twAceEditorSettings.

                  Thank you.
                    Todd
                    • 40088
                    • 708 Posts
                    @donshakespeare

                    In case you're curious, my interest in overriding the default Ace CSS was so I go could make the inline "close" button look like the the default disclosure arrows as seen on the Content and Document sections of the manager, complete with the animated hover transition which, thanks to your help in overriding the plugin CSS, I've done.

                    Now it has a more unified look. It's nice.
                      Todd
                      • 42562
                      • 1,145 Posts
                      Awesome, Please share your CSS here and on the github page.
                      And I might even incorporate it if I can.
                        TinymceWrapper: Complete back/frontend content solution.
                        Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                        5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.