document.execCommand() FontSize in pixels?

Question

How can I change font size to 30px (for example) using document.execCommand?

This:

document.execCommand("fontSize", false, "30px");

doesn't work, because in 3rd argument of the function execCommand, it only allows me to input a value between and including 1 to 7.

Tim Down · Accepted Answer · 2012-05-02T09:21:27.727

It's a limitation of the FontSize command. There are various options I can think of:

You could use a CSS class instead and use the CSS class applier module of my Rangy library;
You could use a hacky method, such as calling document.execCommand("fontSize", false, "7"); and then finding the elements the command has created and changing them as required. See example: http://jsfiddle.net/S3ctN/. This obviously depends on there being no other <font> elements with size 7 in the document and it also relies on the browser using <font> elements for font size, which it seems they all do.

score 11 · Answer 2 · answered Sep 04 '15 at 12:54

11

Function

var execFontSize = function (size, unit) {
    var spanString = $('<span/>', {
        'text': document.getSelection()
    }).css('font-size', size + unit).prop('outerHTML');

    document.execCommand('insertHTML', false, spanString);
};

Execute

execFontSize(30, 'px');

answered Sep 04 '15 at 12:54

Roman S

212
2
4

This works in mozilla firefox, but doesn't work in ie – Thomas Williams Sep 18 '17 at 23:40
It removes any other HTML/CSS within the selection! – Xahed Kamal Mar 29 '18 at 21:30

soli · Answer 3 · 2018-07-24T10:52:02.603

9

Just override it with css:

font[size='7']{
    font-size: 20px; // or other length unit
}

Or if you use scss you could use a loop to generate all selectors from 1 to 7:

@for $i from 1 to 7 {
    font[size='#{$i}']{
        font-size: $i * 2vw
    }
}

edited Jul 24 '18 at 10:52

answered Jun 15 '18 at 14:51

soli

91
2
4

Very simple and nice! Thank you! – Ritesh Jagga Feb 20 '21 at 12:42

score 7 · Answer 4 · answered Sep 12 '12 at 15:03

As second answer suggest just run some jquery after execcommand and replace the markup with your own.

Just replace elem with your element and edit the font-size with the desired value.

jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");

Bonjour123 · Answer 5 · 2019-07-09T11:18:40.503

Here is a better solution than many proposed here, as it directly gets the element on which to change the font size from the selected text.

As a consequence, it doesn't have to browse the DOM to get the right element, and doesn't require to ban the use of a specific fontSize (7, as suggested in the first option of the accepted answer, and in other answers).

function changeFont() {
    document.execCommand("fontSize", false, "7");
    var fontElements = window.getSelection().anchorNode.parentNode
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = "30px";
}

In summary we just use execCommand to wrap the selection with a span, so that the subsequent call to getSelection() whill have the highlighted span as parent . Then we just add the fontSize style to that identified span.

Here, as we are using the fontSize command, it won't be wrapped inside a <span>, but inside a <font>.

But this is a generic method which can work with any command of execCommand, the latter being used just as a convenient manner to wrap the selected contents even among different elements.

Here is a live DEMO

Does it work well with editor undo/redo? I tried cursorily and it works. — asinix, Jul 09 '19 at 03:08
Yes, it easily feasible, you just have to replace the span(s) (or font(s) in this case) by its/their content (innerHTML). Let's say you have m, you just have to replace it the innerHTML or innerText, i.e. "m" — Bonjour123, Jul 09 '19 at 11:05

score 5 · Answer 6 · answered Jul 01 '18 at 00:14

5

it just my solutions.it works with chrome. the code was find in a china website(eqxiu).

first

document.execCommand("styleWithCSS", 0, true);
document.execCommand('fontSize', 0, '12px');

then

jQuery.find('[style*="font-size: -webkit-xxx-large"],font[size]').css("font-size", "12px")

note: the fontsize pass to execCommand must be at least '12px' and above.

answered Jul 01 '18 at 00:14

姚嘉辉

477
5
5

Thank you sooooo much. – Anbhu Jul 10 '20 at 16:01

score 2 · Answer 7 · answered Aug 13 '18 at 17:07

$(document).ready(()=>{
 var activeFontSize = 30;
 var oDoc = document.getElementById("editor");
 var style = document.createElement("style");
 document.body.appendChild(style);
 
 function setFontSize(value){
  $editor.focus();
  document.execCommand("fontsize", false, 20);
  activeFontSize = value;
  createStyle();
  updateTags();
 }

 function updateTags(){
  var fontElements = oDoc.getElementsByTagName("font");
  for (var i = 0, len = fontElements.length; i < len; ++i) {
   if (fontElements[i].size == "7") {
    fontElements[i].removeAttribute("size");
    fontElements[i].style.fontSize = activeFontSize+"px";
   }
  }
 }

 function createStyle(){
  style.innerHTML = '#editor font[size="7"]{font-size: '+activeFontSize+'px}';
 }

 function updateToolBar(args){
  $fontSize.val(args.fontsize);
 }

 var $fontSize = $("#fontSize");
 var $editor = $("#editor");

 $fontSize.on("change", ()=>{
  setFontSize($fontSize.val())
 })

 $editor.on("keyup", ()=>{
  updateTags();
 })

 //var i = 0;
 $editor.on("keyup mousedown", (e)=>{
  //i++;
  //console.log("e.target", e.target)
  try{
   var fontsize = $(window.getSelection().getRangeAt(0).startContainer.parentNode).css("font-size")
   fontsize = fontsize.replace("px", "");
   //document.execCommand("insertHTML", false, '<span class="font-size-detector'+i+'">X</span>');
   //var fontsize = $(e.target).css("font-size")//$editor.find(".font-size-detector"+i).css("font-size");
   //document.execCommand("undo", false, false);
   //$editor.focus();
   //console.log("fontsize", fontsize)
   updateToolBar({fontsize})
  }catch(e){
   console.log("exception", e)
  }
 })

 oDoc.focus();
 setFontSize(30);
})

.editor-box{box-shadow:0px 0px 1px 2px #DDD;max-width:500px;margin:0px auto;}
  .editor-tools{padding:20px;box-shadow:0px 2px 1px 0px #DDD}
  .editor-tools button{user-select:none;}
  #editor{height:200px;margin:10px 0px;padding:10px;font-size:14px;}
  #editor:focus{outline:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-box">
 <div class="editor-tools">
  <label>Font Size: </label>
  <select id="fontSize" >
   <option value="10">10px</option>
   <option value="12">12px</option>
   <option value="14">14px</option>
   <option value="20">20px</option>
   <option value="22">22px</option>
   <option value="30" selected="true">30px</option>
   <option value="35">35px</option>
   <option value="40">40px</option>
   <option value="45">45px</option>
   <option value="50">50px</option>
  </select>
 </div>
 <div id="editor" contenteditable="true">Hello, this is some editable text</div>
</div>

score 1 · Answer 8 · edited Mar 19 '20 at 14:45

Found a solution in pure JavaScript that works for multiple lines with custom HTML (colors, font families).

Get the selection of the document. Parse the selection and save the html tags from it. Then with document.execCommand insert the selected html inside a div that has inline style. Also a benefit when using document.execCommand('insertHTML', false, html) is that you get undo in WYSIWYG editor.

This is the function:

function fontSize(size) {

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

    var selectedHtml = "";
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        const children = container.getElementsByTagName("*")
        for(let child of children) {
            if(child.style.fontSize) {
                child.style.fontSize = `${size}px`
            }
        }
        selectedHtml = container.innerHTML;
    }

    let html = `<div style="font-size: ${size}px;">${selectedHtml}</div>`
    document.execCommand('insertHTML', false, html);
}

Hope it helps.

Yehuda Zvi · Answer 9 · 2023-06-18T16:58:55.137

1

best solution i've seen

function onFS() {
const size = prompt("Enter font size:")
const txt = document.getSelection()

document.execCommand("insertHTML", false, `<font style=font-size:${size}px;>${txt}</font>`)
}

edited Jun 18 '23 at 16:58

answered Jun 18 '23 at 16:25

Yehuda Zvi

239
3
9

Devendra · Answer 10 · 2021-09-25T14:16:08.950

If you want to set the default font size for the editor then this is what you can do.

You have to configure the TinyMCE CSS using the content_style options.

For example, the following configuration will set the default font size to 12pt.

tinymce.init({
  /* ... */ content_style: "body {font-size: 12pt;}",
});

Just remember, these styles are specific to the content inside the editor - if you want it to be the default size on the published content too, you’ll have to make sure the same style is applied to those published pages.

Hope it helps.

document.execCommand() FontSize in pixels?

10 Answers10

Linked