Most actions of WebHtmlEditor are wrappers for document.execCommand(action, params). The wrapper function for that action has name _format. It was intended for internal usage, though, application may use is it as a short-cut for execCommand. Those actions are applied to selected object where caret is located.Internal implementation of actions which insert objects are rather complex and different for different browsers. For example insert-table action includes building TABLE according to properties entered in InsertTable dialog.
All actions on client are filtered through global function iged_act(). Editor does not have public options to trigger toolbar actions from javascript for several reasons. However, applications may trigger custom actions for simple actions like Bold, Italic and few others. That will have effect for current/focused editor.Below is example, which shows how to use _format and iged_act. It also includes example to access objects (like TABLE) located in editor and modify its property.
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server"></ighedit:WebHtmlEditor><script type="text/javascript">function setColor(val){ var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>'); if(editor) editor._format('forecolor', val);}function setBold(){ iged_act('bold');}function setTableProp(prop, val){ var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>'); if(!editor) return; // get reference to editing area: // in case of IE the DIV is used, all other browsers: IFRAME var field = editor._ie ? editor._elem : editor._doc().body; var tables = field.getElementsByTagName('TABLE'); if(!tables || tables.length < 1) return; var table = tables[0]; table.style[prop] = val;}</script><input type="button" value="Bold" onclick="setBold()" /><input type="button" value="Color" onclick="setColor('#c00000')" /><input type="button" value="TableBackground" onclick="setTableProp('background', 'red')" /><input type="button" value="TableColor" onclick="setTableProp('color', 'blue')" /><input type="button" value="TableBorder" onclick="setTableProp('borderColor', 'green')" />
I am developing a custom web part that uses several WebHtmlEditors. I have a custom button added to each of the editors' toolbars. I have an event wired to catch the custom button click in the CreateChildControls(). I cannot get this event to fire. I have added the click event to my code, etc. Here is the code to add the button:
_wheSummaryText.AddToolbarItem(
_wheSummaryText.Toolbar.ID =
"SummaryTextToolBar";
_wheSummaryText.Toolbar.Items.GetByType(
ToolbarItemType.CustomButton).Key = "CustomButton";
ToolbarItemType.CustomButton).ToolTip = "Text will be HTML formatted and will be scrubbed of all Word or Excel tags. Click to view text in the format that will be saved to this record.";
_wheSummaryText.ToolbarClick +=
new ToolbarClickEventHandler wheSummaryText_ToolbarClick);
Do you know why is this event not firing? Here is my event:
void wheSummaryText_ToolbarClick(object sender, ToolbarEventArgs e)
{
if (e.Item.Key == "CustomButton")
{string input = ((WebHtmlEditor)sender).Text;((WebHtmlEditor)sender).Text = WordScrubUtil.ScrubWord(input);
Hi,
The buttons in WebHtmlEditor by default do not raise postbacks. To enable that, application should set property of button RaisePostback to true. For example, the Save button has default value for that property as true. Below is example for your codes:
ToolbarButton but = this._wheSummaryText.Toolbar.Items.GetByType(ToolbarItemType.CustomButton) as ToolbarButton;but.RaisePostback = true;
Note: Your codes use AddToolbarItem method to add a custom button. That is ok, but that way you are limited to a single custom button. The GetByType was designed for unknown/general item. I suggest you to create a button explicitly, add it to collection and set its properties. It also will look cleaner. Below is example:
ToolbarButton but2 = new ToolbarButton(ToolbarButtonType.Custom);// Note: do not set properties of but2 before it was added to collection// otherwise, property will not go to viewstate and after postback custom value will be lostthis._wheSummaryText.Toolbar.Items.Add(but2);but2.Key = "MyCustomButton";but2.RaisePostback = true;
Wow. That worked. Such a simple change. Thanks!