Alter rendered view of TinyMCE - tinymce

I've built some kind of spellchecker application in TinyMCE. Basically, when the user clicks a button on the toolbar, a call is made to an API and the results are processed in a custom JavaScript function. This custom function replaces the contents of the editor with <span>s around the keywords that were returned from the API. The keywords are then underlined, much like the spellcheck functionality in Word/Google Docs/Chrome/etc. So far so good, and everything is working. What I want to achieve is that the user doesn't 'see' my inserted <span>s, so I only want to alter the 'view' part of TinyMCE, not the contents itself. Is this even possible?

Related

Tracking form properties besides fields

I have a multi-page form, using a vertical tabs UI, in redux-form, and I'd like to track the current tab selection in the redux-form store.
What's the best way of doing this?
I would track the current tab selection outside of redux-form, but I've integrated redux-form with redux-undo, and I'd really like for undoing a form change to go back to the tab of the modified control.
I tried using a selected redux-form field, but this means that changing the selected tab marks the form as dirty.
From reading the docs, I could probably use reducer.plugin to add arbitrary properties to the redux-form store, but I don't see any documentation of which arbitrary property names are "safe," and I'd have to update the plugin for every form that should behave this way.
Any ideas?

use one text box with multiple form submit buttons ruby on rails

I'm making an app where I have multiple forms on one page but they are all similar; there is a text box and a submit button.
What I would like to do is consolidate all text boxes into one then have many submit buttons. That way the user inputs the data once in the obvious text box at top then decides which category (submit button) he would like to apply the data in the input box to.
Is this possible? I can't find and documentation on how to do this. Thanks!
You can do so by using <%= fomr_tag url: "/myCust" do %> method to create a form and wrap all the fields inside form tag. on submit button you will be redirect to /myCust method.
There you can get all the params in myCust method. You are using rails 4 then define all params under private method as it does. Store each of them. as you may want.

Use attribute selector to change panels in a panel stack (Microstrategy)

So I have an attribute selector that currently changes the view of a grid based on the attribute passed to that grid. I also have a panel stack directly below the grid, with panels that hold iframes, which needs to be changed as the user selects an attribute in the selector. In other words, as the user selects an attribute from the selector, the panels would changes and show the new iframe. Is there a way I can somehow control the panel stack from an attribute selector?
The panel stack contains iframes , and each panel has an iframe with a specific URL source. What would be great is if I could somehow pass the attribute to the URL so that the iframe in a SINGLE panel could change based on the selection made in the attribute selector. For example, if I set the URL source of the iframe to "/servername/microstrategy/asp/{&attribute}.html" and had my html files stored in the correct folder. But there doesnt seem to be a way to pass the selected attribute to the source URL of the iframe.
The only thing I can think of is to somehow access the "code-behind" for the click event so that it BOTH changes the grid as usual, AND causes the panel stack to change panels.
Is there something in the Web Editor or SDK/Eclipse IDE that would allow me to access such logic? Or is there some cool work-around that would allow an attribute selector to change the panels shown in a panel stack.
Thank you for your help,
Kind of old question, but AFAIK there is no way to do it. You should probably go with text-boxes and use them as selectors. Maybe with view filters you could achieve something similar...

How did Facebook implement the chat sidebar?

I'm trying to understand how Facebook implements the chat sidebar. It seems to stay there even as I change pages. For example, if I select some text inside the sidebar, then click to go to another Facebook page, the text remains selected. It's as if it was a separate frame, but when I look at the code, it's not.
All requests are made trough AJAX calls. Only "content" container is replaced when needed.
You don't actually "go" to another page. Just the "content" div gets updated.
There is a container DOM element called "fb_content", its content is replaced through straight-forward AJAX or more technically XMLHttpRequest. (Although when for example you enter an app, the entire page is refreshed.) To update the address bar they use the JavaScript History API.
In addition to what Zeno and lericson said (fb_content gets updated via ajax), the address bar also gets updated while maintaining the history (if you press back/forward).

Hyperlink vs Anchor

When to use HyperLink and when to use Anchor?
When using HyperLink how to handle clicks?
com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) is deprecated
com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) is deprecated as well.
Doc suggests to use Anchor#addClickHandler, but how to use Anchor#addClickHandler when using HyperLink
Does it mean that if I need to handle click I should always use Anchor and never use HyperLink?
Great question, because it is so simple, and yet opens up what might be a whole new area for a lot of GWT programmers. I've up-voted the question just because it can be a great lead-in for people exploring what GWT can do.
Anchor is a widget for storing and displaying a hyperlink -- essentially the <a> tag. Really not much more exciting than that. If you want your page to link to some external site, use anchor.
Links are also used for internal navigation. Let's say I have a GWT app that requires the user to login, so on my first panel I put a login button. When the user clicks it, I would display a new panel with widgets to collect the user's information, code to validate it, and then if validated successfully, reconstruct that first panel the user was on.
Buttons are nice, but this is a browser, and I want my user's experience to be more like a web page, not a desktop app, so I want to use links instead of buttons. Hyperlink does that. The documentation for hyperlink describes it well:
A widget that serves as an "internal" hyperlink. That is, it is a link
to another state of the running application. When clicked, it will
create a new history frame using History.newItem(java.lang.String),
but without reloading the page.
Being a true hyperlink, it is also possible for the user to
"right-click, open link in new window", which will cause the
application to be loaded in a new window at the state specified by the
hyperlink.
That second sentence should help clear it up. The hyperlink is not changing the page in a URL sense (the way anchor does), though the URL will reflect the state of the program by displaying the "token" associated with the hyperlink appended to the base URL after a slash. You define the token. It would be something descriptive like "login" or "help" or "about". But this isn't a new page. There is no additional HTML file you've had to construct to display a help page, for example. It is the state of the current GWT app that is changing. Even if you "open in a new window" you are just running the same app in a particular state.
It looks like a link, but it is really a widget that manipulates the history frame, which in turn allows you to move the state of your GWT application. You don't write a click handler for the hyperlink widget, but a value change handler for the history stack. When you see that the "help" token has been put on the history stack, your handler will execute GWT code to attach to the RootPanel a FlowPanel with embedded HTML text with your help information. This is perceived by the user as a "new page", which is what he expects when he clicks on a hyperlink. The URL will be something.html/help. Now pretend he returns to this URL via the back button, not your hyperlink. No problem. You don't care about the hyperlink click. You only care that, somehow, the history stack changes. Your value change handler fires again, and does the same thing as before to display the help panel. The user still enjoys the experience of navigating through web pages, even though you and I know that there is only one web page and that you are attaching and detaching panels to the RootPanel (or whatever scheme you are using to display your GWT panels).
And this leads to a bonus topic.
This bonus is a bit more complicated, but ironically, it could help better understand hyperlinks. I say more complicated, but really, it helps solidify this notion that a GWT application is made up of a series of states, and that the web page on the screen is just the user's perception of those state changes. And that is Activities and Places. Activities and Places abstracts away this history frame manipulation, handling it in the background once you've set up a mapper with a GWT-provided class designed for this purpose, allowing you to break down your app into a series of activities, and as the user interacts through these activities he is put into different places, and each place has a view. Moreover, the user can move from place to place using browser controls like the address bar, bookmarks, history, and the backward/forward buttons, giving the user a real web-like experience. If you really want to get a grip on the conceptual difference between hyperlinks and anchors, you should try to learn this GWT topic. It can really make you change the way you see your apps, and for the better.
Hyperlink (or InlineHyperlink) is basically no more than a kind of Anchor with a ClickHandler that calls History.newItem and preventDefault() the event (so that the link is not actually followed).
Actually, Hyperlink won't do that if it thinks (and yes, it's only a guess) you right-clicked or middle-clicked (or ctrl-clicked) on the link (depending on the browser), to open the link in a new window or tab.
If you need any other behavior, then don't use Hyperlink and use Anchor instead. And if you want to add some behavior to an Hyperlink, then use an Anchor and mimic what the Hyperlink does. And you can reuse the HyperlinkImpl to have the right-click/ctrl-click handling (see links below).
But actually, if you need something that looks like a link and do something on click, but does not have a "target URL" (i.e. it shouldn't be right-clicked/ctrl-clicked to open in a new window/tab, or it wouldn't mean anything to do so), then do not use either an ANchor or Hyperlink, use a Label of whatever instead, and make it look like a link (but well, maybe you should use a Button and have it look like a button then; Google used to have link-alike buttons –such as the "refresh" link/button in GMail– and changed them to look like buttons when they really aren't links).
See also https://groups.google.com/d/msg/google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J and https://groups.google.com/d/msg/google-web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ