I'm trying to add a custom button into the Elementor text widget toolbar next to other buttons like Bold, Italic, Underline etc. It seems that the ability to customize the instance using PHP may be disabled but that it is possible to do so using JavaScript instead.
I can get back the view by using the following code but I'm unable to get back the editor instance.
elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}
I've tried the following suggestions but none seem to return anything after that.
// get active instances of the editor
let editor = tinymce.activeEditor;
var editor = elementor.editors.get(0).getEditModel().get('editor');
var activeEditor = view.getOption('editor');
The rest of the suggested code after getting the editor instance is as follows but I don't get this far.
// add a button to the editor buttons
editor.addButton('tooltip', {
text: 'tooltip',
icon: false,
onclick: (editor) => {
tooltipCallback(editor);
}
});
// the button now becomes
let button=editor.buttons['tooltip'];
// find the buttongroup in the toolbar found in the panel of the theme
let bg=editor.theme.panel.find('toolbar buttongroup')[0];
// without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
// append the button to the group
bg.append(button);
Related
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
In my script I am reading from a json file and building sdk menu buttons from the data there. This works just fine, but I am having trouble adding these buttons to my sdk toolbar.
So, in the loop where I load the data from the json file, I am creating a button from the data and I add the button to an array like this:
var alltheButtons = [];
...
alltheButtons.push(jsondata[key].button);
In the loop where I create the buttons, I am adding
var myToolbar = Toolbar({
title: "My toolbar",
items: [alltheButtons]
});
However, what happens is that the script errors out when trying to add alltheButtons to the toolbar (whence they end up on the regular navbar since they are not attached to any specific toolbar).
The error is this:
Message: TypeError: aId.startsWith is not a function
So, how do I specify an array of buttons to the toolbar's items attribute?
Try this:
var myToolbar = Toolbar({
title: "My toolbar",
items: alltheButtons
});
items is supposed to be an Array but you are giving it Array<Array>
Alternatively you could make use the ES2015 spread operator:
var myToolbar = Toolbar({
title: "My toolbar",
items: [...alltheButtons, oneMoreButton]
});
I'm working with a redactor editor that uses several default buttons and a number of plugin buttons (e.g. 'fontfamily', 'fontcolor', 'fontsize'). I'd like to re-order the buttons so that the plugin buttons can be placed before (i.e. to the left of) the default buttons. This does not appear to be natively supported by the redactor API. How can I do this?
You will need to edit the plugin code, here is a very basic example of a plugin:
if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.custombutton = function()
{
return {
init: function()
{
var button = this.button.add('custom-button', 'Add Button');
this.button.addCallback(button, this.custombutton.show);
},
show: function()
{
console.log('myplugin show');
};
};
You need to tweak this line (below), it will be within the init method.
var button = this.button.add('custom-button', 'Add Button');
this.button.add insert the button at the end of the toolbar by default. You can read more about the other options here http://imperavi.com/redactor/docs/api/button/
But to add at the start you will want addFirst:
var button = this.button.addFirst('custom-button', 'Add Button');
I have learned how to integrate custom commands in the Tiny Toolbar with the
ed.addButton() Function.
Is there a similar way to add functionality to the Upper menu, the menubar ?
In the Tiny Documentation I just found how to change the order of the menu secton with this code in the init function:
menubar: "tools table format view insert edit",
Examples :
// Adds a custom menu item to the editor that inserts contents when clicked
// The context option allows you to add the menu item to an existing default menu
tinymce.init({
...
setup: function(ed) {
ed.addMenuItem('example', {
title: 'My menu item',
context: 'tools',
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}
});