Form submission WYSIWYG content

How to submit WYSIWYG rich text field content in form form, in most cases, we will use rich text field, rather than pure textarea, because we may need to customize some special text design, also have the picture, thus displays the content which the user wants to display graphically, Just like markdown, you say?

Rich Text Editor

For WYSIWYG, you can refer to
The bootstrap custom-made mini WYSIWYG (what do you see are get) Rich Text editor,
The use of Bootstrap Rich text editor BOOTSTRAP-WYSIWYG
, but I think you look at me better than them, haha!

Material download

WYSIWYG Rich Text editor

If the version does not correspond, the Rich text editor will not display properly.

Import JS and CSS

<link type="text/css" rel="stylesheet" href="${ Ctx}/components/bootstrap/css/bootstrap-theme.min.css " /><link type="text/css" rel="stylesheet" href="${ Ctx}/components/bootstrap/css/bootstrap.min.css " /><link type="text/css" rel="stylesheet" href ="${ctx}/components/awesome/css/font-awesome.css" /><link type="text/css" rel="stylesheet" href="${ Ctx}/components/wysiwyg/bootstrap-responsive.min.css " /><link type="text/css" rel="stylesheet" href ="${ctx}/components/wysiwyg/wysiwyg.css" /><script type="text/javascript" src="${ctx}/components/jquery/ Jquery.js "></script><script type="text/javascript" src="${ctx}/components/ Bootstrap/js/bootstrap.min.js "></script><script type="text/javascript" src="${ctx}/components/wysiwyg/ Bootstrap-wysiwyg.js "></script><script type="text/javascript" src="${ctx}/components/ Wysiwyg/jquery.hotkeys.js "></script>

Note the package path for Font-awesome

Using WYSIWYG

<jsp:include page="/components/wysiwyg/wysiwyg.jsp"><jsp:paramvalue="${description}" name="description"/></jsp:include>

Using such a statement in the div you need to import, I use the <jsp:include> tag and then pass the initialized text content.

Then you find the wysiwyg.jsp file in the resources I provided, which I used

<%   String description = request.getParameter("description");  %>

type="hidden" id="description"value="<%=description%>">

$(‘#editor‘).html($("#description").val());

These three strings of code to pass the parameters, do not know if there is a better solution, if you have, please tell me !

This way, you can see the effect:

Encapsulating form Forms

The key is coming, as I said in my preface, for ordinary textarea, we just

<textarea class="form-control tb_width420 required" rows="3" placeholder="不超过75个字，简要描述一下你的项目" name="brief" maxlength="75">${deal.brief}</textarea>

With this, you can pass the Name property to the server

String name = getPara("name");

Maybe you want to say that before clicking the Submit button, the string JS code will not be finished.

form.action="/hi/meinv?mynameis="+$("#me").html()

If your project has only such a rich text editing domain, then you can end up here. But if you have more than one text field, let's turn it into a component!

So we have (the code refers to the wording of DWZ )

 function iframecallback(Form, callback){    var$form = $ (form), $iframe = $ ("#callbackframe");//Rich Text Editor, this place code is very important, you have to pay attention! $("Div.editor", $form). each ( function(){        var$ This= $( This);varEditor ="<input type= ' hidden ' name= '"+ $ This. attr ("Name") +"' value= '"+ $ This. HTML () +"'/>";    $form. Append (editor); });if(! $form. Valid ()) {return false;}if($iframe. Size () = =0) {$iframe = $ ("<iframe id= ' callbackframe ' name= ' callbackframe ' src= ' about:blank ' style= '" Display:none ' ></iframe> " ). AppendTo ("Body"); }if(!form.ajax) {$form. Append (' <input type= ' hidden "name=" Ajax "value=" 1 "/> "); } Form.target ="Callbackframe"; _iframeresponse ($iframe [0], Callback | | Yunm.ajaxdone);} function _iframeresponse(iframe, callback){    var$iframe = $ (iframe), $document = $ (document); $document. Trigger ("Ajaxstart"); $iframe. Bind ("Load", function(event){$iframe. Unbind ("Load"); $document. Trigger ("Ajaxstop");if(IFRAME.SRC = ="javascript: '%3chtml%3e%3c/html%3e ';"||//For SafariIFRAME.SRC = ="javascript: ' ) {//For FF, IE            return; }varDoc = Iframe.contentdocument | | Iframe.document;//Fixing Opera 9.26,10.00        if(doc.readystate && Doc.readystate! =' complete ')return;//Fixing Opera 9.64        if(doc.body && Doc.body.innerHTML = ="false")return;varResponseif(Doc. XMLDocument) {//response is a XML document Internet Explorer PropertyResponse = doc.        XMLDocument; }Else if(Doc.body) {Try{response = $iframe. Contents (). Find ("Body"). text ();            Response = Jquery.parsejson (response); }Catch(e) {//response is HTML document or plain textResponse = Doc.body.innerHTML; }        }Else{//response is a XML documentResponse = doc;    } callback (response); });}

Jfinal End

String description = getPara("editor");

Get to the corresponding text content, and then save to the database is OK.

conclusion : Before the article ended here, and later found to save the picture has been a problem, there is this solution, you also see it!

Related articles

• Rich text field data saved to database
• Jfinal and Bootstrap's login jump combat
• Extreme Ajax Local and global refreshes
• jfinal File Upload
• Another talk about Ajax partial refresh
• To see How to open a dialog box with a tag
• Jfinal passing parameters for Weebox popup box

Jobs Quotes

Then life where not reptile, crawler please mark Http://blog.csdn.net/qing_gee
Be responsible for yourself and be thankful to your parents!

In fact, Steve Jobs did not say this sentence, haha, is green jobs said! Hee Hee

Copyright notice: This is the self-styled qing_gee of the kick-off workers, in writing a high-quality blog column. Let you have a happy reading time, is no longer a luxury dream!

Form submission WYSIWYG content