ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Surround selected content with HTML text

This example demonstrates how to use moveToWord() method of the Obout.Ajax.UI.HTMLEditor.DesignPanel component.

Here you can set cursor to the specified word in the content or select(highlight) the specified word.


Plain text word number (start from 0):


Font Size Header 
Aa
ASP.NET
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
Plain text word number (start from 0):
<asp:TextBox runat="server" ID="numberOfWord" Text="0" style="width:30px" /><br />
<asp:Button runat="server" OnClientClick="return doit(2);" Text="Select the whole word" />
<asp:Button runat="server" OnClientClick="return doit(0);" Text="Set cursor to the start of the word" />
<asp:Button runat="server" OnClientClick="return doit(1);" Text="Set cursor to the end of the word" />
<obout:Editor runat="server" Id="editor" Height="400px" Width="100%" />
...
<script type="text/javascript">
  function doit(mode) {
     var designMode = Obout.Ajax.UI.HTMLEditor.ActiveModeType.Design;
     var editPanel = $find("<%= editor.ClientID %>").get_editPanel();
     // current mode
     var activeMode = editPanel.get_activeMode();
     // for 'Design' mode only
     if (activeMode == designMode) {
        var designPanel = editPanel.get_activePanel();
        var inputElement = $get("<%= numberOfWord.ClientID %>");
        var n = parseInt(inputElement.value);
        n = isNaN(n) ? 0 : n;
        inputElement.value = n;
        designPanel.moveToWord(n, mode);
     }
     return false;
  }
</script>

"Thanks for the great support. I will buy the whole suite within a couple of days. You guys are the best!"

Toine A.G. Bastiaans

Random testimonial   All testimonials