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.
Related
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.
What's the easiest way, in repeatable manner, to make Plone WYSIWYG and HTML input accept all elements and styles?
The use case
Lot of private sites
Trusted editors
Advanced editors (able to produce hand crafted HTML and want to produce hand crafted HTML)
Plone element whitelisting is more hinder in these kind of cases.
Implementation
Add-on product, with big button "disable all HTML security"
Since HTML filtering wants you to type in every CSS directive by hand, it is not practical in any mean. There must be a hidden switch to turn off all HTML filtering somehow?
Also is it possible to make unsafe HTML easily possible for Archetypes/Dexterity Rich text fields?
It's not a big button, but it's not hard either. In the Zope Management Interface, at the top of a Plone site, go to portal_transforms and open the safe_html transform. Disable it by putting a "1" in the disable_transform field and saving.
This should not be done if there are any untrusted content authors or editors — or any naive enough to copy code from a third-party site and paste it into an editor.
You now need to follow the linked post below by David Glick... but it's stupidly complicated and i gave up, instead favouring using customOverrides product to insert my js.
http://glicksoftware.com/blog/disable-html-filtering
Also, the Plone doco about this is wrong (http://docs.plone.org/develop/plone/forms/wysiwyg.html#disabling-html-filtering-and-safe-html-transformation) and needs to be updated and in all honesty this sort of thing is an instant turn off for would be new adopters.
I have a question of how to develop a small website which is quick and easy which has html support unlike google sites. For one of my course project I have to develop a prototype of the website but just html pages. Want to implement the clicks, text fields, checkboxes etc., I have created a small site of googlesites but that doens't allow me to put the html like text fields radio buttons etc., I just wanted to know if there is any free WYSIWYG capable for doing my stuff.
Thanks in advance
EDIT:
I dont want to use the div tags and arrange the location of HTML. I just want to drag and drop the fields and the site should automatically place the fields appropriately on the webpage something as easy as google sites
I found jsfiddle.net to be really useful. Basically you can put in HTML, CSS, and Javascript, click "Run" and see the result.
It's great for testing or hacking some CSS or Javascript, as it gives you instant feedback, saving you the "edit, save, launch, wait, repeat" cycle you might find using a text or HTML editor.
UPDATE
I'm not sure if I understood your question correctly. Perhaps you are looking for a tool like Google sites but with more capabilities? If so, http://www.weebly.com/ is a good option and it is free.
Does anyone know about a good HTML editor which can be configured in such a way that it is gsp aware?
What I mean is that at least tags such as <g:link> and <g:input> should be displayed as their html equivalent.
Yes I know: a perfect editor is hard to write and it is easier to edit the HTML sources (that's what I do), but there are people who prefer an HTML editor...
Update: yes, I am looking for a WYSIWYG HTML editor with which I can drag'n'drop some html elements to a page without changing the <g:...> tags which might already be contained in the page. In addition, this editor should have some gsp awareness, so that <g:...> tags are displayed in an appropriate way.
Update: still looking for something, so I started a bounty. What I need is something like this plugin: http://code.google.com/p/grails-form-builder-plugin/ but more evolved...
Bounty: not easy to select the right answer for the bounty. None of the answers is a solution to my problem, but I have decided that rschlachter points me in the right direction: a wysiwyg form editor is not the right solution for a developer...
I think there may be a flaw in the process here. You could build the page first in HTML and make any changes there before putting in any gsp elements. While the page is in HTML format people can continue to use WYSIWYG editors and then developers can add in the grails functionality.
It just seems like if you need/want to use a WYSIWYG editor, you shouldn't be modifying a gsp.
The iterations I prefer to use after I have gathered requirements are:
wireframe
mockup
html
gsp
If the gsps are already there (ie you inherited the project or something) you could go back a step and create an html only version of the page by pulling the gsp elements out and putting in images of them or replacing them with their html equivalents.
the IBM Maqetta Project seems to be going in the right direction:
http://maqetta.org/
Mercury editor might be worth looking at too.
http://jejacks0n.github.com/mercury/
There is one more editor that you might want to look at:
Aloha Editor - http://www.aloha-editor.org/
Orbeon can be an option
http://www.orbeon.com/orbeon/home/
Might be able to do this with TinyMCE by configuring the valid_elements or the extended_valid_elements (docs). For example, if you want to replace <g:link> and <g:input> you would do something like:
tinyMCE.init({
valid_elements : "a/g:link,input/g:input"
});
OR If you want to simply enable the additional elements, then you could do something like:
tinyMCE.init({
extended_valid_elements : "g:link,g:input"
});
I've been looking into some of the WYSIWYG editors (TinyMCE, FCKEditor, etc.) and they all seem to offer a lot of options.
However, one vital feature that seems to lack is a simple "add custom html" option which would allow the user to input any of these embed-snippets you find all around the web these days, for example a youtube video. This is different than a "edit html/source" feature as that requires actual knowledge of html and there is the risk of the user writing invalid code.
Another issue that I couldn't find much about is the output html. How would I make sure that this output causes no security invulnerabilities? Even when the user has the ability to add his own html?
So, basically, is there an open source WYSIWYG editor which covers these 2 features?
FCKEditor achieves this via plugins. e.g. http://sourceforge.net/projects/youtubepluginfo/
For the first part, you either have the "view source" view of the editor or, if that is too complex, I'm pretty sure such plugins already exist for all major editors. If they don't, building a "insert arbitrary HTML" plugin should be easy to implement by tweaking another simple plug-in like the youTube one linked to in Martin's answer.
The second part - sanitizing the incoming HTML - is impossible to achieve in the WYSIWYG editor itself, because it acts solely on the client side, and fills content into a form input that could be manipulated anyway, even though you turn off the "custom HTML" function in the editor.
Therefore, the sanitizing of the HTML needs to take place on server side. If you can use PHP, a tool that looks very good to me from the outside - I haven't worked with it but plan to in the near future - is HTML Purifier. It claims to produce reliable HTML with minimum hassle.