Is there a way to change text style on the fly on the next inputted text via a drop down?

So I have made this webpage wherein it is a pseudo RTF editor that inserts data into the database. Insert into php the html in a div

I am having a problem when it comes to text styling the text typed after selecting a text style from a drop down. I would want it to be like word wherein after clicking on a particular text style, it would start typing using that said text style but not affecting rest of the text inside of a div. Codepen

    <style>
        #fake_textarea {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}
<!-- Add css to modify the text -->
#jBold {
  font-weigth: bold;
}
#jItalic{
    font-style:italic;
}
#jUnderline{
    text-decoration: underline;
}
#jLT{
    text-decoration: line-through;
}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<body>
    <!-- Put buttons here to modify the format -->
    <div>

    <select id="select_font" onchange="changeFont(this);">
  <option value="Arial">Arial</option>
  <option value="Sans Serif" selected>Sans Serif</option>
  <option value="Comic Sans MS">Comic Sans MS</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="Verdana">Verdana</option>
  <option value="Trebuchet MS">Trebuchet MS</option>
  <option value="Arial Black">Arial Black</option>
  <option value="Impact">Impact</option>
  <option value="Bookman">Bookman</option>
  <option value="Garamond">Garamond</option>
  <option value="Palatino">Palatino</option>
  <option value="Georgia">Georgia</option>
</select>
<select id="select-size" onchange="changeSize(this);">
<option value="4">4</option>
  <option value="8">8</option>
  <option value="12">12</option>
  <option value="16">16</option>
  <option value="20">20</option>
  <option value="24">24</option>
  <option value="28">28</option>
  <option value="32">32</option>
  <option value="36">36</option>
  <option value="40">40</option>
  <option value="44">44</option>
  <option value="48">48</option>
  <option value="52">52</option>
  <option value="56">56</option>
  <option value="58">58</option>
</select>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button>
<button id="jLT">A</button>
<div>
    <!-- Add a form -->
    <form method="post" action="postcontent.php"  id="contentform">
    <!-- Add some hidden input in order for the form to submit some sort of value -->
        <input type="hidden" name="content" id="hiddeninput" />
        <!-- Add a place to insert the content -->
        <div id='fake_textarea' contenteditable>
              Select some text and click the button to make it bold...
              <br>Or write your own text
        </div>
        <!-- Add a submit button-->
        <button id="submit">Submit</button>
    </form>
    <!-- Script to make a selected text bold-->
        <script type="text/javascript">
            $(document).ready(function() {
                $('#jBold').click(function() {
                    document.execCommand('bold');
                });
            });

        </script>
        <!-- Script to make a selected text italic-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jItalic').click(function() {
                    document.execCommand('italic');
                });
            });

        </script>
        <!-- Script to make add an underline-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jUnderline').click(function() {
                    document.execCommand('underline');
                });
            });

        </script>
        <!-- Script to make make selected text a superscript-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jSuperScript').click(function() {
                    document.execCommand('superscript');
                });
            });

        </script>
        <!-- Script to make make selected text a subscript-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jSubScript').click(function() {
                    document.execCommand('subscript');
                });
            });

        </script>
                <!-- Script to add a line-through-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jLT').click(function() {
                    document.execCommand('strikeThrough');
                });
            });

        </script>




        <!-- Changes the font type -->
        <script  type="text/javascript">
        function changeFont(font) {
            var sel = window.getSelection(); // Gets selection
            if (sel.rangeCount) {
            // Creates a new element, and insert the selected text with the chosen font inside
            var e = document.createElement('span');
            e.style = 'font-family:' + font.value + ';'; 
            e.innerHTML = sel.toString();

            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
            var range = sel.getRangeAt(0);
            range.deleteContents(); // Deletes selected text…
            range.insertNode(e); // … and inserts the new element at its place
            }
        }
        </script>
        <!-- Changes the font size -->
        <script  type="text/javascript">
        function changeSize(size) {
        var sel = window.getSelection(); // Gets selection
            if (sel.rangeCount) {
            // Creates a new element, and insert the selected text with the chosen font inside
            var e = document.createElement('span');
            e.style = 'font-size:' + size.value + 'px;'; 
            e.innerHTML = sel.toString();

            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
            var range = sel.getRangeAt(0);
            range.deleteContents(); // Deletes selected text…
            range.insertNode(e); // … and inserts the new element at its place
            }   
        }

        </script>

        <!-- Script to add value to the hidden input then submits it-->
        <script  type="text/javascript">

        $( "#submit" ).click(function() {

            var htmlString = $( "#fake_textarea" ).html();
            $('#hiddeninput').val(htmlString);
            // Submit the real form
            $('#contentform').submit();
        });

        </script>
</body>

JavaScript
​x
 
​    <style>        #fake_textarea {  width: 100%;  height: 200px;  border: 1px solid red;}<!-- Add css to modify the text -->#jBold {  font-weigth: bold;}#jItalic{    font-style:italic;}#jUnderline{    text-decoration: underline;}#jLT{    text-decoration: line-through;}    </style>​    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>​<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script><body>    <!-- Put buttons here to modify the format -->    <div>​    <select id="select_font" onchange="changeFont(this);">  <option value="Arial">Arial</option>  <option value="Sans Serif" selected>Sans Serif</option>  <option value="Comic Sans MS">Comic Sans MS</option>  <option value="Times New Roman">Times New Roman</option>  <option value="Courier New">Courier New</option>  <option value="Verdana">Verdana</option>  <option value="Trebuchet MS">Trebuchet MS</option>  <option value="Arial Black">Arial Black</option>  <option value="Impact">Impact</option>  <option value="Bookman">Bookman</option>  <option value="Garamond">Garamond</option>  <option value="Palatino">Palatino</option>  <option value="Georgia">Georgia</option></select><select id="select-size" onchange="changeSize(this);"><option value="4">4</option>  <option value="8">8</option>  <option value="12">12</option>  <option value="16">16</option>  <option value="20">20</option>  <option value="24">24</option>  <option value="28">28</option>  <option value="32">32</option>  <option value="36">36</option>  <option value="40">40</option>  <option value="44">44</option>  <option value="48">48</option>  <option value="52">52</option>  <option value="56">56</option>  <option value="58">58</option></select><button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button><button id="jLT">A</button><div>    <!-- Add a form -->    <form method="post" action="postcontent.php"  id="contentform">    <!-- Add some hidden input in order for the form to submit some sort of value -->        <input type="hidden" name="content" id="hiddeninput" />        <!-- Add a place to insert the content -->        <div id='fake_textarea' contenteditable>              Select some text and click the button to make it bold...              <br>Or write your own text        </div>        <!-- Add a submit button-->        <button id="submit">Submit</button>    </form>    <!-- Script to make a selected text bold-->        <script type="text/javascript">            $(document).ready(function() {                $('#jBold').click(function() {                    document.execCommand('bold');                });            });​        </script>        <!-- Script to make a selected text italic-->           <script type="text/javascript">           $(document).ready(function() {                $('#jItalic').click(function() {                    document.execCommand('italic');                });            });​        </script>        <!-- Script to make add an underline-->           <script type="text/javascript">           $(document).ready(function() {                $('#jUnderline').click(function() {                    document.execCommand('underline');                });            });​        </script>        <!-- Script to make make selected text a superscript-->           <script type="text/javascript">           $(document).ready(function() {                $('#jSuperScript').click(function() {                    document.execCommand('superscript');                });            });​        </script>        <!-- Script to make make selected text a subscript-->           <script type="text/javascript">           $(document).ready(function() {                $('#jSubScript').click(function() {                    document.execCommand('subscript');                });            });​        </script>                <!-- Script to add a line-through-->           <script type="text/javascript">           $(document).ready(function() {                $('#jLT').click(function() {                    document.execCommand('strikeThrough');                });            });​        </script>​​​​        <!-- Changes the font type -->        <script  type="text/javascript">        function changeFont(font) {            var sel = window.getSelection(); // Gets selection            if (sel.rangeCount) {            // Creates a new element, and insert the selected text with the chosen font inside            var e = document.createElement('span');            e.style = 'font-family:' + font.value + ';';             e.innerHTML = sel.toString();​            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt            var range = sel.getRangeAt(0);            range.deleteContents(); // Deletes selected text…            range.insertNode(e); // … and inserts the new element at its place            }        }        </script>        <!-- Changes the font size -->        <script  type="text/javascript">        function changeSize(size) {        var sel = window.getSelection(); // Gets selection            if (sel.rangeCount) {            // Creates a new element, and insert the selected text with the chosen font inside            var e = document.createElement('span');            e.style = 'font-size:' + size.value + 'px;';             e.innerHTML = sel.toString();​            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt            var range = sel.getRangeAt(0);            range.deleteContents(); // Deletes selected text…            range.insertNode(e); // … and inserts the new element at its place            }           }​        </script>​        <!-- Script to add value to the hidden input then submits it-->        <script  type="text/javascript">​        $( "#submit" ).click(function() {​            var htmlString = $( "#fake_textarea" ).html();            $('#hiddeninput').val(htmlString);            // Submit the real form            $('#contentform').submit();        });​        </script></body>​

Answer

So I have solved the change font style on the fly problem and but I am still trying to figure out that problem when it comes to anything bigger than 36.

codepen

I added

 document.execCommand("fontName", false, font);

JavaScript
 
 document.execCommand("fontName", false, font);​

at the end of my change font script

function changeFont(font) {

        var sel = window.getSelection(); // Gets selection
        if (sel.rangeCount) {
        // Creates a new element, and insert the selected text with the chosen font inside
        var e = document.createElement('span');
        e.style = 'font-family:' + font.value + ';'; 
        e.innerHTML = sel.toString();

        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
        var range = sel.getRangeAt(0);
        range.deleteContents(); // Deletes selected text…
        range.insertNode(e); // … and inserts the new element at its place
        }
             document.execCommand("fontName", false, font);

    }

JavaScript
 
function changeFont(font) {​        var sel = window.getSelection(); // Gets selection        if (sel.rangeCount) {        // Creates a new element, and insert the selected text with the chosen font inside        var e = document.createElement('span');        e.style = 'font-family:' + font.value + ';';         e.innerHTML = sel.toString();​        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt        var range = sel.getRangeAt(0);        range.deleteContents(); // Deletes selected text…        range.insertNode(e); // … and inserts the new element at its place        }             document.execCommand("fontName", false, font);​    }​

as for changing the font size, I inserted

                      if(size=="8")
        {
            document.execCommand("fontSize", false, "1");
        }
      if(size=="10")
        {
            document.execCommand("fontSize", false, "2");
        }           
                  if(size=="12")
        {
            document.execCommand("fontSize", false, "3");
        }
      if(size=="14")
        {
            document.execCommand("fontSize", false, "4");
        }

                if(size=="18")
        {
            document.execCommand("fontSize", false, "5");
        }
                  if(size=="24")
        {
            document.execCommand("fontSize", false, "6");
        }  
        if(size=="36")
        {
            document.execCommand("fontSize", false, "7");
        }

JavaScript
 
                      if(size=="8")        {            document.execCommand("fontSize", false, "1");        }      if(size=="10")        {            document.execCommand("fontSize", false, "2");        }                             if(size=="12")        {            document.execCommand("fontSize", false, "3");        }      if(size=="14")        {            document.execCommand("fontSize", false, "4");        }​                if(size=="18")        {            document.execCommand("fontSize", false, "5");        }                  if(size=="24")        {            document.execCommand("fontSize", false, "6");        }          if(size=="36")        {            document.execCommand("fontSize", false, "7");        }​

at the end of it thus making my change font size script

function changeSize(size) {

    var sel = window.getSelection(); // Gets selection

        if (sel.rangeCount) {
        // Creates a new element, and insert the selected text with the chosen font inside
        var e = document.createElement('span');
        e.style = 'font-size:' + size.value + 'px;'; 
        e.innerHTML = sel.toString();

        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
        var range = sel.getRangeAt(0);
        range.deleteContents(); // Deletes selected text…
        range.insertNode(e); // … and inserts the new element at its place
        }   
                  if(size=="8")
        {
            document.execCommand("fontSize", false, "1");
        }
      if(size=="10")
        {
            document.execCommand("fontSize", false, "2");
        }           
                  if(size=="12")
        {
            document.execCommand("fontSize", false, "3");
        }
      if(size=="14")
        {
            document.execCommand("fontSize", false, "4");
        }

                if(size=="18")
        {
            document.execCommand("fontSize", false, "5");
        }
                  if(size=="24")
        {
            document.execCommand("fontSize", false, "6");
        }  
        if(size=="36")
        {
            document.execCommand("fontSize", false, "7");
        }
    }

JavaScript
 
function changeSize(size) {​    var sel = window.getSelection(); // Gets selection​        if (sel.rangeCount) {        // Creates a new element, and insert the selected text with the chosen font inside        var e = document.createElement('span');        e.style = 'font-size:' + size.value + 'px;';         e.innerHTML = sel.toString();​        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt        var range = sel.getRangeAt(0);        range.deleteContents(); // Deletes selected text…        range.insertNode(e); // … and inserts the new element at its place        }                     if(size=="8")        {            document.execCommand("fontSize", false, "1");        }      if(size=="10")        {            document.execCommand("fontSize", false, "2");        }                             if(size=="12")        {            document.execCommand("fontSize", false, "3");        }      if(size=="14")        {            document.execCommand("fontSize", false, "4");        }​                if(size=="18")        {            document.execCommand("fontSize", false, "5");        }                  if(size=="24")        {            document.execCommand("fontSize", false, "6");        }          if(size=="36")        {            document.execCommand("fontSize", false, "7");        }    }​

I am hoping to find a way to increase the font size or some other way than adding document.execCommand("fontSize", false, "7"); at the end of it.

Advertisement

Answer