How do you trigger the CKEditor 5 insert image file dialog/picker from code? I have the "imageUpload" toolbar button in place and it works, but it's the balloon editor so it's not visible until they select something. I'd like to create my own button that's always visible to make it easier.
It's impossible to trigger it from code at any given time. The event must be user-originated (e.g. by a click listener).
If you, however, want to have a button outside the editor which will trigger this logic, you can use the button delivered by CKEditor 5 in ImageUploadUI. Just do this:
const imageUploadButton = editor.ui.componentFactory.create( 'imageUpload', editor.locale );
imageUploadButton.render();
imageUploadButton.element; // The element that you can insert somewhere in your view.
Related
I have added a custom plugin that inserts the current date at the cursor position in ckeditor when I click on my InsertDate button which is not part of the ckeditor toolbar buttons. Now the question is I have multiple ckeditor in my page, so now I am typing something in the second ckeditor and I just want to insert the current time so I clicked on the insertDate button, but it is inserting the text in the first ckeditor which is not expected.is there any way how to handle this situation.i want to know the recently focused ckeditor so that I can identify the particular ckeditor using the id and can insert the text.
tried using the focusmanager.hasfocus method but as soon as I click on the insertDate button the ckeditor loses the focus.is there any way we can get the reference of the recent focus editor.
$.fn.insertAtCaret = function (myValue) {
myValue = myValue.trim();
CKEDITOR.instances['idofeditor'].insertText(myValue);
};
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
I'm using jqgrid inline edit in my application which is also accessed in mobile. Since the user access space in the mobile is small i dont want the pop-up's throwing in the middle.
So, basically when the user did not select the row and click the edit/delete button the warning dialog is thrown "Please, select a row". Now i did not want the alert. Just when the user click on the edit/delete button without selecting the row it should stand still. Nothing happens.
Is this possible? How can i achieve this?
I would suggest you another way. One can disable or hide Delete/Edit buttons until a row will be selected. Inside of loadComplete one should test whether any row is selected (it could be selected if you use reloadGrid with {current:true} option for example). In the case you can disable or hide Delete/Edit buttons once more.
The demo created for the old answer shows how to disable navigator buttons by adding ui-state-disabled class. Another demo created for the answer demonstrates in interactive form how to show/hide navigator buttons.
I am using ck-editor 3 and have written custom code which will destroy ck-editor instance on blur action.
Problem i am facing is if i select any of the drop-down boxes from toolbar for e.g. style,size.
then on-blur event of instance is called and as per code its gets destroyed due to which i am not able to format it and editor gets closed.
I don't want to prevent on-blur event as a whole but wanted to prevent only when any of the toolbar element is accessed.
Is there any way to prevent this?
I Have three records which I want to display in three Accordion Panes
which (every pane) will have a Header and a content ( Two label controls, 1 text box and 1 checkbox and 1 link button)
I am able to display data on the accrodion from database but when I am trying to Update the text in textbox by clicking link button the LINKBUTTON doesnot fire and unabel to make the update. How can we create Update event working ??
I am creating the Accordion Panes and Content controls statically and directly assigning the values to the controls from Code behind in Page Load.
I was able to do it using the "ItemCommand" event of the Accordion Panel by using the Command Name property of a Link Button which will update the Text Boxes.
It works for me now but I felt JQUERY will be a better option which has no postback, css issues..