从所选文本创建元素

Question

我正在尝试从 selected/highlighted 文本

创建一个元素

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

当您 select 原始公式并单击所见即所得工具栏上的“数学解析”时，它应该这样做：

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

第二步我好像做不到。我不明白如何在 selected 文本所在的位置动态创建一个新元素（这个元素将是一个跨度）并用 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

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

Answer 2

这是一个使用 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>

从所选文本创建元素

Create element from selected text

javascript

katex