I am trying to insert HTML into the YUI rich text editor. The code works if I use simple HTML snippets, but if I use something more complicated (e.g. try to embed an object), then it fails.
Edit
Fails - only for FF browser
For example - this works:
var html = '<div><b><u>Hello world!</u></b></div>';
myEditor.execCommand('inserthtml', html);
But this dosen't work:
var html = '<div><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/OVXIh4q-OmM?fs=1&hl=en_GB&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OVXIh4q-OmM?fs=1&hl=en_GB&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></div>';
myEditor.execCommand('inserthtml', html);
Does anyone know why?
Some tags get cleaned up, according the editor object's settings.
YUI Rich Editor + invalidHTML + style explains the "invalidHTML" concept and has some example code to explain.
Related
I am using Tinymce as an email editor. When inserting an embedded image as attachment, the images are inserted as:
<img src="cid:mycid#sth" />
This works for the email sending part - but of course not for the editor. The image is not displayed...
Question: Is there a "content" and "display" layer in Tinymce where I can hook into?
My goal is to save the content as
<img src="cid:mycid#sth" />
and transform it in the editor window as
<img src="/mypreview/image/2000" />
I am using Tinymce 4.
The editor relies on the browser for the rendering of HTML so anything like your <img src="cid:mycid#sth" /> won't render in the editor - its simply not valid HTML.
What you can do is rely on data-xxx attributes in HTML to store the data you really want and transform the HTML when you go to load it into TinyMCE.
For example...
When someone inserts the image you could create the following HTML
<img data-src="cid:mycid#sth" src="/mypreview/image/2000" />
...this would allow the editor to actually render an image while you still keep the data you need. When you save the content you can strip out the existing src data and copy the data-src content back into the src if that is what your app needs for its server side processing.
If someone edits the content you can just reverse the process and change the src back to HTML that TinyMCE can render.
I imported news from an old tt_news extension into the new tx_news extension.
Some of this news had a video in it with this code:
<embed quality="high" base="http://www.domain.com/" flashvars="width=480&height=320&file=http://www.domain.com/fileadmin/media/Videos/Video.mp4&autostart=false&image=http://www.domain.com/fileadmin/media/Videos/video.jpg&controlbar=over&fullscreen=true" allowscriptaccess="always" allowfullscreen="true" style="WIDTH: 480px; HEIGHT: 320px" type="application/x-shockwave-flash" src="http://www.domain.com/typo3conf/ext/flvplayer2/pi1/mediaplayer.swf" pluginspage="http://www.adobe.com/go/getflashplayer" height="320" width="480" title="Adobe Flash Player" />
When I watch at one of this news now, this code is outputted as text.
So I added the following typoscript to my templates setup.txt (and to test also to constants.txt and in the properties of the rootpage into the Ressources->Page TSConfig):
RTE.default.proc.allowTags := addToList(embed)
But it does not change anything. When I edit this news in the backend and put this code into the RTE-HTML-Mode and go back to the WYSIWYG-Mode I see the video until I save the news. Then its back as text. It changes < to < and so on.
I also tried to replace the embed flash video with a html5-video element. For that I added video to the allowed tags:
RTE.default.proc.allowTags := addToList(embed, video)
And added this html into the RTE-HTML-Mode.
<div class="video" id="videoXX">
<video controls="controls" poster="poster.jpg" width="auto" height="auto">
<!-- .mp4 file for native playback in IE9+, Firefox, Chrome, Safari and most mobile browsers -->
<source src="video.mp4" type="video/mp4" />
</video>
</div>
So I guess the typoscript is wrong (or on the wrong place?) but I can not figure out what would be the right typoscript to allow the embed and video tag.
Also, is it possible to not parse the RTE at all? What I put into the HTML-Mode is always what I want and I do not want that to get parsed at all.
If that is possible I think that would solve all my problems with RTE, if not can someone help me find the right typoscript and/or place to put that typoscript in?
I have a working example with iframe. I made the following settings (iframe is replaced with video to fit to your question):
in a PageTS:
RTE.default.proc.allowTagsOutside := addToList(video, source)
RTE.default.proc.allowTags := addToList(video, source)
and in a Setup TypoScript:
lib.parseFunc_RTE {
allowTags := addToList(video, source)
}
I want to make a function that allows me to display an image or a swf, I noticed that the embed tag I can show both, I lnvestigated and got nothing about it, there is some downside in using it?
example:
<embed src="image.png" />
<embed src="flash.swf" />
Both work even without including the type.
You really should use the <img> tag for images and not <embed>. Instead, figure out what the file type is first and then use either <img> OR <embed> depending on the file type.
Yes, but, however, <embed> tag isn't recommended to be used.
I have a website that embeds issuu documents. Now it seems as the expanding and browsing through the document works in Firefox but not in Safari. You can try it out here: http://uniteich.at/service/agent Nothing happens in Safari if I click on the document.
Here is the html-code snippet where I bind in the issuu-code:
<div class="issuu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="width:320px;height:240px" id="add9c3c4-afc6-970e-36fb-28ae7e20a616" >
<param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf?mode=mini&embedBackground=%23ffffff&backgroundColor=%23222222&documentId=120229092309-6b8da62cea0f428f95a491abc5302843" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
<param name="wmode" value="transparent"/><embed src="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" wmode="transparent" style="width:320px;height:240px" flashvars="mode=mini&embedBackground=%23ffffff&backgroundColor=%23222222&shareMenuEnabled=false&documentId=<?php print($fields['field_issuu_id_value']->content);?>" /></object>
</div>
I would be very thankful for help,
thanks enne
This is Safari's responsibility for not rendering Flash content.
The embed code you're using is Issuu's old embed code that only includes the Flash embeds. If you use their new embed like this
<div data-configid="6943700/11183544" style="width:525px; height:376px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the embed will also render in browsers that don't support Flash (e.g. on the iPad etc).
You can get the new embed code from your document's page http://issuu.com/uniteich.at/docs/agent_3_final_web_0#embed or from the Publisher Tools (open menu -> "Embed").
I have a custom tag like this:
<content name="Home" />
When I click the Html button of the TinyMCE it was replaced with
<content name="Home"></content>
Currently my settings are: valid_elements: "content[name]"
What should I put in the valid_elements variable so that the tag will will be:
<content name="Home" />?
I am not perfectly sure, but i think this issue is not to be solved easily.
I do not think that you can configure this behavior because it is browser related and not tinies fault. Looks like the browser treats your custom html element like an html element with an opening and a closing part on default, even though you want to have a single part html element like a br-tag. The only way - i see - is to get the browser to accept your custom thlm elment as one part html element, which i do not know how to do.