HTML in Dygraph annotation descriptions - annotations

Under the Google charts visualization, there is an "allowHTML" option that allows for placing HTML tags inside annotation descriptions. Is there something similar in Dygraphs where the annotation allows an HREF tag that allows the user to link to another web page?
For example, a stock chart shows a split on a specific date. The annotation, on click, would bring up the press release announcing the split. The description field would be in HTML and include the appropriate HREF anchor to the press release.

It is my understanding that dygraphs doesn't support HTML annotations. However, I think it should be pretty easy to provide this type of functionality by using an additional tooltip library.
Dygraphs relies on the title attribute for the annotations. That is, when you hover over the annotation, the tooltip content is populated from the title attribute on the div. As an aside, you could presumably change which attribute it uses quite easily by editing the dygraph annotation source code. If you use a more comprehensive tooltip library (there are loads of jQuery tooltip libraries out there supporting HTML content), it will supercede the basic browser tooltip that dygraphs uses.
For a basic tooltip library that does the job, you could consider:
http://api.jqueryui.com/tooltip/#option-content
or
http://qtip2.com/plugins#ajax

Related

How do I replicate the tinymce link plugin's HTML markup behavior by adding succeeding text outside of the current node instead of inside?

When the user adds a link on selected text, it adds the URL markup only on the selected section and doesn't add the markup to any added text (after the markup is added) if the linked text is at the end of the string. This behavior differs from bold/italics/underline which adds added text to the bold/underline markup if the user adds more text at the end of a string.
I am implementing a custom button that should emulate the behavior of the link plugin. I have gone through the link/plugin.js file to no avail for which code block I need to re-use to get this behavior for my custom button.
How do I implement the link plugin's markup behavior? Are there any tinyMCE commands I should be using (setAttribs, etc)?
Video example of bold vs link plugin

Non Editable element in TinyMCE (related to Mathjax)

I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks

How to create some custom box into a Typo3 web page?

I am very new in Typo3 world (I came from Joomla and WordPress) and I have some doubts related a thing that has been requested by a customer that use Typo3 for its site
He ask me to create some colored boxes into a specific page. Each of these boxes simply must contain text or links.
How can I do this?
I am thinking that I can solve in the following way (but I have not idea if this is a GOOD solution):
In the backend I go in the Page section and I open the settings related to the page that I have to modify
Here I have 3 columns (Left, Normal, Right) and for example I add a NEW Regular Text Element into this central column
Now appear to me the wysiwyg editor, so I click on the Toggle text mode icon and I pass from the wysiwyg mode to the pure HTML editor's mode and now I will create some div tags (settings the CSS settings for the background color and the dimension) that rappresent my boxes (and into these div I put their textual contents).
Is it a possible solution or is it a bad solution?
Tnx
Andrea
You may either use the RTE typoscript config to add some new paragraph styles, which will make the boxes or use the section_frame field in tt_content, a field called "frame" in the backend when you edit a content record. Both solutions would just need some typoscript (which you will deal with very often in the TYPO3 world) and CSS code.
If you need some more structure in the backend, there is also an extension for that called multicolumn. If you just need "more" columns in the backend (in combination with backend layouts) to achieve different looks, this can also be done by adding some typoscript config. To give you a more precise recommendation, some sort of scribble or design screenshot of what you want would be nice.

Custom formats using CSS stylesheet

I know I can link a style sheet to TinyMCE and this will be used when I am editing. It also seems to apply the styling to the Heading options available in the format dropdown list which is great. I also know I can add custom formats menu using custom_formats (here) but is there a way for the Formats to be populated using my CSS automatically? I have various classes in my CSS for the P tag and would like to allow my users to utilise them.
No, this is not possible (at least not out of the box).
How could a piece of code guess what style or class to use from the pure CSS?

Custom stylesheet in GWT RichTextEditor

is there a way to force the GWT's RichTextEditor to use custom stylesheet for the edited text?
From what i have seen, it uses an iframe to render the text, so the host documen's styles are ignored.
That's currently not possible (there's an open issue about it).
As a workaround you could manually add your style definitions to the head element of the iframe document. See here for an example.