TinyMCE 5.x - Highlight an item in a custom dropdown menu - javascript

I have 3 menu items in a custom TinyMCE 5.x dropdown that controls the width of the editor. I want to indicate what the current selection is, but can't find a way to interact with the menu items after they are initialized. When the menu is closed they don't seem to be in the DOM at all.
I would be happy if my custom dropdown behaved like the font-size dropdown, which displays a check mark next to the selected size. I would also be happy with it being like the font-family dropdown where the selected font is displayed as the menu toggle (not just when you open the menu).
editor.ui.registry.addMenuButton('maxWidth', {
text: 'Width',
fetch: function( callback ){
var items = [
{
type: 'menuitem',
text: 'Full Width',
onAction: function(){ changeSectionWidth("full"); }
},
{
type: 'menuitem',
text: '1600',
onAction: function(){ changeSectionWidth(1600); }
},
{
type: 'menuitem',
text: '1170',
onAction: function(){ changeSectionWidth(1170); }
},
];
callback(items);
},
});

After looking all over and finding nothing useful, I hacked it together, which I am not happy about, but it does work:
//LOCATE THE BUTTON GROUP (happens to be in group 12, starts on 0 though)
let btnGroup = $(editor.editorContainer).find(".tox-toolbar__group")[11];
if( btnGroup ){
return false;
}
//GET THE SPECIFIC BUTTON IN THAT GROUP (happens to be in slot 4, starts on 0)
let targetBTN = $(btnGroup).children()[3];
//CLICK HANDLER FOR THE SPECIFIC MENUBUTTON
$(targetBTN).on("click", function(){
//USE A TIMER SO TinyMCE HAS TIME TO RENDER THE MENU
window.setTimeout( function(){
//APPLY YOUR OWN LOGIC HERE TO DETERMINE WHICH OPTION TO SELECT
//this has to match the words in the button and is case-sensitive
let selectedOption = "Option 2";
//DESELECT OTHER OPTIONS
//NOTE THAT I AM USING AN EXTRA CLASS "my-selected" WHICH I APPLIED TO THE UI SKIN.min.css BECAUSE HOVER DESELECTED THEIR HIGHLIGHTS AND I WANTED IT MORE PERMANENT
$(".tox-selected-menu .tox-collection__item--active").removeClass("tox-collection__item--active tox-collection__item--enabled my-selected");
$('.tox-collection__item[title="'+selectedOption+'"]').addClass("tox-collection__item--active tox-collection__item--enabled my-selected");
}, 50); //WAIT 50 milliseconds so menu has time to be rendered
});

Edit: I know this is old, but might help others.
This can be done using formats and hooking into onSetup on each menu item. See below working example.
editor.ui.registry.addMenuButton('maxWidth', {
text: 'Width',
fetch: callback => {
// Define out options for width.
var widthOptions = [
{
title: 'Full width',
format: 'full_width',
},
{
title: 'Width 2',
format: 'width2',
},
{
title: 'Width 3',
format: 'width3',
},
];
var items = [];
// Add each option to menu items.
widthOptions.forEach(option => {
// Register a custom format for each option.
// See https://www.tiny.cloud/docs/configure/content-formatting/#formats
editor.formatter.register(option.format, {
inline: 'span',
classes: option.format,
});
items.push({
type: 'togglemenuitem',
text: option.title,
onAction: action => {
// We only allow one to be selected. Remove all but the one we clicked.
widthOptions.forEach(opt => {
if (
option.format !=
opt.format
) {
tinymce.activeEditor.formatter.remove(
opt.format,
);
}
});
// Now toggle the selected one.
editor.execCommand(
'FormatBlock',
false,
option.format,
);
},
onSetup: function(api) {
// When generating the item, check if this one is selected.
if (
editor.formatter.match(
option.format,
)
) {
api.setActive(true);
}
return function() {};
},
});
});
callback(items);
},
});

Related

angular-slickgrid, trigger the cell edit on select editor change event

I am using angular-silkgrid with angular 7. I am using inline editing feature. I am using single select editor for inline edit. Currently I want to achieve this functionality:
As soon as user click on the editable field , the select drop down will be visible.On select any option from select dropdown the inline mode should exist and column value should be updated.
currently I need to click on other field to exit from inline mode(I want to achieve this on select option select)
editor: {
// display checkmark icon when True
enableRenderHtml: true,
// tslint:disable-next-line:max-line-length
collection: [{
value: 1,
label: 'Sucessful'
}, {
value: 2,
label: 'Unsucessful'
}],
model: Editors.singleSelect, // CustomSelectEditor
elementOptions: {
autoAdjustDropPosition: false,
onClick: (event, rr) => {
// here i want to write some code which can trigger to grid to start update
}
}
}
Thanks All for the answers. I have solved my issue as below:
editor: {
enableRenderHtml: true,
collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
model: Editors.singleSelect,// CustomSelectEditor
elementOptions: {
onClick: (event) => {
const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
updateItem.status = +event.value;
this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
this.angularSilkGrid.gridService.renderGrid();
}
}
}
Generally,
grid.getEditorLock().commitCurrentEdit()
will commit and close the editor.
Also, any of
grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()
will commit and exit gracefully. In the select2 editor, you'll notice:
this.init = function () {
...
// Set focus back to select2 element on closing.
$input.on('select2:close', function (e) {
if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data)
|| e.params.key === 9) {
// item was selected with ENTER or no selection with TAB
args.grid.navigateNext();
} else {
// closed with no selection
setTimeout(function () {
$input.select2('focus');
}, 100);
}
});
};
this.destroy = function () {
$input.select2('destroy');
$input.remove();
};
, noting that args.grid.navigateNext() will commit and close the editor, including calling the destroy() method at the appropriate time.
From the Angular-Slickgrid Editor Example there's a checkbox in the example to auto commit and that is a setting to you need to enable in your Grid Options
this.gridOptions = {
autoEdit: true,
autoCommitEdit: true,
}
The lib will internally call grid.getEditorLock().commitCurrentEdit() like Ben wrote in his answer, in Angular-Slickgrid you can just set the autoCommitEdit flag that I added.

How can I add a dynamic context menu to tinyMCE?

Is there a way to add custom dynamic elements to the context menu in tinyMCE 4.x, after init? I created custom menu items but many of them have sub-items that are dependent on other things going on in my application.
I tried using editor.on('contextmenu') but the menu still does not update. Any ideas?
Add the contextmenu plugin
Override the default context menu (some plugins automatically add their own entries) by defining the contextmenu option. It is a pipe-delimited list of custom menu items (which you define in step 3)
Define a list of custom menu items. These can have their own onclick event handlers, or define sub-menus.
tinymce.init({
...
plugins: [..., 'contextmenu'],
contextmenu: 'customItem1 | customItem2',
setup: function (editor) {
editor.addMenuItem('customItem1', {
text: 'Menu Item 1',
context: 'tools',
onclick: function () {
alert('Menu item 1 clicked');
}
});
editor.addMenuItem('customItem2', {
text: 'Menu Item 2',
context: 'tools',
menu: [ {
text: "Sub-menu item 1",
onclick: function () {
alert('Sub-menu item 1');
}
}, {
text: "Sub-menu item 2",
onclick: function () {
alert('Sub-menu item 2');
}
}]
});
}
});
References:
TinyMCE addMenuItem
TinyMCE contextmenu plugin doc
Custom menu item blog post
Similar SO question
Yes, it is possible.
The JavaScript Object Function can be used to declare a value dynamically inside editor events.
Even you can go for loops, but only one menu is supported in Dynamic (Since Context Menu Value is unique) make dummy context menu and declare separately (Apply your own logic).
On Sub-menu: to create a Dynamic Menu, use an Array and push it via JavaScript Object Methods in loops to display dynamically.
For Reference : Dynamic data added in custom TinyMCE Editor using AngularJs
This is how I did it
I used jQuery $.each to iterate through my objects, you could also use vanilla JavaScript
//register plugin to process context menu on a specific tag
tinymce.PluginManager.add('contextmenu-plugin', function (editor) {
var selectedCode
// Create a function which returns an array of items, these can be Submenus or Simple Items
var contextMenuItems = () => {
return [
{
type: 'submenu',
text: "Submenu 1",
getSubmenuItems: () => {
if (selectedCode){
var contextMenuItems = []
$.each( ArrayWithData, (index, data ) => {
contextMenuItems.push({
type: 'item',
text: `${data}`,
onAction: () => {
console.log("Clicked submenu option");
}
})
})
// return array of contextmenuitems -> this goes to the Submenu
return contextMenuItems
}
}
},
{
icon: 'remove',
text: 'Remove data',
onAction: () => {
console.log(`Removed data`)
}
}
}
]
}
// now register the contextmenu
editor.ui.registry.addContextMenu('contextmenu', {
update: function (element) {
//this way you can call contextMenuItems() every time you show the context menu
return (element.tagName == "your-condition" && element.className.includes("another condition") ) ? contextMenuItems() : ""
}
});
});

Dynamically created check box doesn't get checked on button click in ExtJS

I create a check box dynamically (based on condition) on "create checkbox" button and added this checkbox in panel.
According to my condition, Only 1 checkbox will be added in panel and it's item id will be "a1".
When click on another button "checkedcheckbox" checkbox should be checked but it doesn't. When i get this checkbox by itemid on button click, then it show undefined in developer tools. If i get it by panel items then it doesn't show undefine but checkbox doesn't checked.
PROBLEM
Why checkbox show undefined if i get it by itemId ?
Why Checkbox is not checked if i am getting by panel items. It should be get in both ways by getting directly through itemid and panel items.
There is some problem on my account in sencha fiddler, that's why i can create a fiddler for you.
Code
Ext.onReady(function () {
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
height: 500,
title: 'Grid Samples',
items: [
{
xtype: 'button',
text: 'Create checkbox',
handler: function () {
var obj1 = [
{ a: 1},
{ a: 2},
{ a: 3},
{ a: 4}
];
var obj2 = [
{ a: 1 },
{ a: 5 }
];
var i = 1;
var panel = Ext.getCmp('pnlTesting');
Ext.each(obj1, function (ob1) {
Ext.each(obj2, function (ob2) {
if (ob1.a == ob2.a) {
panel.add({
items:[
{
xtype: 'checkbox',
itemId: 'a'+i
}
]
});
return false;
}
});
});
}
},
{
xtype: 'panel',
id: 'pnlTesting',
height: 100,
renderTo: Ext.getBody()
},
{
xtype: 'button',
text: 'checkedcheckbox',
handler: function () {
Ext.getCmp('pnlTesting').items.items[0].items.items[0].checked = true;
//Ext.getCmp("a1").checked = true;
//Ext.getCmp('pnlTesting').doLayout();
}
}
]
}).show();
});
I would recommend learning the usage of .up() .down() .prev(), .next() and .query()
They are powerful tools to navigate through every component in your object structure without dealing with special item ids. You can also fetch components via config options like component.query('button[name="mybutton"]')
I made a (very) small example for your requirement in sencha fiddle: https://fiddle.sencha.com/#fiddle/sii
The problem is that if you want to change the state of the checkbox you should do it with setValue(true) and not checked=true.
{
xtype: 'button',
text: 'checkedcheckbox',
handler: function (btn) {
Ext.getCmp('pnlTesting').items.items[0].items.items[0].setValue(true);
}
}
And also, that's an ugly way of getting the component, i get it with down() and its itemId
Ext.getCmp('pnlTesting').down('#a1').setValue(true);
P.D: You should improve this selector because using id and getCmp() is not a good practice for ExtJS.

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks
Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}
One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.

how to load menuitems dynamically in YAHOO.widget.Button?

this.widgets.category = new YAHOO.widget.Button(this.id + "-category",
{
type: "split",
menu: this.id + "-category-menu"
});
I am using the code above to create a yui button, after that I updated the options in the menu, but the menu can not be updated. What function can I use to update the menu ?
Thanks in advance !
We use the menu type of button a lot. Typically, we want to rebuild all the options from scratch. To do this, try the following:
// assumes btn is the YAHOO.widget.Button
var menu = btn.getMenu();
// clear existing items
menu.clearContent();
// code to add new menu items using either addItem() or addItems()
menu.addItems([
{ text: "--Not Selected--", value: null },
{ text: "Option 1", value: "1" },
{ text: "Option 2", value: "2" }
]);
// forces menu to render
menu.render();

Categories