The default added button is always at the end of the toolbar.
How do I set the position of the addButton?
And not at the end of the toolbar.
You can specify button ordering in TinyMCE with the toolbar configuration option.
For example, the following config will add the custom button before the bold button:
tinymce.init({
selector: '#editor',
toolbar: 'myCustomToolbarButton bold',
setup: (editor) => {
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: () => alert('Button clicked!')
});
}
});
Related
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
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'
});
Is it possible to add new menu items in file menu of tinymce for cutomization?
I have found the solution to edit or disable the file menu. i.e
tinymce.init({
selector: "textarea",
menubar: "edit format"
});
Disable menubar:
tinymce.init({
selector: "textarea",
menubar: false
});
But no way to cutomize hat file menu
Any Idea?
Possible duplicate: Is it possible to have custom Functions and commands in the TinyMCE4 Menubar?
// 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!!');
}
});
}
});
How do I remove a button from the TinyMCE toolbar?
Do I directly edit the tiny_mce.js file? If so, where? Do I edit my theme's editor_template.js file?
Any instruction or hints would be appreciated.
You can define exactly what you want on the toolbar with the advanced theme and you wind up just specifying a list of buttons. See http://wiki.moxiecode.com/index.php/TinyMCE:Configuration for the configuration reference or the examples at http://tinymce.moxiecode.com/examples/full.php
In case you need to remove button dynamically, you can use following technique:
tinymce.init({
selector: "textarea",
toolbar: "custom",
formats: {custom: {inline: "span", styles: {color: "red"}}},
setup: function(editor){
editor.addCustomButton = function () {
if(this.customButton){
this.customButton.show();
} else {
this.addButton("custom", {
onpostrender: function() {
editor.customButton = this; //saving button reference
}
});
}
};
editor.removeCustomButton = function () { this.customButton.hide(); };
}
});
Now you can call editor's methods addCustomButton and removeCustomButton from wherever you need.