1

I have the following code:

 <select id="fonts">
      <option value = "Times New Roman">Times New Roman</option>
      <option value = "Monospace">Monospace</option>
      <option value = "Sans-Serif">Sans Serif</option>
      <option value = "Arial">Arial</option>
 </select>



 

    <div id = "text"contenteditable = "true">
    </div>

I want to use the document.execCommand() method where the font will change based off of the selected font name from the options list.

I've tried:

    <option value = "Monospace" document.execCommand('fontName', true, Monospace)>Monospace</option>

But I can't seem to properly connect it with the options list and the result is nothing. How can I achieve the font changing depending on what you select with this method? I'm aware of using them with buttons but I'm curious if it's possible to achieve it with an options tag?

The.Epistemophile.Bibliophile
  • 221
  • 3
  • 12

4 Answers4

1

Try this

<select id="mySelect" onchange="myFunction()">
  <option value = "Times New Roman">Times New Roman</option>
      <option value = "Monospace">Monospace</option>
      <option value = "Sans-Serif">Sans Serif</option>
      <option value = "Arial">Arial</option>
       ...
</select>

<div id = "text1" contenteditable = "true">
<p>Dummy Text</p>
    </div>

<script>
function myFunction() {
  var x = document.getElementById("text1");
  selectElementContents(x); // this will select the whole text else or you can skip this if not requrired
document.execCommand("fontName", false, 'monospace'); //replace monospace with selected font
window.getSelection().empty(); // unselects the selected text
}


function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

</script>
prince
  • 56
  • 3
0

you can do this with onclick javascript

for example--

<p id="para1"> somthing here..</p>

<p onclick="changeText()"> Click here to change thext style to <b>Monospace </b> </p>

<script>
function changeText(){
     document.getElementId("para1").style = "font-family:monospace;";
}
 </script>

To change all text in your website, do like this...

<body id="body-text" >
<p id="para1"> somthing here..</p>
    
    <p onclick="changeText()"> Click here to change thext style to <b>Monospace </b> </p>
    
    <script>
    function changeText(){
         document.getElementId("body-text").style = "font-family:monospace;";
    }
     </script>
</body>
AdDev
  • 428
  • 5
  • 14
  • I was thinking of doing something like that, but wouldn’t that change the whole text to that? I’m looking for a way to only change the selected text to a certain font. So far, I believe document.execCommand can do that, but I’m not sure if there’s other ways of doing so. – The.Epistemophile.Bibliophile Oct 10 '20 at 14:52
  • to change the all text , create a `id="body"` in `` tag , and edit the javascript – AdDev Oct 10 '20 at 14:54
0

Just use CSS. You're doing what all developers do, spending time on something that has a simple answer.

I don’t know what execCommand, but with vanilla I would add a listener to the on change event that then css any categories under it and change the text.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Edward
  • 55
  • 1
  • 10
0

Here is a simplified version of the code I am using on my website. It uses the execCommand("fontName", false, "fontFamily") to set the font-face and css to set the font family to match the font face.

var text_Editor = els.ById("Text_Editor");
var text_editor_Credits_UI = new PopUp_UI ({ Title : 'Credits', ID : 'Credits', Elems : [{ Tag : 'b', Text : 'Author: ' }, { Tag : 'span', Text : 'JT Stevens' }, { Tag : 'br' }, { Tag : 'b', Text : 'Originaly Inspired By: ' }, { Tag : 'span', Text : 'Yasith Praharshana' }, { Tag : 'br' }, { Tag : 'b', Text : 'Source: ' }, { Tag : 'a', Href : 'https://stackoverflow.com/a/63653851', Text : 'www.stackoverflow.com/a/63653851' }]});
function Format(action, elem) {
    text_Editor.focus();
    if (elem == 0) value = null;
    else if ((els.ById(elem) || null) !== null) value = els.ById(elem).value;
    else value = elem;
    document.execCommand(action, false, value);
}
[face="Arial"] { font-family: "Arial" }
[face="Consolas"] { font-family: "Consolas" }
[face="Monospace"] { font-family: "Monospace" }
[face="Lucida"] { font-family: "Lucida" }
[face="Lucida Console"] { font-family: "Lucida Console" }
#text_editor_container { border: 0.25pt ridge gray; padding: 0.4ex }
#text_editor_container #Text_Editor, #text_editor_container #Code_Editor { border: 0.1pt solid grey; height: 10rem; display: block; width: 100% }
#text_editor_containerHeader button, #text_editor_containerHeader input, #text_editor_containerHeader select { text-align: center; margin: 0.32pt 0.16pt; padding: 0.1pt; height: 32px; min-width: 32px; vertical-align: middle; border: 0.1pt solid gray }
#text_editor_containerHeader .fontMenu { vertical-align: top; position: relative; display: inline-block; text-align: center; padding: 1ex; border: 0 none; margin: 0.1ex; border: 0.01ex ridge gray; max-width: 90% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- load CdComs popup_UI - Works on most versions of jQuery. -->
<script src="https://cdcoms.tech/API/GUEST/11000101010010011101100101110001010010011101101101110100.js"></script>
<!-- Copyright Pending -->
<div id="text_editor_container">
    <div id="text_editor_containerHeader">
        <fieldset class="fontMenu">
            <legend>Font</legend>
            <select class="fontStyle" id="fontFamily" onchange="Format('fontName', 'fontFamily')" title="Font Family">
                <option selected value="Arial">Arial</option>
                <option value="Consolas">Consolas</option>
                <option value="Monospace">Monospace</option>
                <option value="Lucida">Lucida</option>
                <option value="Lucida Console">Lucida Console</option>
            </select>
            <select class="fontStyle" id="fontSize" onchange="Format('fontSize', 'fontSize')" title="Font Size">
                <option value="1">smallest</option>
                <option value="2">smaller</option>
                <option value="3">small</option> 
                <option selected value="4">normal</option>
                <option value="5">large</option>
                <option value="6">larger</option>
                <option value="7">largest</option>
            </select>
        </fieldset>
        <fieldset class="fontMenu">
            <legend>Extras</legend>
            <button class="fontStyle" onclick="text_editor_Credits_UI.show('Credits')" title="Credits">⍰</button>
        </fieldset>
    </div>
    <div id="Text_Editor" contenteditable="true"></div>
</div>
JTS
  • 41
  • 10