Create custom button(s) for CKeditor 5 toolbar - javascript

I've managed to customize the header and highlight dropdowns for CKEditor 5 – classic editor build by creating a new custom build.
But I don't know how to add additional buttons to the toolbar. For example a fullscreen button.
Current progress: github link

If you want to add existing buttons to the main toolbar, then you need to configure the config.toolbar. In your example it corresponds to these lines.
There's no fullscreen button at this moment. You can add +1 to the https://github.com/ckeditor/ckeditor5/issues/1235 to increase its priority or try to implement this feature on your own.
Basically, to create your own button you need to create a plugin which registers the button in the component factory and adds some actions that will be performed on the buttonView:execute event. You can follow the steps described in creating a simple plugin guide.
A good and complementary reading about the UI library can be found here.

Related

CKEditor 4 custom build based on toolbar config

I used the CKEditor Toolbar Configurator to customize the toolbar. I want to use the Builder to choose the exact plugins that are required for the specified toolbar items, no more or less. But it seems like I'm just supposed to somehow know what plugin is used for each toolbar item.
Is there really no way to create a build configuration based on the toolbar configuration? Alternatively, is there documentation somewhere listing every toolbar item in the configurator and what plugin(s) are required for it, so I can at least manually look at each toolbar item and match it with the plugins in the builder?
The "easiest" way to find which CKEditor plugins provide which buttons will be looking for each name of the button in the "plugins" folder of CKEditor 4 together with addButton
For example, to figure out which plugin provides the 'JustifyLeft' button, search for something like
https://github.com/ckeditor/ckeditor-dev/search?utf8=%E2%9C%93&q=addButton+justifyleft&type=
I know this is far from the ideal solution, but at least it should point you in the right direction.

How can I add Actions to the tool-bar in the Dashboard of Jupyter Notebook?

I'm creating a custom front-end extension for Jupyter Notebook. The actions will be triggered via buttons in the Notebook Dashboard and the Notebook Editor.
The extension will affect single or multiple files (like the already existing "Move", "Duplicate", etc -Buttons do). So the resulting button might look like this:
I can already place buttons in the tool-bar of the Notebook Editor, thanks to this tutorial, but I'm still unable to add actions to the toolbar in the Dashboard.
How can I add Actions to the tool-bar in the Dashboard of jupyter?
You can use a bit of jQuery to get this effect. For instance, if you want your button to appear before the Delete button, you can add something like
$('<button/>')
.addClass('my-new-button btn btn-default btn-xs')
.attr('title', 'My New Button')
.attr('aria-label', 'My New Button')
.text('My New Button')
.insertBefore('.delete-button')
.on('click', function () {...});
This is a little fragile, because it relies on the '.delete-button' being in that location, but the docs note that the front-end API is not very stable anyways. In addition, the button will probably always be shown, since I haven't found a way to get access to the selected list and check whether the button should be displayed. Finally, this probably won't work with JupyterLab which is the future™
This could go in an nbextension (see frontend extensions and distributing extensions) to make it easier to install.

Override default navigation buttons functionality in jqGrid

Question is simple: Is there a way to override the behaviour of the default buttons placed in the navigation bar of a jqGrid grid?
I'm using the struts2 plugin and I needed to launch an action if user clicks the add button or the edit button to redirect to another page in which this things are done. I wondered if it was possible to override it's default behaviour as I think it's cleaner than defining myself new "add" and "edit" buttons.
Documentation for adding such new buttons HERE.
You create first navigator bar using navigator="true", but with navigatorAdd="false", navigatorEdit="false", navigatorDelete="false" and so on (see the documentation). In the way you will have navigator bar without any buttons. Then you add custom buttons with the same icons like standard editing buttons (see the example which you referenced). You need uses icon: 'ui-icon-pencil' for Edit, ui-icon-plus for Add, and ui-icon-trash for delete. Inside of onclick callback you can place any your custom JavaScript code.
UPDATED: The names and the values of navigatorExtraButtons are build based on the options of navButtonAdd method. I've found additionally this code which should help you.

Hiding pop-up window of Contract Template Explorer in MS CRM 2011

I faced with next problem in MS crm 2011: how can I block the pop-up window of Contract Template Explorer via JavaScript when user clicked on the contract item in the pane left menu via right mouse button and select the new item.
I cannot change user rights, so this variant is out. Same problem with the ribbon "New" button of the Contract entity was solved by creating custom "New" button and selecting by script default contract template. Please help me! I will be very grateful for your help.
First of all what you are looking to do is pretty far outside what is a supported customization. The supported method would be to leave the menu item as it is, and disable the users ability to create new contacts through security or by modifying the form.
That being said, if you are still interested in how it could be done, you can accomplish it with a ribbon modification.
You first need to create a custom button.
Create an enable rule that will run javascript in a custom web resource.
Deactivate the button
Have your custom javascript web resource select an element with a title of "Create a new record" and then disable or remove it in the DOM.
There is a good article on the basic principles at this link
http://mscrmtools.blogspot.com/2012/01/how-to-colorize-grid-rows.html
It uses the method to colorize the results of a list view, but once you've been able to execute a custom library on the page you can do whatever you want.
Stressing one more time that this isn't supported.

Design Pattern: Using Javascript MVC to build a toolbar

So I am building a complex web app, part of this involves the building of a tools panel.
The tools panel will be composed of buttons or subpanels.
Each button should have an action attached - it can either be clicked on or dragged somewhere to provide a function
Sometimes when a button is clicked on a panel will appear in the
toolbar with cool stuff in it :)
As the app evolves new buttons will appear
I may want to change the order of the buttons or attach an existing panel to a different button
I want to design this entire app using JQuery MX. The toolbar is the crux of the app and will be coded first and so I aim to use the development of this to learn how to wield my first MVC JQuery app.
Can anyone offer a starting point regarding how to start this kind of beast?
I understand that the controller is the starting point, and is coded as one might a JQuery function but not entirely sure how models and views will work with this in JQuery MX
I actually built a webapp with a toolbar, though not in JavaScript MVC (which I thought was unnecessarily complicated).
Build a config file like buttonName : actionName. The controller runs through the config file and assigns the action to the button's click event.
My toolbar was quite small (ten buttons or so, although they did change), so I kept all the actions in one controller, although each action was only a couple of lines, calling a separate plugin. If you have lots of buttons, you might want to separate out the actions into different controllers.
Then you have a plugin with a set of generic code which handles visual presentation of the toolbar - drop shadows, background-colors, icon management, etc. Just use addClass / removeClass, and style the different button states with CSS. For HTML, I made each button an '' tag, so it degraded gracefully.
Subpanels are just additional functions on the presentation layer.

Categories