I have a HTML editor that allows users to edit their page. I am using an iframe to preview the edits.
I am looking for a solution to displaying HTML/CSS without rendering it in an iframe. I know using an iframe prevents HTML/CSS from conflicting with the parent site. Just wondered if there were other ways of displaying User HTML/CSS content without having to worry about the possible altering of the parent/main website when previewed.
If DIV's are an option, how would I secure the display of it?
No. There are other ways, but from your comment it appears you're looking for a lighter way, and everything else is going to be pretty heavy and more difficult to maintain.
Related
I'm producing a page that will reside inside an iFrame. Below is the code that mine will drop into. It needs to be responsive, which mine is. However, the iFrame is not. I don't have access to the parent or hosting page in order to implement solutions that I've seen suggested. Is there a way to make the iFrame responsive without adding to the parent code?
To me, this seems the most logical answer (IF I had access to the parent source code) - http://davidjbradshaw.github.io/iframe-resizer/. But, I don't, so was wanting to know if there is a way to do within my code which resides in the src="https://..." of the .
The short answer is no, their are many security restrictions In the browser to stop you doing this.
Their is a longer answer that involves proxying, but then your into potential legal problems. It would be better to just get the other site to agree to you doing this and if they won’t then you should not really be doing it in the first place.
I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code.
I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution.
I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.
I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?
Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer
I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.
...however,
due to the fact that my html contains a form and the user has to be
able to decide whether he would like to upload a pdf-file or an image...
What are you using for the form (query language & database management)?
(PHP, Django, MySQL, MongoDB, etc)
Are there any other/better ways to embed a
pdf- or image-file in an html page?
I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.
Edit: I want top display the pdf kind of like a file. Also, I don't
want the user to be able to resize the pdf in the viewer
Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.
Check out this link on iframes. (will also tell you how to keep the user from resizing it)
i just wanted to find out is it posible to make a navigation bar or image slide from a different html & css and link it to the main index.html?
if it is possible how to do it, or must it be done as a script?
It's possible to do this with both Javascript/jQuery and PHP. It's also possible to do this with an iframe, but iframes are honestly used to load a new web page within your site and they are hardly ever used, plus HTML5 is going to depreciate them once it becomes standard. So to answer your question, yes, it's something that needs to be done with a scripting language
Why is the editable html moved into an iFrame? I analysed different editors (TinyMce, CKEditor, etc) and all move the editable content into a separate iFrame which they lay over the original text.
What is the technical reason for this. I experimented with the contenteditable="true", which is the base of all this editors too, and didn't find a reason yet to do this.
I'm CKEditor core developer. Not for a long time - just for last half of the year, but I've learnt a lot about why we use iframed editable :)
Styling - content of the iframed editor doesn't inherit styles of the page. This is extremely important, because we cannot reset styles (sic! CSS really sucks). What's more - in iframe we can freely add our own styles which is helpful too.
Only in iframed editable we can work on entire page with head, metas, body styles, title, etc. Some of our users need this.
Browsers have very buggy (and incomplete) impls of contenteditable. E.g. guess what will happen when you paste list into the editable which is a <h1> element on Firefox (you can check that in this editor - http://createjs.org/demo/hallo/)? It will leak out of editable area and become a non-editable element. We have to handle these cases manually in the editor and this is really hard work :).
I'm not sure about this but I believe that designMode wich allows to switch entire document into the editable area had been first and contenteditable came later. So the reason may be historical too - it's hard to switch from one approach to another.
Probably there're more reasons why we use an iframed editable. I'll update my answer when I'll learn them :)
From the tinymce froum
Hi Zappino!
It is the very nature of editors like TinyMCE to use an IFrame because
in a frame you can modify any part of an HTML document to suit your
needs without breaking anything in the main page's document.
Especially if you want to edit a complete HTML document including the
parts between and you won't be able to do so without an
IFrame.
Cross Domain Skripting will occur if you store TinyMCE's files on a
different (sub-)domain than the page from which you embed the editor.
Show us a test scenario of your installation with which you are having
trouble and someone might be able to help you out!
Greetings from Germany (back to Germany )
Felix Riesterer.
I have a web application that allows the creation of HTML emails that can then be dispatched. Because of how fiddly HTML email display can be, I have an open-source WYSIWYG editor embedded.
The editor itself works fantastically, but with one problem that you may already be thinking. Basically, the page CSS is conflicting with the inline CSS generated by the text editor, which caused issues for things like tables.
Currently I am solving this on the "preview" page by placing the preview in an iframe but I am not entirely sure the best way to do this for the actual editor page. If I do it in an iframe, I would either have to put it into a separate page and alter the process slightly, or write some Javascript to strip the HTML out of the iframe on form submit.
It seems like there should be an easier way - has anyone solved this problem before?
Thanks.
I would switch to a different editor like CKEditor or TinyMCE that allows you to edit the whole HTML by using themselves an iframe for the edited contents. That way you can edit exactly what you will send.
One example: http://nightly.ckeditor.com/latest/ckeditor/_samples/fullpage.html
Change how you are targeting your selectors. If you have conflicts, then your CSS is not written efficiently.
Maybe use a root div with a specific ID and have everything cascade off of that.