Implementieren Sie einen Rich-Text-Editor mit Javascript

Cursorbetrieb

Als Rich-Text-Editor müssen Entwickler in der Lage sein, verschiedene Statusinformationen, Positionsinformationen usw. des Cursors zu steuern. Der Browser stellt Auswahlobjekte und Bereichsobjekte zum Bedienen des Cursors bereit.

Auswahlobjekt

Auswahlobjekt stellt den vom Benutzer ausgewählten Textbereich oder die aktuelle Position des Cursors dar. Es stellt eine Textauswahl auf der Seite dar, die sich über mehrere Elemente erstrecken kann. Textauswahlen werden erstellt, indem der Benutzer die Maus über den Text zieht.

Ein Auswahlobjekt abrufen

let selection = window.getSelection();

Normalerweise bedienen wir das Auswahlobjekt nicht direkt, sondern müssen die vom Benutzer ausgewählten Bereiche (Regionen) bedienen, die dem Auswahlobjekt entsprechen, was allgemein bekannt ist als „ Blau ziehen“. Die Erfassungsmethode lautet wie folgt:

let range = selection.getRangeAt(0);

Da der Browser derzeit möglicherweise über mehrere Textauswahlen verfügt, akzeptiert die getRangeAt-Funktion einen Indexwert. Bei der Rich-Text-Bearbeitung berücksichtigen wir nicht die Möglichkeit einer Mehrfachauswahl.

Das Auswahlobjekt verfügt außerdem über zwei wichtige Methoden: addRange und removeAllRanges. Wird verwendet, um der aktuellen Auswahl ein Bereichsobjekt hinzuzufügen bzw. alle Bereichsobjekte zu löschen. Sie werden später sehen, wie sie verwendet werden.

Bereichsobjekt

Das durch das Auswahlobjekt erhaltene Bereichsobjekt steht im Mittelpunkt unserer Cursoroperation. Der Bereich stellt ein Dokumentfragment dar, das Knoten und Teiltextknoten enthält. Wenn Sie das Entfernungsobjekt zum ersten Mal sehen, kommen Sie sich vielleicht seltsam und vertraut zugleich vor. Wo haben Sie es gesehen? Als Front-End-Ingenieur müssen Sie das Buch „JavaScript Advanced Programming Third Edition“ gelesen haben. In Abschnitt 12.4 stellt uns der Autor die von der DOM2-Ebene bereitgestellte Bereichsschnittstelle vor, um die Seite besser steuern zu können. Wie sah ich damals überhaupt aus? ? ? ? Was nützt das? Es besteht kein solcher Bedarf. Hier verwenden wir dieses Objekt ausgiebig. Für die folgenden Knoten:

<div contenteditable="true" id="rich-editor">
    <p>123</p>
</div>

Drucken Sie das Bereichsobjekt zu diesem Zeitpunkt aus:

* startContainer: Der Startknoten des Bereichs.

* endContainer: Der Endknoten des Bereichs

* startOffset: Der Offset der Startposition des Bereichs.

* endOffset: Bereichsoffset der Endposition.

* commonAncestorContainer: Gibt den tiefsten Knoten zurück, der startContainer und endContainer enthält.

* minimiert: Gibt einen booleschen Wert zurück, der verwendet wird, um zu bestimmen, ob die Start- und Endpositionen des Bereichs gleich sind.

Hier sind unser startContainer, endContainer und commonAncestorContainer alle #text-Textknoten „Baidu EUX Team“. Da sich der Cursor hinter dem Wort „degree“ befindet, sind sowohl startOffset als auch endOffset 2. Und es wird kein Widerstand erzeugt, daher ist der Wert von „collapsed“ wahr.

Aufgrund der Verzögerung sind startContainer und endContainer nicht mehr konsistent und der Wert von Collapsed wird falsch. startOffset und endOffset repräsentieren genau die Start- und Endpositionen des Drag Blue. Sie können es selbst ausprobieren, um weitere Effekte zu erzielen.

Um einen Bereichsknoten zu betreiben, sind die Hauptmethoden wie folgt:

setStart(): Setzt den Startpunkt des Bereichs

setEnd(): Setzt den Endpunkt des Bereichs

selectNode(): Legen Sie einen Bereich fest, der Knoten und Knoteninhalt enthält

collapse(): Reduzieren Sie den Bereich auf den angegebenen Endpunkt

insertNode(): Einfügen ein Knoten am Startpunkt des Bereichs.

cloneRange(): Gibt ein geklontes Range-Objekt zurück, das denselben Endpunkt wie der ursprüngliche Range hat

Es gibt so viele häufig verwendete Methoden in der Rich-Text-Bearbeitung, und es gibt noch viele weitere Methoden, die ich wird nicht aufgelistet.

Ändern Sie die Cursorposition

Wir können die Position eines Cursors oder den Ziehbereich ändern, indem wir die Methoden setStart() und setEnd() aufrufen. Die von diesen beiden Methoden akzeptierten Parameter sind ihre jeweiligen Start- und Endknoten und Offsets. Wenn ich beispielsweise möchte, dass sich die Cursorposition am Ende von „Baidu EUX Team“ befindet, können Sie die folgende Methode verwenden:

let range = window.getSelection().getRangeAt(0),
    textEle = range.commonAncestorContainer;
range.setStart(range.startContainer, textEle.length);
range.setEnd(range.endContainer, textEle.length);

Wir fügen einen Timer hinzu, um den Effekt zu sehen:

Diese Methode hat jedoch eine Einschränkung, wenn sich der Knoten ändert, auf dem sich der Cursor befindet. Wenn beispielsweise ein Knoten ersetzt oder ein neuer Knoten hinzugefügt wird, hat die erneute Verwendung dieser Methode keine Auswirkung. Aus diesem Grund benötigen wir manchmal ein Mittel, um eine Änderung der Cursorposition zu erzwingen. Der kurze Code lautet wie folgt (in der Praxis müssen Sie möglicherweise auch Selbstschließen und Elemente berücksichtigen):

function resetRange(startContainer, startOffset, endContainer, endOffset) {
    let selection = window.getSelection();
        selection.removeAllRanges();
    let range = document.createRange();
    range.setStart(startContainer, startOffset);
    range.setEnd(endContainer, endOffset);
    selection.addRange(range);
}

Wir Erstellen Sie ein Bereichsobjekt neu und löschen Sie die ursprünglichen Bereiche, um sicherzustellen, dass sich der Cursor definitiv an die gewünschte Position bewegt.

修改文本格式

实现富文本编辑器，我们就要能够有修改文档格式的能力，比如加粗，斜体，文本颜色，列表等内容。DOM 为可编辑区提供了 document.execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用 contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。语法如下：

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

aCommandName: 一个 DOMString ，命令的名称。可用命令列表请参阅 命令 。

aShowDefaultUI: 一个 Boolean， 是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument: 一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。

总之浏览器能把大部分我们想到的富文本编辑器需要的功能都实现了，这里我就不一一演示了。感兴趣的同学可以查看 MDN – document.execCommand。

到这里，我相信你已经可以做出一个像模像样的富文本编辑器了。想想还挺激动的，但是呢，一切都没有结束，浏览器又一次坑了我们。

实战开始，填坑的旅途

就在我们都以为开发如此简单的时候，实际上手却遇到了许多坑。

修正浏览器的默认效果

浏览器提供的富文本效果并不总是好用的，下面介绍几个遇到的问题。

回车换行

当我们在编辑其中输入内容并回车换行继续输入后，可编辑框内容生成的节点和我们预期是不符的。

可以看到最先输入的文字没有被包裹起来，而换行产生的内容，包裹元素是

function adjustList() {
    let lists = document.querySelectorAll("ol, ul");
     for (let i = 0; i < lists.length; i++) {
        let ele = lists[i]; // ol
        let parentNode = ele.parentNode;
        if (parentNode.tagName === &#39;P&#39; && parentNode.lastChild ===parentNode.firstChild) {
                parentNode.insertAdjacentElement(&#39;beforebegin&#39;, ele);
                parentNode.remove()
        }
    }
}

/**
* 查找父元素
* @param {String} root
* @param {String | Array} name
*/
function findParentByTagName(root, name) {
    let parent = root;
    if (typeof name === "string") {
        name = [name];
    }
    while (name.indexOf(parent.nodeName.toLowerCase()) === -1 &&parent.nodeName !== "BODY" && parent.nodeName !== "HTML") {
        parent = parent.parentNode;
    }
    return parent.nodeName === "BODY" || parent.nodeName === "HTML" ?null : parent;
},

function insertLink(url, title) {
    let selection = document.getSelection(),
        range = selection.getRangeAt(0);
    if(range.collapsed) {
        let start = range.startContainer,
            parent = Util.findParentByTagName(start, 'a');
        if(parent) {
            parent.setAttribute('src', url);
        }else {
            this.insertHTML(`<a href="${url}">${title}</a>`);
        }
    }else {
        document.execCommand(&#39;createLink&#39;, false, url);
    }
}

function setHeading(heading) {
    let formatTag = heading,
        formatBlock = document.queryCommandValue("formatBlock");
    if (formatBlock.length > 0 && formatBlock.toLowerCase() === formatTag) {
        document.execCommand('formatBlock', false, ``);
    } else {
        document.execCommand('formatBlock', false, ``);
    }
}

let plainText = event.clipboardData.getData('text/plain');  // 无格式文本
let plainHTML = event.clipboardData.getData('text/html');   // 有格式文本

items[0].getAsString(str => {
    // 处理 str 即可
})
items[1] 为图片的二进制数据，items[1].kind 为’file’， items[1].type 为图片的格式。想要获取里面的内容，我们就需要创建 FileReader 对象了。示例代码如下：
let file = items[1].getAsFile();
// file.size 为文件大小
let reader = new FileReader();
reader.onload = function() {
    // reader.result 为文件内容，就可以做上传操作了
}
if(/image/.test(item.type)) {
    reader.readAsDataURL(file);   // 读取为 base64 格式
}

function getCaretYPosition() {
    let sel = window.getSelection(),
        range = sel.getRangeAt(0);
    let span = document.createElement('span');
    range.collapse(false);
    range.insertNode(span);
    var topPosition = span.offsetTop;
    span.parentNode.removeChild(span);
    return topPosition;
}

CGFloat webviewY = 64.0 + self.noteSourceView.height;
self.appWebView.frame = CGRectMake(0, webviewY, BDScreenWidth,BDScreenHeight - webviewY - height);

backupRange() {
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    this.currentSelection = {
        "startContainer": range.startContainer,
        "startOffset": range.startOffset,
        "endContainer": range.endContainer,
        "endOffset": range.endOffset
    }
}
restoreRange() {
    if (this.currentSelection) {
        let selection = window.getSelection();
            selection.removeAllRanges();
        let range = document.createRange();
        range.setStart(this.currentSelection.startContainer,this.currentSelection.startOffset);
        range.setEnd(this.currentSelection.endContainer,this.currentSelection.endOffset);
        // 向选区中添加一个区域
        selection.addRange(range);
    }
}

function getCaretStyle() {
    let selection = window.getSelection(),
        range = selection.getRangeAt(0);
        aimEle = range.commonAncestorContainer,
        tempEle = null;
    let tags = ["U", "I", "B", "STRIKE"],
        result = [];
    if(aimEle.nodeType === 3) {
        aimEle = aimEle.parentNode;
    }
    tempEle = aimEle;
    while(block.indexOf(tempEle.nodeName.toLowerCase()) === -1) {
        if(tags.indexOf(tempEle.nodeName) !== -1) {
            result.push(tempEle.nodeName);
        }
        tempEle = tempEle.parentNode;
    }
    let viewStyle = {
        "italic": result.indexOf("I") !== -1 ? true : false,
        "underline": result.indexOf("U") !== -1 ? true : false,
        "bold": result.indexOf("B") !== -1 ? true : false,
        "strike": result.indexOf("STRIKE") !== -1 ? true : false
    }
    let styles = window.getComputedStyle(aimEle, null);
    viewStyle.fontSize = styles["fontSize"],
    viewStyle.color = styles["color"],
    viewStyle.fontWeight = styles["fontWeight"],
    viewStyle.fontStyle = styles["fontStyle"],
    viewStyle.textDecoration = styles["textDecoration"];
    viewStyle.isH1 = Util.findParentByTagName(aimEle, "h1") ? true : false;
    viewStyle.isH2 = Util.findParentByTagName(aimEle, "h2") ? true : false;
    viewStyle.isP = Util.findParentByTagName(aimEle, "p") ? true : false;
    viewStyle.isUl = Util.findParentByTagName(aimEle, "ul") ? true : false;
    viewStyle.isOl = Util.findParentByTagName(aimEle, "ol") ? true : false;
    return viewStyle;
}