title: Some execCommands are not running in my custom WYSIWYG editor
body: <p>I'm trying to create a wysiwyg editor from scratch. I tried using an iframe, but I don´t like 'cause I loose the control over its elements (like images), that I'd like to be able to resize. So I moved to contenteditable div. The issue is that now, I have another problem. Previously I had created my own custom color selectors (fore and back) and font selectors(family and size) so that it would have the color pattern I wanted, in order to integrate it in my personal project.</p>
  
  <p>When I was using the iframe, these custom selectors worked justed fine. However, now, with the contenteditable div, every I click in the selectors' options the editor text is desselected (or so it looks like) and, therefore, the selectors can´t do anything.</p>
  
  <p>With bold, italic, ... buttons the functionality is 100% operational.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Text Editor&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="TextEditor"&gt;
          &lt;div id="TextTitle"&gt;
              &lt;span&gt;Title:&lt;/span&gt;&lt;textarea id="title-area"&gt;&lt;/textarea&gt;
              &lt;div&gt;&lt;span&gt;Keywords:&lt;/span&gt;&lt;textarea id="keywords-area"&gt;&lt;/textarea&gt;&lt;/div&gt;
              &lt;div id="topic"&gt;
                  &lt;span&gt;Identify Topic:&lt;/span&gt;
                  &lt;div id="topicselect-wrap"&gt;
                      &lt;div id="topicselect"&gt;General&lt;/div&gt;
                      &lt;button id="topicselect-btn"&gt;&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
                      &lt;ul id="topic-list" class="hidden"&gt;
                          &lt;li class="topicselectopt-sel"&gt;General&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Sports&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Technology&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Politics&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Economy&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Business &amp; Finance&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Entertainment&lt;/li&gt;
                          &lt;li class="topicselectopt"&gt;Other&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="Ribbon"&gt;
              &lt;div id="Ribbon-1"&gt;
                  &lt;button class="RibbonBtn" id="SaveButton" title="Save"&gt;&lt;i class="fa fa-floppy-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div id="Ribbon-1-prev-next"&gt;
                      &lt;button class="RibbonBtn" id="UndoButton" title="Undo"&gt;&lt;i class="fa fa-undo" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="RibbonBtn" id="RedoButton" title="Redo"&gt;&lt;i class="fa fa-repeat" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="Ribbon-2"&gt;
                  &lt;div class="color-picker" id="color-picker-font"&gt;
                      &lt;div id="FontColorButton" class="color-sel" title="Change Font Color"&gt;&lt;/div&gt;
                      &lt;div class="hidden"&gt;
                          &lt;button class="color color1" value="rgb(255,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color2" value="rgb(255,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color3" value="rgb(128,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color4" value="rgb(0,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color5" value="rgb(128,255,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color6" value="rgb(0,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color7" value="rgb(255,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color8" value="rgb(255,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color9" value="rgb(255,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color10" value="rgb(255,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color11" value="rgb(128,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color12" value="rgb(0,255,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color13" value="rgb(0,255,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color14" value="rgb(0,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color15" value="rgb(128,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color16" value="rgb(255,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color17" value="rgb(128,64,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color18" value="rgb(255,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color19" value="rgb(0,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color20" value="rgb(0,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color21" value="rgb(0,64,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color22" value="rgb(128,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color23" value="rgb(128,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color24" value="rgb(255,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color25" value="rgb(128,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color26" value="rgb(255,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color27" value="rgb(0,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color28" value="rgb(0,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color29" value="rgb(0,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color30" value="rgb(0,0,160)"&gt;&lt;/button&gt;
                          &lt;button class="color color31" value="rgb(128,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color32" value="rgb(128,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color33" value="rgb(64,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color34" value="rgb(128,64,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color35" value="rgb(0,64,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color36" value="rgb(0,64,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color37" value="rgb(0,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color38" value="rgb(0,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color39" value="rgb(64,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color40" value="rgb(64,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color41" value="rgb(0,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color42" value="rgb(128,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color43" value="rgb(128,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color44" value="rgb(128,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color45" value="rgb(64,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color46" value="rgb(192,192,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color47" value="rgb(64,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color48" value="rgb(255,255,255)"&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="color-picker" id="color-picker-highlight"&gt;
                      &lt;div id="HighlightButton" class="color-sel" title="Highlight Text"&gt;&lt;/div&gt;
                      &lt;div class="hidden"&gt;
                          &lt;button class="color color1" value="rgb(255,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color2" value="rgb(255,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color3" value="rgb(128,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color4" value="rgb(0,255,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color5" value="rgb(128,255,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color6" value="rgb(0,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color7" value="rgb(255,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color8" value="rgb(255,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color9" value="rgb(255,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color10" value="rgb(255,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color11" value="rgb(128,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color12" value="rgb(0,255,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color13" value="rgb(0,255,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color14" value="rgb(0,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color15" value="rgb(128,128,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color16" value="rgb(255,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color17" value="rgb(128,64,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color18" value="rgb(255,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color19" value="rgb(0,255,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color20" value="rgb(0,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color21" value="rgb(0,64,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color22" value="rgb(128,128,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color23" value="rgb(128,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color24" value="rgb(255,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color25" value="rgb(128,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color26" value="rgb(255,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color27" value="rgb(0,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color28" value="rgb(0,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color29" value="rgb(0,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color30" value="rgb(0,0,160)"&gt;&lt;/button&gt;
                          &lt;button class="color color31" value="rgb(128,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color32" value="rgb(128,0,255)"&gt;&lt;/button&gt;
                          &lt;button class="color color33" value="rgb(64,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color34" value="rgb(128,64,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color35" value="rgb(0,64,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color36" value="rgb(0,64,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color37" value="rgb(0,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color38" value="rgb(0,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color39" value="rgb(64,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color40" value="rgb(64,0,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color41" value="rgb(0,0,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color42" value="rgb(128,128,0)"&gt;&lt;/button&gt;
                          &lt;button class="color color43" value="rgb(128,128,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color44" value="rgb(128,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color45" value="rgb(64,128,128)"&gt;&lt;/button&gt;
                          &lt;button class="color color46" value="rgb(192,192,192)"&gt;&lt;/button&gt;
                          &lt;button class="color color47" value="rgb(64,0,64)"&gt;&lt;/button&gt;
                          &lt;button class="color color48" value="rgb(255,255,255)"&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button class="RibbonBtn" id="BoldButton" title="Bold"&gt;&lt;i class="fa fa-bold" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="ItalicButton" title="Italic"&gt;&lt;i class="fa fa-italic" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="UnderlineButton" title="Underline"&gt;&lt;i class="fa fa-underline" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="StrikeButton" title="Strikethrough"&gt;&lt;i class="fa fa-strikethrough" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="SupButton" title="Superscript"&gt;&lt;i class="fa fa-superscript" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="SubButton" title="Subscript"&gt;&lt;i class="fa fa-subscript" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
                  &lt;div id="font-wrap"&gt;
                      &lt;div id="fontselect"&gt;Arial&lt;/div&gt;
                      &lt;button id="fontselect-btn"&gt;&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
  
                      &lt;ul id="font-list" class="hidden"&gt;
                          &lt;li class="fontselectopt-sel"&gt;Arial&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Calibri&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Consolas&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Cursive&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Georgia&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Monospace&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Tahoma&lt;/li&gt;
                          &lt;li class="fontselectopt"&gt;Times New Roman&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;div id="fontsize-wrap"&gt;
                      &lt;div id="fontsizeselect"&gt;4&lt;/div&gt;
                      &lt;button id="fontsize-btn"&gt;&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;ul id="fontsize-list" class="hidden"&gt;
                          &lt;li class="fontsizeselectopt-sel"&gt;1&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;2&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;3&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;4&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;5&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;6&lt;/li&gt;
                          &lt;li class="fontsizeselectopt"&gt;7&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="Ribbon-3"&gt;
                  &lt;button class="RibbonBtn" id="OrderedListButton" title="Numbered List"&gt;&lt;i class="fa fa-list-ol" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="UnorderedListButton" title="Bulleted List"&gt;&lt;i class="fa fa-list-ul" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;div id="Ribbon-3-Align"&gt;
                      &lt;button class="RibbonBtn" id="LeftAlignButton" title="Align Left"&gt;&lt;i class="fa fa-align-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="RibbonBtn" id="CenterAlignButton" title="Align Center"&gt;&lt;i class="fa fa-align-center" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="RibbonBtn" id="RightAlignButton" title="Align Right"&gt;&lt;i class="fa fa-align-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button class="RibbonBtn" id="FullAlignButton" title="Align Full"&gt;&lt;i class="fa fa-align-justify" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="Ribbon-4"&gt;
                  &lt;button class="RibbonBtn" id="ImageButton" title="Add Image"&gt;&lt;i class="fa fa-picture-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="AddLinkButton" title="Add Link"&gt;&lt;i class="fa fa-link" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="RemoveLinkButton" title="Remove Link"&gt;&lt;i class="fa fa-chain-broken" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id="ribbon-corner"&gt;
                  &lt;button class="RibbonBtn" id="preview-btn" title="Preview"&gt;&lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button class="RibbonBtn" id="submit-btn" title="Submit"&gt;&lt;i class="fa fa-paper-plane" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="TextArea"&gt;
              &lt;div id="WYSIWYG" contenteditable="true" onclick="document.execCommand('selectAll', false, null)"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="preview-wrap"&gt;
          &lt;div id="preview-title-wrap"&gt;
              &lt;span id="preview-title"&gt;Preview&lt;/span&gt;
              &lt;span id="preview-topic"&gt;Topic&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div id="preview-frame"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var backColor = '#202020';
  var fontColor = '#000000';
  var fontSize = '4';
  var fontFamily = "Arial";
  
  window.addEventListener("load",function(){
  
      $('#UndoButton').click(function(){
          document.execCommand("Undo",false,null);
      });
  
      $('#RedoButton').click(function(){
          document.execCommand("Redo",false,null);
      });
  
      $('#BoldButton').click(function(){
          document.execCommand("Bold", false, null);
      });
  
      $('#ItalicButton').click(function(){
          document.execCommand("Italic", false, null);
      });
  
      $('#UnderlineButton').click(function(){
          document.execCommand("Underline", false, null);
      });
  
      $('#StrikeButton').click(function(){
          document.execCommand("Strikethrough", false, null);
      });
  
      $('#SupButton').click(function(){
          document.execCommand("Superscript", false, null);
      });
  
      $('#SubButton').click(function(){
          document.execCommand("Subscript", false, null);
      });
  
      $('#OrderedListButton').click(function(){
          document.execCommand("InsertOrderedList", false, "New" + Math.round(Math.random() *1000));
      });
  
      $('#UnorderedListButton').click(function(){
          document.execCommand("InsertUnorderedList", false, null);
      });
  
      $('#LeftAlignButton').click(function(){
          document.execCommand("justifyLeft", false, null);
      });
  
      $('#CenterAlignButton').click(function(){
          document.execCommand("justifyCenter", false, null);
      });
  
      $('#RightAlignButton').click(function(){
          document.execCommand("justifyRight", false, null);
      });
  
      $('#FullAlignButton').click(function(){
          document.execCommand("justifyFull", false, null);
      });
  
      $('#AddLinkButton').click(function(){
          var url = prompt("Enter a URL", "http://");
          document.execCommand("CreateLink", false, url);
      });
  
      $('#RemoveLinkButton').click(function(){
          document.execCommand("Unlink",false,null);
      });
  
      $('#ImageButton').click(function(){
          document.execCommand("insertimage",false,"EXAMPLE.jpg");
      });
  
  
      $(document).on("click", ".fontselectopt", function() {
          $("#fontselect").html($(this).html());
          $(".fontselectopt-sel").attr("class", "fontselectopt");
          $(this).attr("class", "fontselectopt-sel");
          $('#font-list').attr("class", "hidden");
          $("#fontselect-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          formatDoc("FontName", $(this).html());
      });
  
      $(document).on("click", "#fontselect-btn", function() {
          if($("#font-list").hasClass("hidden")) {
              $('#font-list').attr("class", "");
              $(this).html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#font-list').attr("class", "hidden");
              $(this).html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
      $(document).on("click", "#fontselect", function() {
          if($("#font-list").hasClass("hidden")) {
              $('#font-list').attr("class", "");
              $("#fontselect-btn").html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#font-list').attr("class", "hidden");
              $("#fontselect-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
      $(document).on("click", ".fontsizeselectopt", function() {
          $("#fontsizeselect").html($(this).html());
          $(".fontsizeselectopt-sel").attr("class", "fontsizeselectopt");
          $(this).attr("class", "fontsizeselectopt-sel");
          $('#fontsize-list').attr("class", "hidden");
          $("#fontsize-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          document.formatDoc("FontSize", $(this).html());
      });
  
      $(document).on("click", "#fontsize-btn", function() {
          if($("#fontsize-list").hasClass("hidden")) {
              $('#fontsize-list').attr("class", "");
              $(this).html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#fontsize-list').attr("class", "hidden");
              $(this).html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
      $(document).on("click", "#fontsizeselect", function() {
          if($("#fontsize-list").hasClass("hidden")) {
              $('#fontsize-list').attr("class", "");
              $("#fontsize-btn").html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#fontsize-list').attr("class", "hidden");
              $("#fontsize-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
  
      $(document).on("click", "#FontColorButton", function() {
          if($(this).parent().children().hasClass("hidden")) {
              $("#FontColorButton").parent().children(".hidden").attr("class", "color-list");
          } else {
              $("#FontColorButton").parent().children(".color-list").attr("class", "hidden");
          }
      });
  
  
      $(document).on("click", "#HighlightButton", function() {
          if($(this).parent().children().hasClass("hidden")) {
              $("#HighlightButton").parent().children(".hidden").attr("class", "color-list");
          } else {
              $("#HighlightButton").parent().children(".color-list").attr("class", "hidden");
          }
      });
  
  
      $(document).on('click', "#color-picker-font &gt; .color-list &gt; .color", function () {
          fontColor = $(this).val();
          $(this).parent().parent().children(".color-sel").css('background-color', fontColor);
          $(this).parent().parent().children(".color-sel").val(fontColor);
          $(this).parent().attr("class", "hidden");
          document.execCommand("ForeColor", false, fontColor);
      });
  
      $(document).on('click', "#color-picker-highlight &gt; .color-list &gt; .color", function () {
          backColor = $(this).val();
          $(this).parent().parent().children(".color-sel").css('background-color', backColor);
          $(this).parent().parent().children(".color-sel").val(backColor);
          $(this).parent().attr("class", "hidden");
          document.execCommand("BackColor", false, backColor);
      });
  
      $(document).on("click", "#color-picker-font", function() {
          $("#color-picker-highlight &gt; .color-list").attr("class", "hidden");
      });
  
      $(document).on("click", "#color-picker-highlight", function() {
          $("#color-picker-font &gt; .color-list").attr("class", "hidden");
      });
  
  
      $(document).on("click", ".topicselectopt", function() {
          $("#topicselect").html($(this).html());
          $(".topicselectopt-sel").attr("class", "topicselectopt");
          $(this).attr("class", "topicselectopt-sel");
          $('#topic-list').attr("class", "hidden");
          $("#topicselect-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
      });
  
      $(document).on("click", "#topicselect-btn", function() {    
          if($("#topic-list").hasClass("hidden")) {
              $('#topic-list').attr("class", "");
              $(this).html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#topic-list').attr("class", "hidden");
              $(this).html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
  
      $(document).on("click", "#topicselect", function() {
          if($("#topic-list").hasClass("hidden")) {
              $('#topic-list').attr("class", "");
              $("#topicselect-btn").html('&lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;');
          } else {
              $('#topic-list').attr("class", "hidden");
              $("#topicselect-btn").html('&lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;');
          }
      });
  
      $(document).on("click", "#preview-btn", function() {
          $("#preview-frame").html($("#WYSIWYG").contents().find("body").html());
          var title = $("#title-area").val();
          $("#preview-title").html(title);
          $("#preview-topic").html($("#topicselect").html());
      });
  
  
  },false);
  </code></pre>