In TinyMCE 4, I'm looking to create a dropdown menu (whether as a toolbar button or in a menu) containing a list of values that should be inserted at cursor position simply by selecting them in the dropdown.
I've tried playing with the template plug-in, which kind of works, but it's too heavy and complex to use for what I need (it doesn't create a dropdown, instead it opens a popup which lets you preview your template, and I really don't need all that).
Is there a simpler way to do that? I don't need text replacement, class or date insertion, preview in a popup, or any of that advanced stuff. Just insert a static text value at cursor position.
Here is a TinyMCE Fiddle that shows hw to do what you want:
http://fiddle.tinymce.com/orgaab/1
The key code is this:
setup: function (editor) {
editor.addButton('custombutton', {
type: 'listbox',
text: 'Custom Listbox',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: 'Bold Text', value: ' <strong>Some bold text!</strong>' },
{ text: 'Italic Text', value: ' <em>Some italic text!</em>' },
{ text: 'Regular Text', value: ' Some plain text ...' }
]
});
}
If you want to add stuff to a Menu instead (based on your follow up comment) you can do this:
http://fiddle.tinymce.com/orgaab/4
The key code in this update is:
editor.addMenuItem('custommenuoptions', {
separator: 'before',
text: 'Custom Menu Options',
context: 'insert',
prependToContext: true,
menu: [
{ text: 'Bold Text', onclick: function() {editor.insertContent(' <strong>Some bold text!</strong>')} },
{ text: 'Italic Text', onclick: function() {editor.insertContent(' <em>Some italic text!</em>')} },
{ text: 'Regular Text', disabled: true, onclick: function() {editor.insertContent(' Some plain text ...')} }
]
});
Related
I am trying to manipulate the html content of text that is selected in the editor. tinymce.activeEditor.getContent({format: 'html'}); grabs all of the html content in the editor which is great but I want the html of selected/highlighted text. I was under the impression that using tinymce.activeEditor.selection.getContent({format: 'html'}); would achieve this but it only returns html if all of the text in the editor is selected.
Here is my code:
setup: function (ed) {
ed.addButton('customFormatSelect', {
type: 'menubutton',
text: 'Formats',
icon: false,
menu: [{
text: 'Get HTML',
icon: false,
onselect: function() {
alert(tinymce.activeEditor.selection.getContent({format: 'html'}));
}
}]
});
}
I have tried using onclick instead of onselect and still get the same result.
Here are some screenshots of the issue:
Here is me selecting the text I want the HTML from and clicking my 'Get HTML' button:
Image 1
Here is the alert that I get:
Image 2
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);
}
});
In EXT JS grid, for column with xtype: actioncolumn, the column header is not showing up in show/hide column list. It comes up as 'Actions' by default for actioncolumn column.
Can we override actual column header in the list of columns to show/hide for actioncolumn columns? Image shows a screenshow of examples from sencha examples.
If you want change the Label in Columns, You need to use a config called menuText for actioncolumn
Example: (https://fiddle.sencha.com/#fiddle/1944)
{
xtype:'actioncolumn',
width:50,
menuText: 'My Actions',
items: [{
icon: 'extjs-build/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs-build/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
I have an extjs menu, in which, upon clicking a button, a colorPicker is opened.
When a color is selected, onColorPickerSelect: function(colorpicker, color, eOpts) springs into action. How do I select the button element in this function, taking the value of the colorpicker variable as my start point?
items: [
{
xtype: 'button',
itemId: 'color1',
style: 'background-color:#fc0;',
text: '1. Farbe',
menu: {
xtype: 'colormenu',
listeners: {
select: {
fn: me.onColorPickerSelect,
scope: me
}
}
}
}
]
As I answer in your previous question, use var button = colorpicker.up('button');
onColorPickerSelect: function(colorpicker, color, e0pts) {
var button = colorpicker.up('button');
button.getEl().setStyle('background-color', '#' + color);
}
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'
});