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;

"Compliments regarding your products, our firm likes them so much."

Marco Carminati
Disc spa

Random testimonial   All testimonials