How to change specific line's font size and line click to show font size in rich text editor?

Question

i am new in javascript, in practice purpose i am working on a rich text editor. but there is some problem i am facing.

i changed font size into px by javascript. but the problem is I can't change specific text/line's font size. for the first line it's working perfectly. but when i am changing next line or para's font size, then whole text editor's font size getting changed.
i want to show selected content font size in input number. i mean if i click or select a line/para/word, then font size of that selected line/para will show in input number box as value.

i have tried these line.

<label for="">Font Size
<input class="font-size" type="number" min="0" max="72" value="14"></label>
<iframe name="textEditor" class="richTextEditor" frameborder="0"></iframe>

textEditor.document.designMode = 'on';
document.querySelector('.font-size').addEventListener('change', function () {
    let changedFontSize = document.querySelector('.font-size').value
    textEditor.document.execCommand('fontSize', false, changedFontSize)
    var fontElements = textEditor.document.getElementsByTagName("font")[0];
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = changedFontSize + "px";
});

how can i solve these problem?

here is live example: https://jsbin.com/bikobuputu/edit?html,js,output

Possible duplicate of [document.execCommand() FontSize in pixels?](https://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels) — toeffe3, Apr 17 '19 at 14:56
You should try to ask one question per question submitted on StackOverflow. If you have multiple questions, please submit each separately. — Conspicuous Compiler, Apr 17 '19 at 19:20
Please specify further, the solution answers your first problem, your second problem can then easily be implemented. — toeffe3, Apr 17 '19 at 19:29

How to change specific line's font size and line click to show font size in rich text editor?

0 Answers0