How to make SVG selectable in TinyMCE? - tinymce

With TinyMCE I use extended_valid_elements to allow SVG elements, and indeed I can then add them, but the SVG elements are not selectable/clickable. I am trying to reach the same behavior as IMG elements - allow selecting, dragging and resizing SVG elements.
I tried looking at TinyMCE sources for "IMG" to figure out what makes them selectable and apply the same to "SVG", but noting I tried worked.
Help would be appreciated.

Currently this work fine for me :
Give me the following result :

Related

How do correctly use the "value" parameter for modal popups?

On www.purelocal.com.au
There are icons and text with the value="X" parameter to open it's respective JS popup.
However , according to HTML validation I cannot apply the value="X" parameter to images or plain text (only using certain tags like INPUT,OPTION etc.
Does anyone know about this? Wrapping the text and images around these tags in order to pass HTML validation seems like a weird thing to do.

Angular UI Bootstrap typeahead does not extend past parent div border like a normal select dropdown

I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.

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

TinyMCE not working when loading two textareas

I have two textareas that I load when the page loads, these two textareas are in the same table row. My tinyMCE looks like this
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
For some odd reason only the first textarea gets assigned the editor and the second does not. Although it only does this in Firefox. The text areas have different names and don't contain ids. Any advice will be appreciated.
Give them different ids. Tinymce editor id is equal to the textareas id; if no textarea id is present "content" is used as default. In your case for both textareas. Because there is already a tinymce editor with id "content" when the second textarea is being converted into a tinymce editor instance - it fails.
This has now been fixed by upgrading to the current version of tinyMCE (3.5b2) - as per:
http://www.concrete5.org/community/forums/customizing_c5/firefox-11-tinymce-issue-workaround-and-fix/
In my code, it was not fixed by giving different ids to the multiple text areas (Thariama's suggestion above).
If you don't know how to figure out your version of tinyMCE, see How do I find out what version of TinyMCE I am running?

WordProcessingML shapes problem

I am currently working on exporting information from browser to word document. I am having information which contains colors and shapes. Now when I export them using wordprocessingML I am able to export text that are highlighted in colors. But I am also having certain text in browser that are encapsulated with circles ad box. I found that using VML we can render shapes. But I want the shapes to be in the specified x-axis and y-axis, so that it renders the text properly. Is there is any way to specify co-ordinates in shapes using keywords like "this.x", "this.y". Something similar to this to render the shapes on the text. I am not sure whether I am clear. Would like to discuss more about this.
I have found that solution for this problem. We can use "auto" keyword which can be used to find the relative position of the shapes in the worddocument according to the flow of the page. Now my question when I passed margin-left:auto, margin-top;auto, I was able to display the shapes in the right dimension. But I have also included text inside the text attribute which I want the shapes to be overlapped. I am getting shapes aside the text, not wrapping the text. Does anyone know the solution, I can try it. I find it really interesting to work on wordml.