从所选文本创建元素

Question

我正在尝试从选定/突出显示的文本创建一个元素

我正在做一个所见即所得的项目，我使用KaTeX将原始数学公式渲染成好看的公式。

当您选择原始配方并单击"；数学解析"；在wysiwyg工具栏上，它应该这样做：

• 获取所选文本(var currentText = getSelectionText();适用于此(
• 创建一个元素(如p、span或其他元素(
• 删除所选文本(deleteSelection();工作正常(
• 在DOM元素中呈现数学公式(katex.render('currentText', new_element);(

第二步是我似乎无法实现的。我不明白如何在选定文本所在的位置动态创建一个新元素(这个元素将是一个跨度(，并用Katex渲染填充它。

我的功能：

function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function deleteSelection() {
let selection = window.getSelection();
selection.deleteFromDocument();
}

---------------编辑------------------

我想出了这个：

var z = document.createElement('span');
document.body.append(z);

katex.render(currentText, z);

这很好用，但元素总是打印在我页面的最底部我希望在文本所在的位置创建元素有什么帮助吗？

Answer 1

这里有一个使用Selection.getRangeAt和insertNode的快速示例：

// Singleton to handle caret selection
const Sel = {
get() { return window.getSelection(); },
range(x) { return this.get().getRangeAt(x||0); },
ancestor() { return this.range().commonAncestorContainer; },
text() { return this.get().toString(); },
delete() { this.get().deleteFromDocument(); },
insert(el, x) { this.range(x).insertNode(el); },
};
// Function to easily create elements
const NewEL = (t, p) => Object.assign(document.createElement(t), p);
// Insert SPAN at selection
document.querySelector("#insert").addEventListener("click", () => {
const text = Sel.text();
if (!text) return console.log("Nothing selected");
if (Sel.ancestor().nodeType === 1) return console.log("Cannot insert");
Sel.delete();
Sel.insert(NewEL("span", {textContent: text, className: "math"}));
});

.math {color: red; font-size: 2em; user-select: none;}
div {padding: 10px; border:1px solid #ddd; }

Highlight some text and click: <button id="insert">INSERT SPAN</button>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt enim deserunt officiis eum nesciunt maiores nisi voluptatum cum aperiam excepturi earum velit natus, perferendis itaque id necessitatibus. Iusto, labore repellat.
</div>

Answer 2

您应该尝试使用insertBefore方法：https://www.w3schools.com/jsref/met_node_insertbefore.asp