How to make underline a valid element in tinyMCE - tinymce

I'm trying to choose what kind of elements that's allowed in tinyMCE for a site in episerver. So far, I've done this and it's working well:
"valid_elements",
"a[href|target=_blank],p,strong/b,i/em,u,li,ul,ol,h1,h2,h3,h4,img[src|alt|width|height],br"
The problem is that I can't seem to allow the underline-element? I've tried both u and underline and I've tried to put it inside the p-tag but nothing is working. All of the other elements are working just fine! Help please:)

Related

TinyMCE4 icons not displayed when web font downloading disabled

Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin

TinyMCE get form content without using submit button

I'm trying to put TinyMCE on my website. I figured out how to get it to show up, but I'm lost on how to process the content. In their example, they just have a link that references the top of the page and clicking on it somehow magically causes their dump.php script to execute. I don't understand what's going on here. Here is the link:
http://www.tinymce.com/tryit/basic.php
The "Submit" button at the bottom is really a link in a span element with href="#". The form action is dump.php. I want to know how they configured this to run without an actual submit button. Any help in understanding this is greatly appreciated!
To Get Content From Tinymce You Can Use GetContent Method of Currently ActiveEditor Instance
tinyMCE.activeEditor.getContent();
method is used to getting Content .. to Set The Content
tinyMCE.activeEditor.setContent("I Want Text To Be in Tinymce");
to find a perticular element in tinymce get body and find element
var body = tinyMCE.activeEditor.getBody();
$(body).find("#elem_id")
to get a full html
tinyMCE.activeEditor.getDoc().documentElement.innerHTML
hope that helps ..
Since I use PHP, I found this which is also useful:
http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_TinyMCE_in_PHP

Asciimath plugin for TinyMCE not creating images

I'm using the Asciimath plugin for TinyMCE (http://www.imathas.com/editordemo/demo.html)
It was working fine until a few moments ago. Now I can see the math notation just fine in the editor, but on submitting the form, it's contents do not change to an image replacing the <span class="AM"> tag that the plugin creates.
Hence the HTML that the editor produces retains the Math-syntax I typed with the span tag and not show the Math notation properly in an image.
If anybody knows how to fix this, please help me. I'm really confused as to why it suddenly stopped working. A server-side text-replacement solution would be great as well.
I have tried this:
preg_replace('/\<span class="AM"\>`(.+)`\<\/span\>/', '<img src="http://www.imathas.com/cgi-bin/mimetex.cgi?$1" />', $str)
But that results in broken display of the Math fragment since some of the additional parameters like displaystyle that the script adds are lost.
NOTE I recently switched from regular-TinyMCE to the jQuery plugin TinyMCE. Could this be the reason the plugin is not working? I'm not sure if it broke functionality right after I made this change.

jQuery Show/Hide divs using same class not working because of html.push?

The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.

Too many problems on tables in Tinymce?

im working on a CMS it is almost finished
but im struggling serious unfamiliar problems in WYSIWYG editor.
i was first using ckeditor but after experiencing problems with it i switched to tinymce.
some problems are solved but this time someother problems showed up.
problems occuring especially on tables.
1-Anchor element underline removal not working
2-Duplicating Phone numbers
--->might be due to skype phone number converting toolbar
3-too many s how to clean those why even those are there?
4-how to convert
<p>text</p>
back into just
text
because tinymce converting some texts into p element *automatically if it's not the client doing it unknowingly.
*=even though i did that force_paragraph:false setting.
5-As client reports : sometimes cursor turns into loading cursor and wysiwyg editor causes browser to stuck.not even allowing to click links outside of the editor.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
here is that problematic page created with tiny_mce and causing lots of errors in process of editing:
Here some answers
2-Duplicating Phone numbers --->might be due to skype phone number converting toolbar
Might be - this cannot ba a tinymce related problem.
3-too many & nbsp;s how to clean those why even those are there?
Browsers will show several spaces (character code 32) as a single one. Thus & nbsp;s are inserted alternating instead of natural spaces.
4-how to convert
text
back into just text
Tinymce is a rte editor and will generate html code. In order to be able to style editor content, the content need to be wrapped inside a block element - eighter ps or divs. You may use server side code to remove tags.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
Please describe a bit more in detail - there needs to be a reason for this.