Editor in a Dialog Control
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
#responseContainer {
margin:1em;
border: 1px solid black;
background-color: #ccc;
height: 4em;
padding: 1em;
}
Editor in a Dialog Control
In YUI-based applications, it's common for forms to appear as part of Dialogs. In this example, a form enhanced with the Rich Text Editor appears in a Dialog. Read the tutorial below to learn how to integrate the RTE seamlessly with your Dialog's form contents.
Enter Title and Description:
Title:
Description:
Show Dialog
Dialog's post response will appear here after you submit the Dialog.
(function() {
//hide and disable the non-dialog submit button:
document.getElementById("submitButton").disabled = true;
document.getElementById("submitButton").style.display = "none";
//create the RTE:
var editor = new YAHOO.widget.Editor('description', {
width: '702px',
height: '200px'
});
//After the Editor renders it, we will hide it
//so the iframe doesn't bleed through
editor.on('afterRender', editor.hide);
//render the editor explicitly into a container
//within the Dialog's DOM:
editor.render();
//create Dialog:
var dlg = new YAHOO.widget.Dialog("dialogContainer", {
width:"725px",
fixedcenter:true,
modal:true,
visible:false
});
//event handlers for our Dialog buttons:
//if the user clicks "save", then we save the HTML
//content of the RTE and submit the dialog:
function handleSave() {
editor.saveHTML();
this.submit();
}
//if the user clicks cancel, we call Dialog's
//cancel method:
function handleCancel() {
this.cancel();
}
//set up buttons for the Dialog and wire them
//up to our handlers:
var myButtons = [ { text:"Save",
handler:handleSave },
{ text:"Cancel",
handler:handleCancel,
isDefault:true } ];
dlg.cfg.queueProperty("buttons", myButtons);
//Dialog by default will use Connection Manager to POST
//form contents to the URI specified in the action
//attribute of the form; we can wire up success and
//failure handlers for the XHR call and act on them
//just as we would with any Connection Manager
//transaction:
var onSuccess = function(o) {
//we're going to get JSON back from post.php; we
//can parse it using JSON.parse:
var data = YAHOO.lang.JSON.parse(o.responseText);
//in this case, we'll just output the contents to
//a div to see what they contain:
document.getElementById("responseContainer").innerHTML = 'Status: ' +
data.Results.status +
'
' + (new Date().toString());
}
var onFailure = function(o) {
//in the event of a failure, we can log the problem:
YAHOO.log("Dialog reported a communication failure; connection object: " + YAHOO.lang.dump(o, 5));
}
dlg.callback.success = onSuccess;
dlg.callback.failure = onFailure;
//Now that our Dialog is fully configured, we can
//render it:
dlg.render();
//RTE needs a little love to work in in a Dialog that can be
//shown and hidden; we let it know that it's being
//shown/hidden so that it can recover from these actions:
dlg.showEvent.subscribe(editor.show, editor, true);
dlg.hideEvent.subscribe(editor.hide, editor, true);
//instantiate button to show Dialog:
var btn = new YAHOO.widget.Button("showDlg", {type:"link"});
btn.on("click", dlg.show, dlg, true);
})();
yui_2.7.0b.zip( 4,431 k)