Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
24497
How to trigger actions for WebHtmlEditor from javascript
posted

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')" />

Parents
No Data
Reply
  • 90
    posted

    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(

    ToolbarItemType.CustomButton);

    _wheSummaryText.Toolbar.ID =

     

    "SummaryTextToolBar";

    _wheSummaryText.Toolbar.Items.GetByType(

     

    ToolbarItemType.CustomButton).Key = "CustomButton";

    _wheSummaryText.Toolbar.Items.GetByType(

     

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

     

     

     

     

     

Children