How can I add style (etc. padding-left: 10px;) or css class to an element over the custom Button and custom Context toolbar in TinyMCE 5?
This is what I've came so far:
editor.ui.registry.addButton('addstyle', {
icon: 'plus',
tooltip: 'Align image left',
onAction:
});
editor.ui.registry.addContextToolbar('imagealignment', {
predicate: function (node: any) {
return node.nodeName.toLowerCase() === 'img'
},
items: 'addstyle',
scope: 'node',
position: 'node'
});
I am missing what to write on onAction?
You need to write on the plugin source file for that particular plugin
Related
In prior versions the styles of menuitems could be adjusted in the creation, 'style' is not used in v6.
I am specifically trying to style menus in a custom plugin menubutton each with their own color.
How can this be adjusted in v6.
for example
{ type: 'menuitem', text: 'blue item', style: 'background:blue;', onAction: function() { ... }
style is ignored
i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});
I created an action sheet containing some options
when I select an option I want it to be highlighted.
I took the code from here
https://ionicframework.com/docs/components/#action-sheets
can someone help me please
You can use some (S)CSS to style it with a pseudo-class like :active or :hover. To include your own CSS classes to the action sheet you could use its cssClass property when creating it. Like so:
let actionSheet = this.actionSheetCtrl.create({
title: 'Ionic Action Sheet',
cssClass: 'your-custom-class',
buttons: [
{
text: 'Button 1',
cssClass: 'custom-button-1-class',
handler: () => {
console.log("Button 1 picked!");
}
}
]
});
By doing that, you can use custom CSS classes to style each button (option) of your action sheet, as well as the action sheet itself. If you wanted to, say, make Button 1 have a black background whenever a user "activated" it, you could write:
.custom-button-1-class:active {
background-color: black;
}
I'm using TinyMCE 4 for editing content.
I need to add a custom button that adds a row on a table when clicked.
TinyMCE 4 has a function to do that but i'm not sure how to call it.
I'm trying with $('#myTable tr:last').after('<tr></tr>');.
Here's an example.
<script type="text/javascript">
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
$('#myTable tr:last').after('<tr></tr>');
}
});
}
});
</script>
With the cursor placed inside the table, you can modify your code to look like this:
setup: function(editor) {
editor.addButton('mybutton', {
text: 'My button',
icon: false,
onclick: function() {
editor.execCommand('mceTableInsertRowAfter', false, editor);
}
});
}
See example - tinyMCE fiddle
>>but i'm not sure how to call it.
You add a button to the editor by adding the button in the toolbar -
tinyMCE.init({
...
toolbar1 : 'mybutton'
});
did somebody manage to sort multiple items at once with jquery.ui.sortable?
we are working on a photo managing app.
select multiple items
drag them to a new location.
thanx
I had a similar requirement, but the solution in the accepted answer has a bug. It says something like "insertBefore of null", because it removes the nodes.
And also i tried jQuery multisortable, it stacks the selected items on top of each other when dragging, which is not what i want.
So I rolled out my own implementation and hope it will save others some time.
Fiddle Link.
Source code:
$( "#sortable" ).sortable({
// force the cursor position, or the offset might be wrong
cursorAt: {
left: 50,
top: 45
},
helper: function (event, item) {
// make sure at least one item is selected.
if (!item.hasClass("ui-state-active")) {
item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
}
var $helper = $("<li><ul></ul></li>");
var $selected = item.parent().children(".ui-state-active");
var $cloned = $selected.clone();
$helper.find("ul").append($cloned);
// hide it, don't remove!
$selected.hide();
// save the selected items
item.data("multi-sortable", $cloned);
return $helper;
},
stop: function (event, ui) {
// add the cloned ones
var $cloned = ui.item.data("multi-sortable");
ui.item.removeData("multi-sortable");
// append it
ui.item.after($cloned);
// remove the hidden ones
ui.item.siblings(":hidden").remove();
// remove self, it's duplicated
ui.item.remove();
}
});
There's a jQuery UI plugin for that: https://github.com/shvetsgroup/jquery.multisortable
jsFiddle: http://jsfiddle.net/neochief/KWeMM/
$('ul.sortable').multisortable();
... or just define a 'items' option to your multisortable that way (for example) :
$('table tbody').multisortable({
items: 'tr'
});
you can use shvetsgroup/jquery.multisortable
but it will create problem.. because, that js is designed only for tags...
but customize it to use it, its very simple i'll tell you how????
at first download that .js and use it in your program...
step 1. open the js file...now edit the following lines...
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'li'
};
the above are lines from 107 to 112....
there you can see "items: 'li'
in that use your tag which you are used to enclose those image like if you are using, or or anything you are using like this
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'div' // or any tag you want...
};
and 249 to 254
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'li'
};
}(jQuery);
change the line " item:'li' " with your tag like this
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'div' // or anything else
};
}(jQuery);
if you are working on textboxes inside those envelopes.. you have to get rid of these lines too
// If no previous selection found, start selecting from first selected item.
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
after that comment line...
add a line code that search textbox or check box or any interaction element inside it...
like this..
// If no previous selection found, start selecting from first selected item.
item.children("input").focus(); // customize this code to get your element focus...
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
and also to indicate selected tags or elements... use styles like this
div { margin: 2px 0; cursor: pointer; }
div.selected { background-color: orange }
div.child { margin-left: 20px; }
actually i used div.. instead of that you can use any tag you wish...
hope will help u.... if it is not... read again.. and ask again....
wishes