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.
Related
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');
}
},
anyone know if sapui5 provide solution/function to change button style in select dialog? I've checked the SAPUI5 sdk but there is none for this solution.
If you are OK with using "private" properties then you can use _oOkButton property of SelectDialog or else you can use _getOkButton function which also is kind of "private" and returns ok button instance.
Just use the instance of the Select Dialog and get all buttons using the following methods. Select Dialog is a dialog only, you can use the methods of sap.m.Dialog
Let say you have the instance of the dialog as oSlectDialog then
oSlectDialog.getButtons() - will return all the Buttons in the footer. You can use loop them and give custom class accordingly.
var oBtns = oSlectDialog.getButtons()
for(var b in oBtns) {
var oBtn = oBtns[b];//You can check for button instance, if you want to add custom class differently.
oBtn.addStyleClass("YourCustomClass");
}
You can also use the sap.m.Dialog methods like oSlectDialog.getBeginButton(), oSlectDialog.getEndButton().
Since UI5 1.62.0, the primary action OK (later renamed to Select) is automatically emphasized if the theme is sap_fiori_3.
https://openui5.hana.ondemand.com/#/entity/sap.m.SelectDialog/sample/sap.m.sample.SelectDialog
If it's not urgent, I'd suggest to avoid relying on private methods/ properties, but update to the latest UI5 version and themes.
Update: and since 1.70 (commit:1f421b0), the button is automatically emphasized in other supported themes too, such as sap_belize, sap_belize_plus
Related Github issue: https://github.com/SAP/openui5/issues/2254
I am using Tinymce Version: 4.6.5 and i have a custom plugin added.
But i would like to know if it is possible to add custom plugin to 'insert' toolbar?
Please see screen shot here
Any help would be really appreciated.
Thanks
The documentation page for creating a custom plugin shows how to make a menu item:
https://www.tinymce.com/docs/advanced/creating-a-plugin/
Specifically https://www.tinymce.com/docs/advanced/creating-a-plugin/#exampleplugin includes code that shows how to do this ... look at the code that starts:
// Adds a menu item to the tools menu
editor.addMenuItem('example', {
EDIT: If you want to add something to the Insert menu look at the source code for any plugin that is already doing that (e.g. Link). From that plugin you will see code like this:
editor.addMenuItem('link', {
icon: 'link',
text: 'Link',
shortcut: 'Meta+K',
onclick: Actions.openDialog(editor),
stateSelector: 'a[href]',
context: 'insert',
prependToContext: true
});
Note the context setting - this is what places the item on a specific menu.
This question already has an answer here:
SAPUI5 Open link on Button press
(1 answer)
Closed 1 year ago.
I am relatively new to UI5. My search for "[sapui5] icon link" brought no useful results. So here is my question.
I have the following sap.m.Link
<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />
which displays the text "Stackoverflow" on the UI, and when I click on it, I will navigate to stackoverflow.com. That's the effect I want.
But how can I replace the text with an icon, for example "sap-icon://download"? According to the Link-API, it doesn't have an attribute icon. So is there a way to get the same effect using sap.m.Button that does have this attribute:
<Button icon="sap-icon://download" press=".onDataExport" />
What would the handler onDataExport look like? My idea is to use a (somehow) hidden sap.m.Link and a sap.m.Button containing the icon. The press-handler of the Button would then somehow trigger a 'link clicked' (not sure if that is possible).
My answer comes a bit late, but I hope that it will help others, as I searched for a ready-to-use Link including an Icon (although this does not seem to be the real need of StoneCrusher).
Button which triggers link navigation:
If you want a sap.m.Button to act like a classical link, then you can attach a press event and use window.open in that event, like:
myButton.attachPress(function () {
window.open(url,target);
});
Link with UI5 icon:
If you want to display a sap-icon in a sap.m.Link, then you have to extend the link, include an aggregation which contains the icon and then render the icon before you render the text of the link.
renderer : function(oRm, oControl) {
[...]
oRm.write("<a");
oRm.writeControlData(oControl);
oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
oRm.writeClasses();
oRm.write("href=\"javascript:void(0);\" ");
oRm.write(">");
//Render icon
if (icon!="") {
oControl.getAggregation("_icon").setIcon(icon);
oRm.renderControl(oControl.getAggregation("_icon"));
}
oRm.writeEscaped(text);
oRm.write("</a>");
}
I was in need of both and published these and other custom UI5 convenience controls here: www.toucon.fr
Use the below code in your onDataExport function in controller:
sap.m.URLHelper.redirect("https://stackoverflow.com/", true);
Refer to the below link for info: ui5.sap.com/#/sample/sap.m.sample.Link/preview
sorry only got reply in JSON style, but you see what is missing in your code:
jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");
var button = new sap.ui.commons.Button({
icon : sBack,
});
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" />