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 surroundHTML() method of the Obout.Ajax.UI.HTMLEditor.DesignPanel component.

Font Size Header 
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
<input type="button" onclick="surround();" value="Make a quote from the selected text"/>
<obout:Editor runat="server" Id="editor" Height="400px" Width="100%" />
<script type="text/javascript">
surround() {
  var editPanel = $find("<%= editor.ClientID %>").get_editPanel();
  var activeMode = editPanel.get_activeMode();
  var design = Obout.Ajax.UI.HTMLEditor.ActiveModeType.Design;
  var leftHTML = "<span style='font-weight: bold; background-color:#FFFF00; color:#0000FF'>&lt;&lt;"
                    + "</span><span style='font-style:italic; background-color:#FFEEDD; color:#663300'>";
  var rightHTML = "</span><span style='font-weight: bold; background-color:#FFFF00;"
                      + " color:#0000FF'>&gt;&gt;</span>";

  if (activeMode == design) {
      var designPanel = editPanel.get_activePanel();
      var retval = designPanel.surroundHTML(leftHTML, rightHTML);
      if (!retval) {
          alert("Nothing was selected!");
  return true;

"Obout Team, I am the Development Manager for the inkubook tem at Author Solutions. I wanted to personally take the time to thank the Obout team for the absolute top notch support we have been provided. Your support has exceeded anything we have received from your competitors. When given a choice of tools, I will have no hesitation in selecting the Obout tool over any tool provided by a competitor. "

Jim Daugherty
Development Manager, inkubook

Random testimonial   All testimonials