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
Related
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 the SAPUI5 documentation they have the following example for adding a header item to the launchpad top header toolbar.
var oRenderer = sap.ushell.Container.getRenderer("fiori2");
// Create an icon button that opens a dialog
oRenderer.addHeaderEndItem({
id: "myTestButton",
icon: "sap-icon://action-settings",
tooltip: resources.i18n.getText("testButton.tooltip"),
text: resources.i18n.getText("testButton.text"),
ariaLabel: resources.i18n.getText("testButton.ariaLabel"),
ariaHaspopup: "dialog"
press: [myController.handleTestButtonPress, myController]
}, true);
// Create a temporary link
oRenderer.addHeaderEndItem({
id: "myTestLink",
ariaLabel: resources.i18n.getText("testLink.label"),
target: "#MyTestApplication-show"
icon: "sap-icon://overflow"
}, true, true);
I have tested this snippet, unfortunately it only shows icon and it does not show any text, however the tooltip works!
Anybody have any idea that how can I force sap.ushell.ui.shell.ShellHeadItem to show text instead of icon!? Or at least show both icon and text!
When I only set the text and do not set the icon property it will show this result:
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 ...')} }
]
});
In Sencha in a child window I obtain an id of an image, how can I then pass the image id to a text field in a parent window. I go to the child window with a button click, and would like to display the id of the chosen image in a text field above the button.
Thanks.
You would pass a textfield reference to the window during window creation, and when the button is clicked, you use that reference:
xtype: 'textfield',
},{
xtype:'button',
text: 'Get Image'
handler: function(btn) {
Ext.create('Ext.window.Window',{
textfieldReference: btn.previousSibling('textfield'),
buttons:[{
text: 'OK',
handler: function(okBtn) {
okBtn.up('window').textfieldReference.setValue(imageId);
}
}]
})
}
In most of my grids, if I want to perform a "custom operation" that displays some data in a jqGrid modal form and allow the users to click "submit" to do something, I am able to simply leverage the existing "Edit" operation and tweak it to my needs.
However, I am working on a grid where the Add, Edit, and Delete operations are all in use, and I need an additional "custom operation" that opens a jqGrid modal form to display a couple of the columns along with a submit button to send the key ID to the target URL.
Normally this is very easy to simply re-task the Edit function, but since Edit is in use, I'm not sure how to do this. Does jqGrid have a proper method for creating new custom operations that display modal forms just like Edit does?
In the end, I was not able to find a way to do this through "core" jqGrid features and ended up simply adding a new button to the grid which opens my own custom modal box.
The multi-select features of jqGrid were also used to allow the user to select multiple records to be passed off to this custom function when the new button is clicked.
Here was the code for adding the button to jqGrid. The AJAX call retrieves the HTML content for the modal that is being populated (in JSON format):
.navButtonAdd('#listAllSupplierPurchasesGridPager', {
caption: "Mark Paid",
buttonicon: "ui-icon-add",
onClickButton: function () {
var s;
s = $("#listAllSupplierPurchasesGrid").jqGrid('getGridParam', 'selarrrow');
if (s.length > 0) {
// Make AJAX call to get the dynamic form content
$.ajax({
cache: false,
async: true,
type: 'POST',
url: "/TargetItems/MarkPurchasesPaidRequest",
data: {
PurchaseIds: JSON.stringify(s)
},
success: function (content) {
// Add the content to the div
$('#MarkPurchasePaidModal').html(content);
// Display the modal
$("#MarkPurchasePaidModal").dialog("open");
},
error: function (res, status, exception) {
alert(status + ": " + exception);
},
modal: true
});
}
},
position: "first"
})
The jQuery for setting up the basic modal box:
$("#MarkPurchasePaidModal").dialog({
autoOpen: false,
width: 768,
autoheight: true,
show: {
effect: "blind",
duration: 250
},
modal: true
});
And the div HTML to hold the modal:
<div id="MarkPurchasePaidModal" role="dialog" title="Mark Purchases Paid" class="container"></div>