The toolbar in web-editor is completely customizable, there are many customizations that you can achieve, few use cases would be :
The XML Documentation Solution provides an easy way to customize the web editor toolbar. Below are the high level things that would help in customization:
{
"type": "buttonGroup",
"label": "DitamapEdit",
"show": ["@isAuthorMode", "@isMapEditMode"],
"items": [
{
"type": "button",
"icon": "textSpaceBefore",
"variant": "quiet",
"title": "Insert Before",
"on-click": "AUTHOR_SHOW_INSERT_ELEMENT_BEFORE_BLOCK_UI"
},
{
"type": "button",
"icon": "textSpaceAfter",
"variant": "quiet",
"title": "Insert After",
"on-click": "AUTHOR_SHOW_INSERT_ELEMENT_AFTER_BLOCK_UI"
}
}
Also sharing the few sample use cases and ways to achieve this via web editor customization:
{
"type": "button",
"icon": "alert",
"variant": "quiet",
"title": "Click here",
"on-click": "custom.alert"
}
In this example, it is registering an event with the key name as 'custom.alert'
(function (document, $, ns) {
"use strict";
$(document).ready(setTimeout(function() {
fmxml.commandHandler.subscribe({
key: 'custom.alert',
next: function() {
alert("XML Documentation solution version x.x")
}
})
}, 1000))
})(document, Granite.$, Granite.author);
More References:
1) XML Documentation Installation and Configuration Guide - Refer chapter 'Customize Web Editor- Customize toolbar'
2) Sample code for customization
Views
Replies
Total Likes