HTML form with advanced editing for user (HTML edit) - html

I have a text_area on my form but by default they only accept text, I was trying to enable something like advanced editing that would allow users to put tags, bolds, etc, quickly.
This feature is available on this exact stackoverflow area input where im typing right now and is very common on forums, etc. Is there any quick way to enable this on my side?

Well if you create your own then it will take much time to built a just like one.
and if you want a quick solution then search for editors like ck-editor and there are lot more editors just like that
thanks

You can't. HTML elements can only contain plain text.
You will need to use a Javascript rich text editor component such as TinyMCE or CKEditor.

Related

adding spelling suggestion on HTML page

I am new to web development and just trying to add spelling suggestion to a textarea. I really don't know what I am going to need for this, need to write the code myself or use a third party library etc. Can someone suggest me how to add this functionality to a simple HTML page containing a textarea. I want when I write a misspelled word in text area, some suggestions matching that word should appear in dropdown.
Well autocorrect in the web page can be achieved by JavaScript for sure.
There are some nice frameworks for this, probably you could see this:
https://github.com/sanisoft/jQuery-auto-correct
For only spellchecking (despite built-in browser checking):
http://www.javascriptspellcheck.com/JQuery_SpellCheck_Plugin

Help with creating a demo website

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.

WYSIWYG HTML editor for grails gsp files

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"
});

How to allow font styling in textbox

Hey guys, there's a certain text box that I want to allow users to make text bold, italic, point form, add pictures, ... Anyone know how to do that?
Do you mean something like this: http://nicedit.com/ and http://nicedit.com/demos.php? It's called a WYSIWYG (What You See Is What You Get) editor.
If you want to make one, this tutorial seems pretty good: http://www.webreference.com/programming/javascript/gr/column11/. It show you how to make an old-school editor, but you can extrapolate it a bit more one you get the jist of it.
You can use an editor like CKEditor or TinyMCE to accomplish this.
For more options, see the following site:
List of Free Web Based HTML Editors For Your CMS Project

FCKEditor breaking HTML forms

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.