Skip to content

Instantly share code, notes, and snippets.

@blalond
Last active October 16, 2017 20:40
Show Gist options
  • Save blalond/b9e131d7b8ffdd28ff73aac5ecd89910 to your computer and use it in GitHub Desktop.
Save blalond/b9e131d7b8ffdd28ff73aac5ecd89910 to your computer and use it in GitHub Desktop.
TamperMonkey UserScript to mod Zendesk's TinyMCE with custom CSS from your Zendesk Help Center
// ==UserScript==
// @name Zendesk TinyMCE custom CSS
// @namespace http://tampermonkey.net/
// @version 0.1
// @description *** Replace "servantsystems" with your "Help Center" name so this can retrieve your custom CSS ***
// @author BrianLaLonde
// @match https://*.zendesk.com/knowledge/articles/*
// @require https://code.jquery.com/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant none
// ==/UserScript==
(function() {
'use strict';
var CSSUrlStr = "";
//get the public root of our knowledgebase and get the CSS from it
$.get("https://servantsystems.zendesk.com/hc/en-us", function(response) {
var indexScript = response.indexOf('<link rel="stylesheet" type="text/css" href="//p');
if (indexScript < 0)
alert("MonkeyScript: CSS not found");
else {
var indexScriptStart = response.indexOf('//p', indexScript);
var indexScriptEnd = response.indexOf('"', indexScriptStart);
CSSUrlStr = response.substring(indexScriptStart, indexScriptEnd);
}
waitForKeyElements ("#mceu_20", ModTheEditor);
});
//do some mods of the knowledgebase editor
function ModTheEditor (jNode) {
$('iframe').contents().find("link").remove();
$("iframe").contents().find("head").append('<link rel="stylesheet" href="https:'+CSSUrlStr+'">');
tinymce.activeEditor.dom.addClass('tinymce', 'article-body');
document.querySelector('._-src-components-ContentEditor-index---titleInput---1xUD7').style.margin = 0;
document.querySelector('._-src-components-ContentEditor-index---metadata_section---3Rg_3').style.margin = 0;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment