title: Javascript getSelection
body: <p>I got another question related to the getSelection.</p>
  
  <p>I'm working on a WYSIWYG text editor and I'm using custom functions to apply HTML effect to the selected text. So far things are working great.</p>
  
  <p>Currently the way it works is whatever you highlight, it replaces the entire body of text in the textarea with what you selected. I am trying to figure out how to make it apply the desired effects without removing everything else in the body.</p>
  
  <p>Thoughts?</p>
  
  <pre><code>function button(type) {
      var txt = '';
  
      editor_body = document.getElementById('editor').contentWindow.document;
  
      if (editor_body.getSelection()) {
          txt = editor_body.getSelection();
      } else if (editor_body.selection.createRange()) {
          txt = editor_body.selection.createRange();
      } else return;
  
      switch (type) {
          case "bold": txt = '&lt;b&gt;' + txt + '&lt;/b&gt;'; break
          case "italic": txt = '&lt;i&gt;' + txt + '&lt;/i&gt;'; break
          case "underline": txt = '&lt;u&gt;' + txt + '&lt;/u&gt;'; break
          case "strike": txt = '&lt;strike&gt;' + txt + '&lt;/strike&gt;'; break
          case "supscript": txt = '&lt;sup&gt;' + txt + '&lt;/sup&gt;'; break
          case "subscript": txt = '&lt;sub&gt;' + txt + '&lt;/sub&gt;'; break
          case "alignleft": txt = '&lt;div style="text-align: left;"&gt;' + txt + '&lt;/div&gt;'; break
          case "aligncenter": txt = '&lt;div style="text-align: center;"&gt;' + txt + '&lt;/div&gt;'; break
          case "alignright": txt = '&lt;div style="text-align: right;"&gt;' + txt + '&lt;/div&gt;'; break
          case "alignjustify": txt = '&lt;div style="text-align: justify;"&gt;' + txt + '&lt;/div&gt;'; break
          case "ol": txt = '&lt;ol&gt;' + txt + '&lt;/ol&gt;'; break
          case "ul": txt = '&lt;ul&gt;' + txt + '&lt;/ul&gt;'; break
          case "insertlink": insertlink = prompt("Enter image URL:", "http://"); if ((insertlink != null) &amp;&amp; (insertlink != "")) {txt = '&lt;a href="' + insertlink + '"&gt;' + txt + '&lt;/a&gt;'; } break
          case "insertimage": insertimage = prompt("Enter image URL:", "http://"); if ((insertimage != null) &amp;&amp; (insertimage != "")) {txt = '&lt;img src="' + insertimage + '"&gt;'; } break
          case 'insertvideo': insertvideo = prompt("Enter video URL:", "http://"); if ((insertvideo != null) &amp;&amp; (insertvideo != "")) {txt = '&lt;object type="application/x-shockwave-flash" data="' + insertvideo + '" width="640" height="385"&gt;&lt;param name="movie" value="' + insertvideo + '" /&gt;&lt;/object&gt;';} break
      }
  
      editor_body.body.innerHTML = txt;
      document.getElementById('editor').contentWindow.focus();
  }
  
  function Start() {
      var e;
  
      document.getElementById('editor').contentWindow.document.designMode = "on";
  
      try {
          document.getElementById('editor').contentWindow.document.execCommand("styleWithCSS", false, "false");
      } catch (e) {
      }
  
      try {
          document.getElementById('editor').contentWindow.document.execCommand("undo", false, null);
          editormode = "true";
      } catch (e) {
          editormode = "false";
      }
  
      if (document.addEventListener) {
          document.addEventListener("mouseup", dismissmenu, true);
          document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true);
          document.addEventListener("keypress", dismissmenu, true);
          document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true);
      } else if (document.attachEvent) {
          document.attachEvent("mouseup", dismissmenu, true);
          document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true);
          document.attachEvent("keypress", dismissmenu, true);
          document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true);
      }
  }
  </code></pre>