Permission de styles (accès par groupe)
Description
Ce plugin restreint l'accès à certains styles de l'éditeur de texte enrichi en fonction des rôles/groupes d'utilisateurs dans Umbraco. Cet exemple a été utilisé pour Pully.
How it works
Only users in the "advancedRTE" group can use H3 and H5 headings. Other users:
- Cannot see these options in the dropdown menu
- Have these tags automatically converted to
<p>tags when inserting content
Configuration
Modifiez les constantes en fonction de vos besoins.:
REQUIRED_GROUP: L'alias du groupe d'utilisateurs qui a accès aux styles restreints (default: "advancedRTE")FORBIDDEN: Ensemble de styles de titres à restreindre (default:["h3", "h5"])
Code
javascript
tinymce.PluginManager.add("headingpermissions", function (editor) {
const REQUIRED_GROUP = "advancedRTE";
let isAdvancedUser = false;
const FORBIDDEN = ["h3", "h5"];
function checkUserGroup() {
try {
const injector = angular.element(document.body).injector();
if (!injector) return;
const userService = injector.get("userService");
userService.getCurrentUser().then(user => {
isAdvancedUser = user.userGroups?.includes(REQUIRED_GROUP);
});
} catch (e) {
console.warn("Impossible de récupérer l'utilisateur Umbraco", e);
}
}
function hideForbiddenHeadings() {
if (isAdvancedUser) return;
document
.querySelectorAll(".tox-menu .tox-collection__item")
.forEach(item => {
const label = item
.querySelector(".tox-collection__item-label")
?.textContent
?.trim()
?.toLowerCase();
if (FORBIDDEN.includes(label)) {
item.style.display = "none";
}
});
}
const observer = new MutationObserver(() => {
hideForbiddenHeadings();
});
editor.on("init", function () {
checkUserGroup();
observer.observe(document.body, {
childList: true,
subtree: true
});
});
editor.on("BeforeSetContent", function (e) {
if (!e.content) return;
e.content = e.content
.replace(/<\/?h3[^>]*>/gi, "<p>")
.replace(/<\/?h5[^>]*>/gi, "<p>");
});
});Installation
Enregistrez le code sous
plugin.jsdans/App_Plugins/Backoffice/tinymce/plugins/headingpermissions/Ajouter la configuration suivante au fichier appsettings.json du projet dans la section TinyMCE :
javascript
"external_plugins": "{\"headingpermissions\":\"/App_Plugins/Backoffice/tinymce/plugins/headingpermissions/plugin.js\"}"Exemple d'utilisation
Dans cet exemple de configuration :
- Créez un groupe d'utilisateurs avec l'alias "advancedRTE" dans Umbraco
- Les utilisateurs de ce groupe peuvent utiliser les titres H3 et H5
- Pour tous les autres utilisateurs, ces options seront masquées et les balises seront automatiquement converties
Contributors
Clément Favre