Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.
#9 Custom WYSIWYG with 1 additional button, multi-language
2sxc Custom WYSIWYG with Additional Button
This example show how we customize more of TinyMCE.
You can learn how to:
- Use
addTranslations()
- Use
configureOptions(...) to extend the toolbar
- Use configureAddOns to change button options for the image
- Run code when the editor is running
init to add button defininiots
Important: The feature "Public Use of Edit Form" is disabled
The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.
New syntax: String WYSIWYG With Additional Button and Labels
This example keeps the default buttons and adds another one, with multi-language labels
Hit this edit button to have a look:
@Kit.Toolbar.Empty().New("UiStringWysiwygButtonMl").AsTag()
Old syntax: String WYSIWYG With Additional Button and Labels
This example keeps the default buttons and adds another one, with multi-language labels
Hit this edit button to have a look:
@Edit.Toolbar(toolbar: new [] { "toolbar=empty", "+new?contentType=UiStringWysiwygButtonMl" })
Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.
#9 Custom WYSIWYG with 1 additional button, multi-language
/*
This examples shows a custom WYSIWYG JS WebComponent with additional language and button
*/
// always use an IFFE to ensure you don't put variables in the window scope
(() => {
const tagName = 'field-string-wysiwyg-button-ml';
const builtInWysiwyg = '[System:Path]/system/field-string-wysiwyg/index.js';
// Button labels, mouse-over-tooltips, etc.
const en = { "TestButton.Tooltip": "Tooltip Button EN!" };
const de = { "TestButton.Tooltip": "Tooltip Knopf DE!" };
/** Our custom Wysiwyg with an additional button having labels in 2 languages */
class StringWysiwygCustom extends HTMLElement {
/* connectedCallback() is the standard callback when the component has been attached */
connectedCallback() {
// We need to ensure that the standard WYSIWYG is also loaded
this.connector.loadScript('tinymce', builtInWysiwyg, (x) => { this.initWysiwygCallback() })
}
initWysiwygCallback() {
// 1. Create a built-in field-string-wysiwyg control
const wysiwyg = document.createElement('field-string-wysiwyg');
// 2. tell it if it should start in preview or edit
wysiwyg.mode = 'edit'; // can be 'preview' or 'edit'
// 3. attach connector
wysiwyg.connector = this.connector;
// 4. also attach reconfigure object which can change the TinyMCE as it's initialized
wysiwyg.reconfigure = new WysiwygReconfigurator();
// 5. Append it to the DOM. Do this last, as it will trigger connectedCallback() in the wysiwyg
this.appendChild(wysiwyg);
}
}
/** The object which helps reconfigure what the editor will do */
class WysiwygReconfigurator {
addTranslations(editorManager, language) {
console.log("add translations to tinyMCE", editorManager, language);
editorManager.addI18n(language, language == 'de' ? de : en);
}
configureOptions(options) {
console.log('will try to modify tinyMCE options', options);
options.toolbar += " | testButton";
return options;
}
configureAddOns(addOnSettings) {
console.log('configure add-on settings for stuff added by the 2sxc form');
addOnSettings.imgSizes = [25, 10];
return addOnSettings;
}
editorOnInit(editor) {
console.log('editor init, will add button to tinyMCE', editor);
editor.ui.registry.addButton('testButton', {
icon: 'close',
tooltip: 'TestButton.Tooltip',
onAction: (_) => { alert('test-button used!') },
});
}
disableDnn = true;
}
// Register this web component - if it hasn't been registered yet
if (!customElements.get(tagName)) customElements.define(tagName, StringWysiwygCustom);
})();