I was trying to search for a way to override default behavior of TinyMCE when it applies same styles to new elements. For example, when we apply some style to a paragraph and hit enter for new paragraph, it inherits same styles. Is it possible to override this behavior?
Yes, it is.
You will have to register the keyup event and check for the ENTER key.
Then you check the actual node the caret is in and you may add/remove classes or whatever. Use the setup tinymce configuration parameter to add the handler:
setup:function(ed){
ed.on("keyup", function(e){
if(e.keyCode == 13){ // ENTER
var node = ed.selection.getNode();
// do your magic here
}
});
}
Related
I am creating a custom confirmation dialog in Google App Maker and would like the Confirm button to call a passed-in function. I don't see an "onclick" event in the button widget. Any suggestions on how to do this?
function confirmationDialog(msg, confirmFunction)
{
var desc = app.pageFragments.ConfirmationDialog.descendants;
var label = desc.Label;
var confirmButton = desc.Confirm;
label.text = msg;
confirmButton.onClick = confirmFunction; // does not work
app.showDialog(app.pageFragments.ConfirmationDialog);
}
Thanks
It'd be great if this was a bit easier, but the best bet is to use Custom Properties (https://developers.google.com/appmaker/ui/viewfragments).
You can set up a custom property of type "Dynamic" and call it anything, take "onConfirmCallback", for example. Then you can set the function on that custom property:
Code to invoke dialog:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback = function(param) {
alert(param);
};
app.showDialog(app.pageFragments.ConfirmationDialog);
And then in the onClick for the close button:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback("hi");
app.closeDialog();
Also note that there are slightly better ways to set up labels than in your example, also using custom properties.
Create custom properties for any widget properties you want to customize, and then bind those custom properties (#properties.propertyName) to the widget property. For example you might have a confirmText property, with the confirm buttons text property boudn to #properties.confirmText.
Then when you invoke your dialog, you can just set those custom properties. Quick modification of your example code using properties for everything:
function confirmationDialog(msg, confirmFunction)
{
var properties = app.pageFragments.ConfirmationDialog.properties;
properties.text = msg;
properties.confirmCallback = confirmFunction;
app.showDialog(app.pageFragments.ConfirmationDialog);
}
For my confirmation dialogs, I just set the onclick of the OK button before I show the dialog (everything is in one place, which is easier for the dummy (me) who will have to maintain it in six months:
var dialog=app.pages.ConfirmationDialog;
dialog.descendants.message.text='Are you sure...?'
dialog.descendants.btnOk.getElement().onclick=function(){
//do something here
app.closeDialog();
});
};
app.showDialog(dialog);
}
I'm developing a WordPress plugin that adds a button to TinyMCE, which lets you add an id attribute to the selected element. I have the button displaying, and when it is clicked it runs my function, which I'll call "idFunc" for this demo and it looks like this:
function idFunc() {
// Make sure editor has focus.
editor.focus();
// Get currently selected node
var selectednode = editor.selection.getNode();
// Set the id attribute on the node
selectednode.attr("id","newid");
}
With idFunc() written as above, nothing happens when I click my button. If I change the last line to an alert like this:
function idFunc() {
editor.focus();
var selectednode = editor.selection.getNode();
// Alert with the selected node
alert(selectednode);
}
I get an alert as expected, which says:
The page at mytestingdomain.com says: [object HTMLParagraphElement]
If I have my caret in a div instead of a p element, it says:
The page at mytestingdomain.com says: [object HTMLDivElement]
So I know I'm close, but the attr() function isn't adding any attributes to any elements in the TinyMCE editor.
What am I doing wrong?
The solution to this is easy.
editor.selection.getNode() gives you the common ancestor node (not a jQuery object).
To set the id attribute on the node you may call one of the following commands:
selectednode.setAttribute("id","newid");
or
selectednode.id = "newid";
or using jQuery
$(selectednode).attr("id","newid");
Using Magnolia CMS, I am trying to make a property inherit through all child pages.
The property gets set from a base page dialog.
Essentially its just a checkbox that toggles a show/hide Boolean that gets tested in the main page template (which child pages also use).
The dialog control component 'hideHeader' has this structure:
::hideHeader
.buttonLabel: Hide
.class: info.magnolia.ui.form.field.definition.CheckboxFieldDefinition;
.defaultValue: true;
.i18n: true;
.inheritable: true;
.label: hide;
.type: Boolean;
Which is added to the base page dialog.
I access the property in the template like:
[#assign hideHeader = false /]
[#if content.hideHeader?? && content.hideHeader?has_content ]
[#assign hideHeader = content.hideHeader /]
[/#if]
I cant get it to work in the child pages. It doesn't pick up on the set value from the dialog, just the default 'false' value.
What am I missing?
In order to inherit property from anywhere up in the hierarchy of pages, you need to use cmsfn.inheritProperty(content, "your-prop-name").
Using only stkfn.siteRoot(content) as suggested above, will return you root node of the site, so if value was overridden anywhere in the hierarchy you would not see that.
HTH,
Jan
so after suffering from 'code' blindness, I realised to implement the behaviour I wanted I needed to get the property using:
stkfn.siteRoot(content)
this now enables all sub pages to receive the parent pages properties.
Instead of all code above you can just use:
[#assign hideHeader = content.hideHeader!false]
To inherit property you have function in TemplatingFunctions
public Property inheritProperty(Node content, String relPath)
in freemarker you should do something like:
cmsfn.inheritProperty(content, "hideHeader ");
I have a custom element that I'd like to be themeable. The link element that I put in my template, though, appears to be replaced by Polymer with a style element containing the contents of the URL (even in Dartium), which means I can neither bind the href attribute (which I hear doesn't work anyway) nor change it programatically on an event.
Actually, even without being able to switch it, I'd like to be able to set it once when the element is created, so I can create different instances of the element with different themes.
Is there a way to do this?
It turns out that you can programatically specify a stylesheet if you add a style element with a CSS import:
factory MyView(String themeUrl) {
MyView view = new Element.tag('my-view');
view.shadowRoot.append(new StyleElement()
..id = 'theme'
..appendText("#import url('$themeUrl');"));
return view;
}
I was able to switch it like this:
void switchTheme(String themeUrl) {
StyleElement theme = shadowRoot.getElementById('theme');
theme.replaceWith(new StyleElement()
..id = 'theme'
..appendText("#import url('$themeUrl');"));
}
I have GWT CellList and after adding items via a DataProvider I use the following code to add styling to each item.
members... we can styling if a matched item is also in members
matched... passed in as a MetaJsArray<Contact>
CellList<Contact> list = getView().getResults();
for (int i=0; i<matched.length(); i++) {
if (members.isExistingEntry(matched.get(i))) {
list.getRowElement(i).addClassName("RED");
}
}
This code works until... I click items in the list.
onCellPreview() is called for each item clicked, but the previously clicked item loses its "RED" styling.
Do I need to add styling differently? Or how do I stop the loss of "RED"?
My guess its something to do the way GWT generates the javascript. When you manually set the cell on load its all good. When you select it, the javascript changes the object to use the selected CSS and when you un select it, the CSS changes to the default GWT CSS style for the cell.
Only way I can think of is to have a handler on select. When you select an item:
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
// get item last selected
// check if needs re styling
// restyle
// do things with the new selected object
}
});
Add another check through the cell list and mark the ones that got unmarked.
This way might be inefficient, but its one way of avoiding your problem that I can think of. hope it helps.
After trying various approaches the only want that works, without hacks, is to define the style at the point of rendering.
With my own ContactCell extending AbstractCell the render() function can pass in a styling value into the contactcell.ui.xml file.
#Override
public void render(Context context, Contact value, SafeHtmlBuilder sb) {
if (value == null) {
return;
}
String styling = value.getStyling();
uiRenderer.render(sb, styling);
}
and then in contactcell.ui.xml file
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:with field='styling' type='java.lang.String'/>
<div class="{styling}"> ... </div>
GWT will mangle the style name so define your own CssResource class to access the class name thru so that the class name is mangled throughout the app.