I am adding menu buttons to a tinymce editor. In this interface there are multiple tinymce editors loaded on the page at once. The menu buttons I am adding all do some custom styling either using the formatter or by applying custom css classes to selected elements. As part of one of the items I need to also "remove all formatting" from the selection as well as add some text around the selection. There is already a built-in plugin that does this, so I would like to just call that function from my plugin.
I got this working by using jQuery to click the "remove all formatting" button, however since there are multiple editors on the page, this makes the page scroll from where the user is at, depending on which button actually gets clicked by jQuery.
I would rather not use this approach because i feel like it would be much cleaner and provide a better result to execute the remove formatting code from my plugin, but I am unsure how to access the function I need to call.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
$('button[title|="Clear formatting"]').click(); //I would like to call this function here instead of jQuery clicking a button.
editor.formatter.apply('sample_answer');
}
},
So after some more digging, it appears that a certain amount of tinymce commands can be executed using editor.execCommand RemoveFormat is one of the commands you can use, so they made it easy on me for what I need to do.
It would still be nice to know if there was a way to execute other functions if I wanted to, but the execCommand function definitely solves this issue.
{
type: 'menuitem',
text: 'Sample Answer',
onAction: function() {
editor.execCommand('RemoveFormat');
editor.formatter.apply('sample_answer');
}
},
Related
I am using Prestashop. I have made several templates. Is it possible to prepare a button that will insert the selected template?
For example, I have 4 templates and I want to make 4 buttons.
the first button inserts the first template.
the second button inserts the second template and so on.
I tried to use this code in the file \js\admin\tinymce.inc.js but my new button is not displaying :(
toolbar2: 'customInsertButton',
setup: function (editor) {
editor.ui.registry.addButton('customInsertButton', {
text: 'My Button',
onAction: function (_) {
editor.insertContent('My button works!');
}
});
},
Perhaps Prestashop has some limited version of this editor?
I ask because for example it is possible to add templates. but I would like to be able to insert them faster, with one button...
TinyMCE itself already has a template plugin:
https://www.tiny.cloud/docs/plugins/opensource/template/
Have you considered using that functionality?
I have already found a solution. It is possible by adding a custom plugin.
Everything is beautifully described on the TinyMCE website :
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
then we modify tinymce.inc.js and add plugin support and a defined button in the toolbar.
I have a page with multiple TinyMCE editors (org.vaadin.tinymce.TinyMce), and I want to know which the user is 'in'. One approach would be to use the focus/blur events, but I've tried adding a class like this:
public class MyTinyMce extends TinyMce implements Focusable<TinyMce> { ... }
and then associating event handlers like this:
myTinyMce.addFocusListener(e -> {
System.out.println("focus!!");
});
myTinyMce.addBlurListener(e -> {
System.out.println("blurred!!");
});
but the events don't fire reliably. If I do the exact same thing with a Text component, it works as expected.
I say not "reliably" because they do fire if I click on the empty space in the TinyMCE toolbar (to the right of 'Tools' in the screenshot), but not if I click on the TinyMCE menu or into the editable body.
screenshot
Am I doing something wrong, or does the TinyMCE component simply not support this use-case? Is there another way to keep track of the user switching between different editors?
Problem:
By default in instantsearch.js, the reset button in the search field is hidden until you start typing. However the submit button doesn't hide, causing them to overlap, this seems default behavior(?)
Here is a demo that demonstrates the issue:
https://codesandbox.io/s/quizzical-leakey-7shzr
Expected Outcome:
I want the search submit button to replace (toggle) with the reset button on typing.
Things I've tried:
I have looked through the documentation and can't find any solution to this. There is a showReset and showSubmit parameters as seen here: https://www.algolia.com/doc/api-reference/widgets/search-box/js/ but these just disable them completely.
Changing the template for them in the widget, only stylizes them, rather than adjust their function.
I do have a heavy handed solution I've written in jquery below but my question is: Is there a way to configure this behavior in instantsearch.js?
$( ".ais-SearchBox-input" ).on("keyup", function() {
if($('.ais-SearchBox-input').val().length > 0){
$('.ais-SearchBox-submit').addClass('none');
}else{
$('.ais-SearchBox-submit').removeClass('none');
}
});
$(document).on('click', '.ais-SearchBox-reset', function() {
$('.ais-SearchBox-submit').removeClass('none');
});
The submit button is initially designed to be on the left hand side of the searchbox, and the reset one on the right hand side, as you can see in the InstantSearch.js SearchBox Storybook. In your demo, there's custom CSS that aligns them both on the right, which is why they're overlapping. But they're two orthogonal concepts, so they weren't designed to replace one another out of the box.
Your solution is fine, although I understand that having imperative logic like this on top of InstantSearch.js might feel icky. Another approach is to directly hook into the rendering logic of the widget by using the connectSearchBox connector. You'll be able to fully control what is rendered, and you'll have access to query which you'll be able to leverage to decide whether to show one button or the other.
My advice is to start from the full example and adapt it for your use case.
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]