UWP WebView: add tags to selected text
Question
Here's the problem I'm stuck with. I'm creating an UWP app that uses WebView (on Windows 10, so it's Edge) to edit some html. To do so I wrap the editable content into editable <div> , let user edit it and unwrap the content afterwards. Unfortunately I can't come up with a way to implement "make selection bold/make selection italic/..." functionality.
Does anyone know a way to do it in C# or in js? Getting selection, replacing it with the same text with tags and reloading webview from string won't do, 'cause obviously the selected block could be found more than once in a text and/or could be complex.
If someone knows how to do it without 3rd party libraries or with libraries under MIT or gpl2 licenses, it would be beyond awesome.
1 answers
solution1
1 ACCPTED 2017-01-18 13:18:34
According to your description js is better for your scenario and you need calculate position of selected text at first. I write the following code refer to this answer . In my sample I make the selected text bold.
index.html
<html>
<head>
<meta charset="utf-8" />
<title>DivTextDemo</title>
<link href="css/default.css" rel="stylesheet" />
</head>
<body>
<div id="myDiv" contenteditable="true">Content goes here! This is Winffee, This is Winffee</div>
<button id="btnClick">Click Me</button>
<script src="js/main.js"></script>
</body>
</html>
Main.js
(function () {
"use strict"
var myDiv = document.querySelector("#myDiv");
var myRange = null;
function getSelectionCharOffsetsWithin(element) {
var start = 0, end = 0;
var sel, range, priorRange;
if (typeof window.getSelection != "undefined") {
range = window.getSelection().getRangeAt(0);
priorRange = range.cloneRange();
priorRange.selectNodeContents(element);
priorRange.setEnd(range.startContainer, range.startOffset);
start = priorRange.toString().length;
end = start + range.toString().length;
} else if (typeof document.selection != "undefined" &&
(sel = document.selection).type != "Control") {
range = sel.createRange();
priorRange = document.body.createTextRange();
priorRange.moveToElementText(element);
priorRange.setEndPoint("EndToStart", range);
start = priorRange.text.length;
end = start + range.text.length;
}
return {
start: start,
end: end
};
}
document.querySelector("#btnClick").onclick = function (evt)
{
var wholeText = document.querySelector("#myDiv").innerText;
var positionObj = getSelectionCharOffsetsWithin(myDiv);
var start = positionObj.start;
var end = positionObj.end;
//document.getElementById("myDiv").innerHTML = generateInnerHtml(positionObj.start, positionObj.end, wholeText);
myDiv.innerHTML = wholeText.substr(0, start) + "<b>" + wholeText.substr(start, end - start) + "</b>" + wholeText.substr(end, wholeText.length);
}
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.