Recently we updated CONF from 6.9 to 7.15. We are using a jQuery script since years to customize the editor in some specific spaces. Goal: the layout menu of the editor gets 3 additional buttons to add sections containing predefined content.
Since we are on CONF 7.15 the editor does not immediately load that script when clicking on “Edit”. A F5 reload in the browser is needed to load the script.
The support of Atlassian did give us a hint how to setup the jQuery to be loaded immediately when editor opens:
But the complex script we are using does not work with that additional part AJS.$(document).bind(‘DOMNodeInserted’, function(event) {
Even when the page editor is reloaded.
How can we solve that? Any idea?
You might also use that script if you like and if you get it running.
The script (user macro) was embedded into the Main Layout after the body:
#if( $spaceKey == "xyz" )
$action.getHelper().renderConfluenceMacro("{cpp-montanwcustomizations}")
#end
The user macro:
## Macro title: cpp-montanwcustomizations
## Macro has a body: N
## oce customizations in view and edit mode requested by Manfred Hofinger in C19050254
##
## Developed by: Stefan Baader
## Date created: 03/07/2019
## Installed by: Stefan Baader
## @noparams
<script type="text/javascript">
AJS.toInit(function(){
/* ------------------------------------------------- VIEW MODE customizations ------------------------------------------------------------- */
/* ---------------- Images unknown attachment placeholder includes file name --------------- */
// items in page view
unknownAttachments1 = AJS.$('img.confluence-embedded-image[src*="unknown-attachment"]');
AJS.$( unknownAttachments1 ).each(function() {
AJS.$( this ).replaceWith('<div style="display:inline-block; padding: 3px; border:1px solid black; background-color: #ccc; ">Unknown Attachment '+ unknownAttachments1.attr('title') + '</div>');
});
/* ------------------------------------------------- EDIT MODE customizations ------------------------------------------------------------- */
/* ------------------------ Images change automatically by detection ----------------------- */
// get the current total of images in the page content
initialTotalOfImages = AJS.$('#wysiwygTextarea_ifr').contents().find( ".confluence-embedded-image" ).length;
// check DOM every x milliseconds
// function calls itself again after x milliseconds
function checkDOMChange(savedTotalOfImages) {
// unknown Attachments items in editor view
unknownAttachments11 = window.parent.AJS.$('#wysiwygTextarea_ifr').contents().find('img.confluence-embedded-image[src*="unknown-attachment"]');
AJS.$( unknownAttachments11 ).each(function() {
altText = "Unknown Attachment: "+unknownAttachments11.attr('title');
AJS.$( this ).attr("alt", altText );
AJS.$( this ).attr("style", "padding:3px; border:1px solid black; " );
AJS.$( this ).removeAttr("src");
});
// check for any new element being inserted here,
// or a particular node being modified
// in every loop get the current amount of images:
currentTotalOfImages = window.parent.AJS.$('#wysiwygTextarea_ifr').contents().find( ".confluence-embedded-image" ).length;
// condition: some images are f.e. added
if( savedTotalOfImages != currentTotalOfImages ){
// check for images with a height attribute (height="250" - only set when inserted initially)
imagesToChange = window.parent.AJS.$('#wysiwygTextarea_ifr').contents().find( ".confluence-embedded-image[height='250']" );
if( imagesToChange ){
AJS.$( imagesToChange ).each(function() {
//AJS.$( this ).animate({width: "372"}, 700);
AJS.$( this ).attr("width", "372");
AJS.$('#image-size-input').val("372px");
AJS.$( this ).attr("border", "1");
AJS.$( this ).addClass('confluence-content-image-border');
AJS.$( this ).removeAttr("height");
});
}
}
// equalice the totals of images before new loop:
savedTotalOfImages = currentTotalOfImages;
// function calls itself again after x milliseconds
setTimeout(function(){ checkDOMChange(savedTotalOfImages); }, 500);
}
// call the function initially:
checkDOMChange( initialTotalOfImages );
/* ------------------------------ Sections --------------------------------------- */
// default table for special predefined 1, 2 or 3 column sections
tableSnippet = '<table class="wrapped confluenceTable montanwTable"><colgroup><col><col><col><col></colgroup><tbody><tr><th class="confluenceTh">SW-Nr.</th><th class="confluenceTh">Sach-Nr.</th><th class="confluenceTh">Bezeichnung</th><th class="confluenceTh" style="text-align: center;" data-mce-style="text-align: center;">Anz.</th></tr><tr><td class="confluenceTd"> </td><td class="confluenceTd"> </td><td class="confluenceTd"> </td><td class="confluenceTd" style="text-align: center;" data-mce-style="text-align: center;"> </td></tr></tbody></table>';
// special predefined 1, 2 or 3 column sections
sectionSnippet1 = '<div class="columnLayout single" data-layout="three-equal"><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><p><br/></p>' + tableSnippet + '</div></div></div>';
sectionSnippet2 = '<div class="columnLayout two-equal" data-layout="three-equal"><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><p><br/></p>' + tableSnippet + '<p><span style="font-family: Arial , sans-serif;font-size: 10.0pt;" data-mce-style="font-family: Arial , sans-serif; font-size: 10.0pt;"> <span style="color: rgb(0,0,0);" data-mce-style="color: #000000;"> <br> </span> </span></p></div></div><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><h2><strong>1. Ü2 - Hauptpunkt 3Z</strong></h2><h3>1.1 Ü3 - Nebenpunkt</h3><h4>1.1.1 Ü4 - Unterpunkt</h4><p>Text</p></div></div></div>';
sectionSnippet3 = '<div class="columnLayout three-equal" data-layout="three-equal"><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><p><br/></p>' + tableSnippet + '<p><span style="font-family: Arial , sans-serif;font-size: 10.0pt;" data-mce-style="font-family: Arial , sans-serif; font-size: 10.0pt;"> <span style="color: rgb(0,0,0);" data-mce-style="color: #000000;"> <br> </span> </span></p></div></div><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><h2><strong>1. Ü2 - Hauptpunkt 3Z</strong></h2><h3>1.1 Ü3 - Nebenpunkt</h3><h4>1.1.1 Ü4 - Unterpunkt</h4><p>Text</p></div></div><div class="cell normal" data-type="normal"><div class="innerCell" contenteditable="true"><hr><p><br></p></div></div></div>';
// editor content is loaded inside an iframe, so window.parent.. is used here to access the iframe DOM element
window.parent.AJS.$('#wysiwygTextarea_ifr').ready(function() {
AJS.$('#wysiwygTextarea_ifr').contents().find( ".columnLayout" ).css("box-shadow", "none");
setTimeout(function(){
window.parent.AJS.$('#wysiwygTextarea_ifr').contents().find( ".columnLayout" ).click(function() {
AJS.$('#wysiwygTextarea_ifr').contents().find( ".columnLayout" ).css("box-shadow", "none");
currentSection = AJS.$( this );
AJS.$( currentSection ).css("box-shadow", "0px 0px 8px cyan");
});
window.parent.AJS.$('#wysiwygTextarea_ifr').contents().find( "*" ).click(function() {
//alert( this.className );
if( this.className == 'columnLayout' ){
AJS.$('#wysiwygTextarea_ifr').contents().find( ".columnLayout" ).css("box-shadow", "none");
currentSection = AJS.$( this );
AJS.$( currentSection ).css("box-shadow", "0px 0px 8px cyan");
}
});
if (typeof currentSection === 'undefined') {
currentSection = AJS.$('#wysiwygTextarea_ifr').contents().find( ".columnLayout" ).get(0);
}
}, 1000);
// Page Layout buttons for special predefined 1, 2 or 3 column sections and injection of those sections
AJS.$( "#page-layout-2" ).click(function() {
if( AJS.$( "#addThreeColSectionTemplate").length ){
}else{
AJS.$( "#add-layout-section" ).after('<a id="addThreeColSectionTemplate" class="aui-button aui-button-subtle" data-tooltip="Add 3 columns section template"><span class="trigger-text">3 col</span></a>');
}
AJS.$( "#addThreeColSectionTemplate" ).click(function() {
AJS.$( currentSection ).after( sectionSnippet3 );
//alert("Section added");
});
if( AJS.$( "#addTwoColSectionTemplate").length ){
}else{
AJS.$( "#add-layout-section" ).after('<a id="addTwoColSectionTemplate" class="aui-button aui-button-subtle" data-tooltip="Add 2 columns section template"><span class="trigger-text">2 col</span></a>');
}
AJS.$( "#addTwoColSectionTemplate" ).click(function() {
AJS.$( currentSection ).after( sectionSnippet2 );
//alert("Section added");
});
if( AJS.$( "#addOneColSectionTemplate").length ){
}else{
AJS.$( "#add-layout-section" ).after('<a id="addOneColSectionTemplate" class="aui-button aui-button-subtle" data-tooltip="Add 1 column section template"><span class="trigger-text">1 col</span></a>');
}
AJS.$( "#addOneColSectionTemplate" ).click(function() {
AJS.$( currentSection ).after( sectionSnippet1 );
//alert("Section added");
});
});
});
});
</script>