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;

"YOU ARE THE BEST! The first time in my life I've met with such excellent team. Almost instant reply! That's amazing! Thank You Very Much!"

Arsen Memetov
San Computer Antalya, Turkey

Random testimonial   All testimonials