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.
Related
I don't have direct Host or Superuser access to DNN and the way our system is set up I wont get access to those accounts. It is a policy where i work. Is there ANY way to get your HMTL/CSS to actually work as you put it into the DNN HMTL editor? I have tried adding things like an accordion sidebar, tabbed area, and a simple CSS image hover. DNN takes my code and jumbles it up so that it does not work correctly. I have taken markup straight from my text editor, into dnn (that was working fine in the browsers before i took it into DNN) and it shows up, but does not act like it should or the code gets jumbled and breaks and I spend an hour trying to fix it EVERY TIME.
Has anyone out there had the same issue, or any suggestions, tricks to get your markup to work correctly in DNN.
Thanks,
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification.
One possible way to keep your javascript working is to move it to the Header or Footer options in the module options of that module instead of the content.
As for if your code contains a FORM element, you can use javascript to modify the Asp.NET FORM element to suit your need, see http://dotnetnuke.bz/Articles/tabid/156/DotNetNuke/98/How-to-Include-Multiple-Forms-in-DotNetNuke.aspx for more details.
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 want to display html template in a webpage. The styles of that template is specified inline.
But when i try to display it in my webpage, some styles that are defined in my css are adding into it and the template is not displayed properly. This template is used to create mails and when i send this template as mail to my gmail account it is displayed correctly. How its done in gmail? How they show the template using inline styles only?
The question is actually pretty clear. I think you're looking for an iframe tag. That will allow you to display a document within another page, with its own independent style.
One thing to add: if you ever wonder how another site does something, just install firebug (on Firefox) and check out their source.
I solved this problem using the tinymce editor. I used tinymce editor in read mode and displayed the html template in it. I dont know whether its correct method or not. But it was perfect for my requirement. Thanks Greg for your reply..:)
I'm in the process of reproducing some standalone HTML forms as pages in a CMS that uses FCKEditor by simply copying and pasting the relevant code into the editor.
But when I save and view the page, the HTML has been changed and the tag has been moved up to just below the open tag -- and not at the bottom of the form. This obviously renders all of the fields in the form, including the submit button, useless.
Is there a way to tell FCKEditor that I know what I'm doing and I don't need it to validate the HTML output?
Unfortunately this is a hosted CMS service (actually part of an email blast tool) so making changes to the configuration will mean I need to go through the company's support system, which is fine -- but they haven't been able to solve it for me yet, so I'm hoping to get the answers for them.
Thanks!
This is a bit of a difficult thing because as far as I know, it's not necessarily the WYSIWYG editors that "fix" "broken" HTML, it's the browsers' HTML editing engines themselves, and it's often near impossible to talk them out of doing this.
You'd have to show your exact source to get detailed feedback, but check out whether protectedSource is something for you. It's supposed to protect code that is covered by the regular expression you specify.
I'm not sure about FCKEditor, but you might want to consider switching to TinyMCE. TinyMCE allows you to both edit a list of allowed tags, and to turn off HTML validation off completely if you like.
When viewing a webpage, I would like to copy a selection of text with its html formatting in one piece.
Meaning if some text is in bold and blue, I want the tool to create a style or class in the html which makes the text blue. Everything is contained in the produced html.
I have downloaded a similar plugin but the classes definitions are still external which means I have to get them separately. A non technical user would be at a loss here. I want the user to be able to copy and paste to a new webpage and that page just just works properly because the html copied contains everything.
This doesn't have to be a FF plugin. It could be IE or a Windows app.
I think you may be able to accomplish this by using the Firebug for Firefox extension. I often use it to export the content of a web page for use rebuilding a similar object. Is this still too technical? Firebug is a powerful, viable option that it is worth learning, I think.
I think the copy operation does this already. If I copy this page and paste it in a WYSIWYG editor such as TinyMCE (included in Wordpress), I get the formatting. For example the text of this page is (as pasted):
<h2>Firefox plugin to copy text with its formatting Intelligently?</h2>
The HTML markup is copied, but not external CSS. I suspect creating a piece of CSS that would apply to your standalone snippet of code the style it had within the DOM hierarchy would be horribly difficult if at all possible.
Try SnappySnippet, it's a Chrome extension that allows to copy html and all the related css style of an element. It integrates itself into the Chrome console. I hope this helps
This seems to be what you're looking for:
Web Design Pirate:
https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/
It creates a new "Pirate" tab in the developer tools that lets you grab the elements you want, including all associated CSS.