In prior versions the styles of menuitems could be adjusted in the creation, 'style' is not used in v6.
I am specifically trying to style menus in a custom plugin menubutton each with their own color.
How can this be adjusted in v6.
for example
{ type: 'menuitem', text: 'blue item', style: 'background:blue;', onAction: function() { ... }
style is ignored
Related
I am trying to create a drop down menu in CKEditor 5 toolbar.
function createKMDropdown(editor, menuName, menuLabel, icon, commands) {
editor.ui.componentFactory.add(menuName, locale => {
const dropdownView = createDropdown(locale);
const items = new Collection();
commands.forEach(command => {
items.add({
type: 'button',
model: new Model({ withText: true, command: command, label: command }),
});
});
dropdownView.buttonView.set({
withText: true,
label: menuLabel,
tooltip: true
});
addListToDropdown(dropdownView, items);
return dropdownView;
});
}
class StyleMenu extends Plugin {
init() {
const { editor } = this;
const commands = ['strikethrough', 'subscript', 'superscript'];
createKMDropdown(editor, 'StyleMenu', 'Style', '', commands);
}
}
Question / Problems
I got the drop down show up, but clicking the item 'subscript" has no effect
Subscript is a plugin from CKEditor. How can I get its localized name show up in the drop down? Currently, I hard coded 'Subscript' in the plugin that does not work when user's locale is not English.
How can I access the icon of the plugins?
The drop down needs icon and localized name. If I want to choose "Cut" (or its localized version in other languages) and its icon for the drop down? How can I access it? In CKEditor 4, I can get hold of any icons and strings from the plugins.
When activating the row editing plugin, the padding is bigger than usual:
Any idea of what can be affecting the layout or how to fix it?
Are you using a custom theme? It looks like the theme variables for rowediting are modified.
You can write changing the following variable: $grid-row-editor-padding
Details on how to manage theme variables here: Theming Ext JS. You could also use the Sencha Themer tool.
The grid is inside a form definition. It inherited the fieldDefaults, so I had to move them inside the fieldset definition and leave the grid outside of it:
Ext.define('App.view.Test', {
extend: 'Ext.form.Panel',
xtype: 'test-form',
layout: 'vbox',
bodyPadding: 20,
fieldDefaults: { //defined here will affect the roweditor plugin
labelAlign: 'top',
margin: 20
},
items: [
{
xtype: 'fieldset',
//fieldDefaults should be moved here and leave the grid untouched
items: [...]
},
{
xtype: 'grid',
[...]
}
});
i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});
The default added button is always at the end of the toolbar.
How do I set the position of the addButton?
And not at the end of the toolbar.
You can specify button ordering in TinyMCE with the toolbar configuration option.
For example, the following config will add the custom button before the bold button:
tinymce.init({
selector: '#editor',
toolbar: 'myCustomToolbarButton bold',
setup: (editor) => {
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: () => alert('Button clicked!')
});
}
});
How can I add style (etc. padding-left: 10px;) or css class to an element over the custom Button and custom Context toolbar in TinyMCE 5?
This is what I've came so far:
editor.ui.registry.addButton('addstyle', {
icon: 'plus',
tooltip: 'Align image left',
onAction:
});
editor.ui.registry.addContextToolbar('imagealignment', {
predicate: function (node: any) {
return node.nodeName.toLowerCase() === 'img'
},
items: 'addstyle',
scope: 'node',
position: 'node'
});
I am missing what to write on onAction?
You need to write on the plugin source file for that particular plugin