We don't support AuthorHighlighter, but if the only thing you want to do is change the color of elements depending on an attribute value you could add a css to the WebApp using a javascript plugin [1].
In your css you can select attributes with certain values like this:
Code: Select all
// Note that the attribute name must be prepended with "data-attr-"
*[data-attr-color="red"] {
background-color: rgba(255, 0, 0, 0.19);
}
To load your css you can use a
WebappStaticResourcesFolder extension for your plugin. Check the link [1] for more info.
Once you have a static resource folder all you need to do is load your custom css into the WebApp by listening for the EDITOR_LOADED event inside a plugin:
Code: Select all
(function () {
goog.events.listenOnce(workspace, sync.api.Workspace.EventType.EDITOR_LOADED, function(e) {
var doc;
// We insert the editor content inside an element with id editor-frame
var editorFrame = document.getElementById('editor-frame');
// Depending on user preferences we may insert the editor content inside an iframe.
// In that case you should load your css inside the iframe.
if (editorFrame.nodeName === 'IFRAME') {
doc = editorFrame.contentDocument;
} else {
doc = editorFrame.ownerDocument;
}
// Static resources folders are accessible at the plugin-resources endpoint.
var url = "../plugin-resources/STATIC_RESOURCES_FOLDER/highlighter.css";
if (doc.createStyleSheet) {
doc.createStyleSheet(url);
} else {
var link = goog.dom.createDom('link', {
href: url,
rel: "stylesheet",
type: "text/css"
});
goog.dom.appendChild(doc.head, link);
}
});
})();
[1] -
https://www.oxygenxml.com/doc/versions/ ... gin,static