0
131
ViewsBold the selected text
I have an HTML5 file and I am trying to make an app like Google Docs using create-electron-app.
I have a textarea tag for the input, and I am trying to bold the text the user has selected. I have the getSelectedText() function working and It is returning a string like expected, but I need to bold that text inside of the textarea. If you have used Google Docs you should know what I mean.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Make word documents!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<textarea class="userInput"></textarea>
<input type="button"
value="Bold"
onmousedown="bold()">
<script>
function getSelectedText() {
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.type == "Text") {
return document.selection.createRange().text;
}
return "";
}
function bold() {
var userInput = getSelectedText();
// userInput.style.fontWeight = "bold";
// print the type of the userinput variable
console.log(typeof userInput);
}
</script>
</body>
</html>
1 answers
Answer question0
User1937363675 posted
Hi Francis
Actually I think you should use "span" instead of "textarea",because according to some material,Web Editor all almost use span.I wrote a short example for you,hope that can help you!
--------------
<html>
<head>
<script language="javascript">
function test(e)
{
mytext.innerHTML="<b>"+mytext.innerText+"</b>";
}
</script>
</head>
<body>
<span contenteditable id="mytext" style="height:200;width:95%;border:1px solid black">
HTML Editor
</span>
<input type="button" value="Bold" onclick="test()" />
</body>
</html>