Is there anyway to embed an iFrame in the RTE in typo3 backend?
I want to embed google maps and not have to use an extension, so is there any way to do this?
I tried using
RTE.default {
proc {
allowTags := addToList(iframe,embed,script)
allowTagsOutside := addToList(iframe,embed,script)
entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
}
}
in my Page.typoscript but unfortunately it didn't work.
Does anyone have an idea on how to do this?
Apart from the first answer, it is possible to use the iframe CKEditor plugin which is shipped with TYPO3, in this way:
In your .yaml config (Just relevant parts):
editor:
config:
# add the toolbargroup if needed (e.g. default.yaml and full.yaml configurations already have it.)
toolbarGroups:
- { name: insert }
extraPlugins:
- iframe
processing:
allowTags:
- iframe
Then in your TypoScript Setup:
lib.parseFunc_RTE.allowTags :=addToList(iframe)
There is a downsize in this method that I was not able to circumvent so far: the <iframe> gets surrounded by a <p> tag in the CKEditor;
If you also add
lib.parseFunc_RTE.externalBlocks:=addToList(iframe)
The <iframe> if no more surrounded by paragraphs, but a couple of empty paragraphs appear before the iframe
I always use the HTML content element to add iframes. It works like expected and you don't need to arrange the RTE (which is not designed for putting iframes into it).
Related
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I have placed some custom HTML, CSS, and jQuery inside an HTML box in my google site. but as the page loads, the unformatted content shows for several seconds until the loading is complete. attempts to add the following:
html { visibility: hidden; }
and then turning it back on later in jQuery do not appear to work inside a Google site.
Does anyone have another suggestion?
I don't know if this works on a google site or not, but using
<body style='display:none;'>
and then in the jQuery document ready function place
$("body").show(); has worked for me.
For some reason using style on the body statement works faster than the CSS file even if the CSS file appears in the head section.
I've created a project with the moovweb sdk and have trouble editing the content within an iframe on one of the pages. For instance, moving a div around inside the iframe doesn't seem to work with the tritium I'm writing. What can I do with tritium to make this work? The domains are different FYI.
Unfortunately, Tritium only allows you to edit the attributes of the iframe itself, not the content within.
This is because the request for content in the iframe is made after the browser constructs the DOM of the main page. Tritium can only intercept the first request for the main page, not the second request for content from a different domain.
I know of two workarounds:
Add the second website as a Moovweb project and you will be able to use Tritium to manipulate the content. Then you can point the iframe of the original page to this new content.
Use JavaScript/AJAX to modify the iframe's content.
However there are implications for production domains... I'm afraid I may have rushed this answer and will update it after I do more research.
If the iframe is on the same origin (http://m.yoursite.com) or on an origin you have in your config.json you can absolutely use tritium! However, maybe not in the way you expect!
So, the iFrame is going to make a separate request to the src attribute's location. If you ensure this request is going through the SDK (by rewriting it) like so:
$(".//iframe[#src]") {
attribute("src") {
rewrite("link")
}
}
Then you can map that url and perform your regular tritium on it!
you need to analyses the src of iframe and need to write mapping in mappings.ts for the url in src. Include proper .ts file in pages folder and start transforming it.
I have a Flex mx:HTML component which uses an html window to display html data from 3rd party website.
let's call the page:
http://www.company.com/page.php (not a _real page (duh))
There is alot of "trash" displayed.
I used "Firebug" to inspect the webpage elements.
I see that the section of the page I want to display is:
/html/body/div[4]/div[2]/div/div[2]
or, to put it a another way:
html body.landing div#content-bg div#content-wrap div#content div.main
my question:
Is there a way to access this section of the page only, especially since it is "rendered" using PHP (which I have no knowledge or understanding of)?
(I will NOT be using PHP to gather this info)
many thanks!
Mark
Take a look to Flex IFrame which enables HTML Browsing in Flex apps.
You can try this URL.
I want to apply styles (edit:in my browser's user-defined stylesheet, a local file on my machine that let's me customize how other people's websites render for me) to a specific site, but the selectors on many web pages are often generic (and obviously out of my control, since they're not my websites.)
If I have to use very general selectors (eg. #box) to customize a given website, that style might unintentionally affect other websites that have that same generic selector. Is there a way to specify a domain with a selector so I can my custom styles for each website separate?
I also found #-moz-document which looks good, but is Mozilla-specific and I use a WebKit browser. Is there an equivalent?
#-moz-document url(https://www.example.com/decrypt.php) {
Is the CSS hosted on a server that also allows you to script? Have you tried writing a server-side script to generate the correct CSS rules depending on the host that's serving the page?
Edit added March 30 2010:
You might be better off using the Greasemonkey extension to do this. It's far more powerful than user-defined stylesheets since you can use JavaScript, and adding domain or page-specific rules is as easy as adding special tags to the comments in the header. Greasemonkey was made specifically for handling your type of problem, and while you need a plugin to run Greasemonkey scripts in Firefox, Chrome ships with Greasemonkey support built-in.
If you can modify the HTML using javascript, there would be a way. It could go something like this (using JQuery):
var hostId = // detect the id of the host
var highLevelElement = $("body"); // or a different element that holds everything
highLevelElement.attr("id", hostId);
Then, in your CSS, you can do this:
#Mozilla div.Whatever { background-color: orange; }
#IE6 div.Whatever { background-color: red; }
#IE9 div.Whatever { background-color: green; }
// etc.
Consider installing an ad blocker such as uBlockOrigin, then writing some custom filters. You can add these custom filters in Settings -> My Filters.
examplewebsite.com###ExampleId, .ExampleClass:style(background-color: yellow !important;)
Uhm, I think php would be the most rational solution, and actually very easy.
Use php to decide what/when to do and echo certain css files in certain cases.
If you need more help, tell us more about your problem and I'll write the complete solution for you.