ComponentOne WebEditor for ASP.NET allows you to use your own custom dialog boxes for some functions instead of using the C1WebEditor embedded dialog boxes. The following table lists the dialog boxes that can be customized, the button used to access them at run time, and the toolbar where the button is located.
To use a custom dialog box, you must first define it in an HTML file. The .HTML File column below provides the name of the .html file that C1WebEditor recognizes for each corresponding dialog box. For example, if you want to use a customized Edit Table dialog box, name your .html file EditTable.html.
|
Dialog Box |
Button and Button Name |
Toolbar |
.HTML File |
|
Edit Table |
|
Table-Editing |
EditTable.html |
|
Find and Replace |
|
Common |
FindAndReplace.html |
|
Image Browser |
|
Common |
ImageBrowser.html |
|
Insert Hyperlink |
|
Common |
InsertLink.html |
|
Insert Table |
|
Table-Editing |
InsertTable.html |
|
Preview |
|
Common |
Preview.html |
|
Special Characters |
|
Common |
SpecialCharacters.html |
|
Tag Inspector |
|
Common |
TagInspector.html |
Edit Table
Find and Replace
Image Browser
Insert Hyperlink
Preview
Insert Special Character
Tag Inspector
To use a custom dialog box, follow these steps.
1. Edit a dialog box .html file as desired in your default HTML editor. We are going to use a customized Insert Table dialog box for this example, so we will create an InsertTable.html file. Click here for sample HTML code for the Insert Table dialog box.
<html>
<style type="text/css">
<.style21 {font-family: Calibri; font-size: 16px; }
.style1 {font-family: Calibri}
</style>
<body>
<!-- remove html and body tags for release -->
<!--
=================================================================================================
=========================== Action dialog form description and sample ===========================
=================================================================================================
***** Available defines:
<%EDITOR%> - C1WebEditor object.
<%FORM_CONTAINER%> - Current action form parent container element. Use this define to lookup and interact with form elements.
<%INSPECTED_ELEMENT%> - Current inspected element, if any.
***** Available action form methods:
<%EDITOR%>.actionform_init()
<%EDITOR%>.actionform_reload()
<%EDITOR%>.actionform_showprogress()
<%EDITOR%>.actionform_getdialog()
<%EDITOR%>.actionform_getcontentcontainer()
<%EDITOR%>.actionform_getinspectedelement()
<%EDITOR%>.actionform_getelementsbyname()
<%EDITOR%>.actionform_cancel()
<%EDITOR%>.actionform_commit() // Please note commit operation works asynchroniusly, timeout before execute commit is 10ms.
=================================================================================================
=================================================================================================
-->
<!--c1initscript:
/* INITIALIZE FORM */
try {
<%EDITOR%>.actionform_bringdialogtocenter();
// Get hash (dictionary) with all available elements, using name as key:
var hash = <%EDITOR%>.actionform_getelementsbyname();
// Get inspected element
var inspElem = <%INSPECTED_ELEMENT%>;
//
// tag name TABLE of the inspElem means what we start editing table instead otherwise inserting table
//
if(inspElem != null && inspElem.tagName == "TABLE") {
<%EDITOR%>.actionform_getdialog().set_text("* Edit table");
hash["Rows"].value = inspElem.rows.length;
if(inspElem.rows.length > 0) {
hash["Cols"].value = inspElem.rows.item(0).cells.length;
} else {
hash["Cols"] = 0;
}
hash["TableWidth"].value = (inspElem.attributes.width != null ? inspElem.attributes.width.value : "")
hash["TableHeight"].value = (inspElem.attributes.height != null ? inspElem.attributes.height.value : "")
hash["BorderThickness"].value = inspElem.border;
hash["CellPadding"].value = inspElem.cellPadding;
hash["CellSpacing"].value = inspElem.cellSpacing;
hash["css_text_field"].value = (inspElem.style.cssText != null ? inspElem.style.cssText : "");
} else {
<%EDITOR%>.actionform_getdialog().set_text("Insert table");
}
} catch (ex) {
alert("Dialog INIT ERROR:" + ex.message);
}
:c1initscript-->
<!--c1commitscript:
/* COMMIT FORM CHANGES */
try {
// Get hash (dictionary) with all available elements, using name as key:
var hash = <%EDITOR%>.actionform_getelementsbyname();
// Get inspected element
var inspElem = <%INSPECTED_ELEMENT%>;
var tableWidth = hash["TableWidth"].value;
var tableHeight = hash["TableHeight"].value;
var aBorderThickness = parseInt(hash["BorderThickness"].value);
var rows = parseInt(hash["Rows"].value);
var cols = parseInt(hash["Cols"].value);
var aCellPadding = parseInt(hash["CellPadding"].value);
var aCellSpacing = parseInt(hash["CellSpacing"].value);
//
// tag name TABLE of the inspElem means what we editing table instead otherwise inserting table
//
if(inspElem != null && inspElem.tagName == "TABLE") {
// Update table:
// set focus to table
try {
inspElem.focus();
} catch(exxint1){
}
if(tableWidth != null) {
var namedAttrItem = document.createAttribute("width");
namedAttrItem.value = tableWidth;
inspElem.attributes.setNamedItem(namedAttrItem);
}
if(tableHeight != null) {
var namedAttrItem = document.createAttribute("height");
namedAttrItem.value = tableHeight;
inspElem.attributes.setNamedItem(namedAttrItem);
}
if(!isNaN(aBorderThickness) && aBorderThickness >=0) {
inspElem.border = aBorderThickness;
}
if(!isNaN(aCellPadding) && aCellPadding >=0) {
inspElem.cellPadding = aCellPadding;
}
if(!isNaN(aCellSpacing) && aCellSpacing >=0) {
inspElem.cellSpacing = aCellSpacing;
}
if(!isNaN(rows)) {
while(inspElem.rows.length > rows) {
inspElem.deleteRow(0);
}
while(inspElem.rows.length < rows) {
inspElem.insertRow(0);
}
if(!isNaN(cols)) {
for(var i=0; i<inspElem.rows.length; i++) {
while(inspElem.rows.item(i).cells.length > cols) {
inspElem.rows.item(i).deleteCell(0);
}
while(inspElem.rows.item(i).cells.length < cols) {
inspElem.rows.item(i).insertCell(0);
}
}
}
}
if(hash["css_text_field"].value != inspElem.style.cssText){
inspElem.style.cssText = hash["css_text_field"].value;
}
} else {
// Insert table:
var sTableWidthStr = "";
var sTableHeightStr = "";
if(tableWidth != null && tableWidth != "") {
sTableWidthStr = ' width="' + tableWidth + '"';
}
if(tableHeight != null && tableHeight != "") {
sTableHeightStr = ' height="' + tableHeight + '"';
}
var sBorderThicknessStr = "";
if(!isNaN(aBorderThickness) && aBorderThickness >=0) {
sBorderThicknessStr = ' border="' + aBorderThickness + '"';
}
var sPadSpacStr = "";
if(!isNaN(aCellPadding) && aCellPadding >=0) {
sPadSpacStr += " cellpadding=" + aCellPadding;
}
if(!isNaN(aCellSpacing) && aCellSpacing >=0) {
sPadSpacStr += " cellspacing=" + aCellSpacing;
}
if(isNaN(rows) || rows<1)
rows = 1;
if(isNaN(cols) || cols<1)
cols = 1;
var sCssTextToInsert = "";
if(hash["css_text_field"].value != ""){
sCssTextToInsert += " style='" + hash["css_text_field"].value + "';";
}
var s = "<table" + sTableWidthStr + sTableHeightStr + sBorderThicknessStr + sPadSpacStr + sCssTextToInsert + ">";
for(var i=0;i<rows;i++){
s += "<tr>";
for(var j=0;j<cols;j++){
s += "<td>";
s += "cell " + i + "-" + j;
s += "</td>";
}
s += "</tr>";
}
s += "</table>";
<%EDITOR%>.insertHTML(s);
}
} catch (ex) {
alert("Dialog COMMIT ERROR:" + ex.message);
}
:c1commitscript-->
<table border="0" align="center">
<tr>
<td><table width="474" border="0" align="center" style="margin: 5px 5px 5px 5px;border:1px solid #CCCCCC;">
<tr>
<th width="72" align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Rows:</span></th>
<td width="177" bordercolor="#0000FF" bgcolor="#FFFF99"><input name="Rows" type="text" id="Rows" value="2" /></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Columns:</span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><input name="Cols" type="text" id="Cols" value="2" /></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Table width: </span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><input name="TableWidth" type="text" id="TableWidth" /></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Border thickness: </span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">
<input name="BorderThickness" type="text" id="BorderThickness" value="0" />
<strong>pixels</strong></span></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Cell padding: </span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><input name="CellPadding" type="text" id="CellPadding" /></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Cell spacing: </span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><input name="CellSpacing" type="text" id="CellSpacing" /></td>
</tr>
<tr>
<th align="left" bordercolor="#0000FF" bgcolor="#FFFF99"><span class="style21 style1">Table height: </span></th>
<td bordercolor="#0000FF" bgcolor="#FFFF99"><input name="TableHeight" type="text" id="TableHeight" /></td>
</tr>
</table></td>
</tr>
<tr>
<td style="border-bottom:1px solid #999999;"> </td>
</tr>
<tr>
<td align="right"><input type="button" name="OK" value="OK" onClick="<%EDITOR%>.actionform_commit()" style="width:120px;" /> <input type="button" name="Cancel" value="Cancel" onClick="<%EDITOR%>.actionform_cancel()" style="width:120px;" /></td>
</tr>
</table>
</body>
</html>
Note: It is important to use the same .html file names as listed in the table above for your customized files. C1WebEditor associates these file names with the corresponding dialog boxes.
2. In your Visual Studio project, right-click inside the Solution Explorer and select New Folder.
3. Name the new folder. In this example, we named it NewDialogs.
4. Place a copy of your customized InsertTable.html file (or whichever file you edited) in the NewDialogs folder within your project folder.
5. In Visual Studio, select the C1WebEditor control on your form, and enter ~/NewDialogs for the EditorDialogsPath property in the Properties window. This tells C1WebEditor where your custom .html files are located. If there are no files for other dialog boxes in this folder, then C1WebEditor will use its own embedded dialog boxes.
6. Press F5 to run the application and click the
Insert Table button 
on the Table-Editing toolbar. The custom Insert
Table dialog box is loaded by AJAX.
|
