UWP WebView：将标签添加到所选文本

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. 我正在创建一个使用WebView的UWP应用（在Windows 10上为Edge）来编辑一些html。 To do so I wrap the editable content into editable <div> , let user edit it and unwrap the content afterwards. 为此，我将可编辑的内容包装到可编辑的<div> ，让用户对其进行编辑，然后再将其展开。 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? 有谁知道用C＃或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. 获取选择，将其替换为带有标签的相同文本，然后从字符串中重新加载webview不会这样做，因为显然在文本中可能多次发现所选块和/或可能很复杂。

If someone knows how to do it without 3rd party libraries or with libraries under MIT or gpl2 licenses, it would be beyond awesome. 如果某人知道如何在没有第三方库的情况下或在MIT或gpl2许可下的库的情况下做到这一点，那就太好了。

Answer 1

According to your description js is better for your scenario and you need calculate position of selected text at first. 根据您的描述， js更适合您的情况，您首先需要计算所选文本的位置。 I write the following code refer to this answer . 我写下面的代码来参考这个答案。 In my sample I make the selected text bold. 在我的示例中，我将所选文本设为粗体。

index.html 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 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 个解决方案

解决方案1
1 已采纳 2017-01-18 13:18:34

UWP WebView：将标签添加到所选文本

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-18 13:18:34

解决方案1
1 已采纳 2017-01-18 13:18:34