Hello guys . I am creating custom rte plugin . I searched for proper documentation but I could not get it. I somehow managed to create new plugin AI.
Now I want to show it in inplace , dialog , fullscreen editing along with the ootb plugins but unfortunately I has to mention it all in my xml.
1.Is there a way to show my custom plugin along with ootb plugins without listing them all in my xml?
3.how to show features when i click on the plugin just like format shows bold , italic , underline when i click on it?
you can take a look at my code below.
function addPluginToDefaultUISettings(){
console.log("reached function");
var groupFeature = "ai#summary",
toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.dialogFullScreen.toolbar;
if(toolbar.includes(groupFeature)){
return;
}
toolbar.splice(0, 0, groupFeature);
CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.dialogFullScreen.toolbar = toolbar;
}
(function (Granite, CUI) {
'use strict';
// Define the AI Plugin
CUI.rte.plugins.AIPlugin = new Class({
// Extend the RTE Plugin
toString: "AIPlugin",
extend: CUI.rte.plugins.Plugin,
// Features provided by this plugin
getFeatures: function () {
return ["summary"];
},
// Initialization logic
initializeUI: function (tbGenerator) {
// Add Generate Text button if the feature is enabled
this.summaryUI = tbGenerator.createElement('summary', this, false, {
'title': Granite.I18n.get('summary')
});
console.log("summaryUI is " ,this.summaryUI)
tbGenerator.addElement('ai', CUI.rte.plugins.Plugin.SORT_FORMAT, this.completionsUI, 10);
console.log(tbGenerator.registerIcon('ai#summary', 'colorPalette'));
console.log("tbGenerator is " ,tbGenerator)
// addPluginToDefaultUISettings();
},
// Execute the commands for the features
execute: function (command, value, env) {
if (command === "summary") {
// Implement the summary generation logic here
console.log('Generating summary...');
// You can implement your AI summarization logic here
}
}
});
CUI.rte.commands.AICommand = new Class({
extend: CUI.rte.commands.Command,
toString: 'AICommand',
isCommand: function (cmdStr) {
return (cmdStr === 'aiCommand');
},
getProcessingOptions: function () {
var cmd = CUI.rte.commands.Command;
return ;
},
execute: function (execDef) {
// add implementation
},
});
// register command with CommandRegistry
CUI.rte.commands.CommandRegistry.register('aiCommand', CUI.rte.commands.AICommand);
// Register the AI Plugin
CUI.rte.plugins.PluginRegistry.register("ai", CUI.rte.plugins.AIPlugin);
})(Granite, CUI);
(function (Granite, CUI) {
'use strict';
// Define the AI Plugin
CUI.rte.plugins.AIPlugin = new Class({
// Extend the RTE Plugin
toString: "AIPlugin",
extend: CUI.rte.plugins.Plugin,
// Features provided by this plugin
getFeatures: function () {
return ["summary","air"];
},
initializeUI: function (tbGenerator) {
this.summaryUI = tbGenerator.createElement('summary', this, false, {
'title': Granite.I18n.get('summary')
});
console.log("summaryUI is " ,this.summaryUI)
tbGenerator.addElement('summary', CUI.rte.plugins.Plugin.SORT_FORMAT, this.summaryUI, 100);
tbGenerator.registerIcon('ai#summary', 'colorPalette');
console.log("tbGenerator is " ,tbGenerator)
this.aiUI = tbGenerator.createElement('air', this, false, {
'title': Granite.I18n.get('air')
});
console.log("aiUI is " ,this.aiUI)
tbGenerator.addElement('air', CUI.rte.plugins.Plugin.SORT_FORMAT, this.aiUI, 100);
tbGenerator.registerIcon('ai#air','colorPalette')
},
execute: function (command, value, env) {
if (command === "summary") {
console.log('Generating summary...'); }
}
});
// Register the AI Plugin
CUI.rte.plugins.PluginRegistry.register("ai", CUI.rte.plugins.AIPlugin);
})(Granite, CUI);
// CUI.rte.commands.AICommand = new Class({
// extend: CUI.rte.commands.Command,
// toString: 'AICommand',
// isCommand: function (cmdStr) {
// return (cmdStr === 'aiCommand');
// },
// getProcessingOptions: function () {
// var cmd = CUI.rte.commands.Command;
// return ;
// },
// execute: function (execDef) {
// // add implementation
// },
// });
// // register command with CommandRegistry
// CUI.rte.commands.CommandRegistry.register('aiCommand', CUI.rte.commands.AICommand);
I gone through all blogs and even asked chatgpt. If possible give detailed answer.
Thank you,
Alisyed
