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.
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 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');
}
},
This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.
The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link.
I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.
I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page--newsletter--subscribe.html.twig, its working But submit button not working not ajax is working.
BootstrapDialog.show({
title: 'Subscribe To Newsletter',
message: jQuery('<div></div>').load('/newsletter/subscribe'),
closable: false,
draggable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: 'Close',
action: function(dialogRef){
dialogRef.close();
}
}]
});
I saw there is an example in code node.preview.js file like this:
var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
Drupal.dialog($previewDialog, {
title: Drupal.t('Leave preview?'),
buttons: [{
text: Drupal.t('Cancel'),
click: function click() {
$(this).dialog('close');
}
}, {
text: Drupal.t('Leave preview'),
click: function click() {
window.top.location.href = event.target.href;
}
}]
}).showModal();
But I never able to make it working in my custom module.
If some one can help on this, will be really great!
Update:
I just tried to put a link manually in the template and tried to open the dialog, but it gives me some error:
Show Dialog
The error is as follows:
dialog.js?v=8.6.4:35 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=8.6.4:35)
at Object.dialog.showModal (dialog.js?v=8.6.4:52)
at Drupal.AjaxCommands.openDialog (dialog.ajax.js?v=8.6.4:96)
at Drupal.Ajax.success (ajax.js?pkvhqx:155)
at Object.success (ajax.js?v=8.6.4:234)
at i (jquery.min.js?v=3.2.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
at A (jquery.min.js?v=3.2.1:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)
It seems some of the library is not loaded. Here is my global attachement:
dependencies:
- core/jquery
- core/jquery.ui
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/drupal.dialog
- core/drupal.dialog.ajax
- core/jquery.form
- core/jquery.once
- core/modernizr
Any help will be great!
This issue is related to the pro theme I have purchased named "glazed". Its removed the bootstrap modals library. When I disabled the Bootstrap Modal library from theme settings, Modals are working fine. But when I tried to enable the Bootstrap Modal, it gives the following message, which explain everything:
Your theme is trying to load the Bootstrap Modals override library from the bootstrap basetheme. This library is not compatible with Glazed Builder and therefore its assets have been removed from the page. To make this message disappear Please go to your (default) theme settings form, scroll down to Bootstrap settings, and under the Javascript category disable the "Bootstrap Modals" setting.
I want to remove advanced tab from media popup. How can I remove this advanced tab? Can anyone suggest me?
Example Image
Add below code to your editor configuration under init.
media_poster: false,
media_alt_source: false
Follow https://www.tiny.cloud/docs/plugins/media/#media_poster
There is no configuration to do this in TinyMCE. You can certainly modify the Media plugin's JavaScript file to remove this from the dialog.
If you look in the ../plugins/media folder within TinyMCE you will find the JavaScript for the plugin. If you look at plugin.js file you will find a section that defines the window/dialog:
win = editor.windowManager.open({
...
body: [
...
{
title: 'Advanced',
type: "form",
items: advancedFormItems
}
]
The body array contains the tabs for the dialog. If you remove the object that defines the Advanced tab it will no longer appear.
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,
});