Question

这是我遇到的问题。我正在创建一个使用WebView的UWP应用程序（在Windows 10上，所以它是Edge）来编辑一些html。为此，我将可编辑内容包装到可编辑的<div>中，让用户编辑它，然后打开内容。不幸的是，我无法想出一种方法来实现“选择粗体/选择斜体/ ......”功能。

有没有人知道在C＃或js中做到这一点的方法？获取选择，用带有标签的相同文本替换它并从字符串重新加载webview将不会这样做，因为显然所选块可能在文本中被多次找到和/或可能很复杂。

如果有人知道如何在没有第三方图书馆或MIT或gpl2许可证的情况下使用图书馆，那就太棒了。

Answer 1

根据您的说明js更适合您的方案，您需要首先计算所选文字的位置。我写下面的代码参考这个answer。在我的示例中，我将所选文本设为粗体。

<强>的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);
    }

})();

UWP WebView：为选定的文本添加标签

1 个答案: