Question

在我的应用中，在webview中显示了一个html文件。我有一个笔记功能，当用户选择文本时，它会突出显示，并添加一个图像作为后缀。然后将此注释另存为html文件。

因此，对于此功能，我编写了一个java脚本函数。

function highlightsText()
{

    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();

    var newDate = new Date;
    var randomnumber= newDate.getTime();

    var div; 

    var imageTag = document.createElement("img");
    imageTag.id=randomnumber;
    imageTag.setAttribute("src","notes.png");

    var linkTxt = document.createElement("a");
    linkTxt.id=randomnumber;
    linkTxt.setAttribute("href","highlight:"+randomnumber);

  linkTxt.appendChild(selectionContents)

    div = document.createElement("span");


div.style.backgroundColor = "yellow";
div.id=randomnumber;

linkTxt.appendChild(imageTag);
div.appendChild(linkTxt);

range.insertNode(div);


    return document.body.innerHTML+"<noteseparator>"+randomnumber+"<noteseparator>"+range.toString();
}

这里我正在制作一个跨度，这个跨度包含带有图像的突出显示的文本。

现在problem是，

当我选择一个段落时，它只会添加一个图像，而不会突出显示该文本。如果我使用div或p标签代替span，则它会为单个单词提供整行，看起来很奇怪。

Answer 1

编辑：div标签会在之前和之后得到一个换行符（通常，大多数浏览器会这样做，考虑到它是一个“除法”/块级别元素），你最好使用跨度。

其次，您应该将选择内容附加到范围

ispain.appendChild（selectionContents）!!并且不要忘记分号;）

在附注中，你知道： 1-你不能有以数字开头的html元素id。 2-当你选择em时，拥有多个具有相同id的元素会变得不可预测。

根据文本的选择更改一些html的外观

1 个答案: