Implementierungscode für den Rich-Text-Editor der einfachen JS-Version

Ich bin erst heute hierher gekommen und habe eine grobe Vorstellung davon. Natürlich ist der Vorgang in der ersten Sekunde schmerzhaft und in den letzten drei Sekunden einfach. Dieser Rich-Text-Editor wird hauptsächlich mit der mit p gelieferten contenteditable-Attribut-Methode implementiert. Um das Layout zu erleichtern, habe ich als Front-End-Entwickler leider direkt das Tabellenlayout verwendet Mitarbeiter, ich weiß wirklich nicht, was ich sagen soll.

Das Folgende zeigt die Wirkung der Umsetzung:

Der Umsetzungsprozess des Körpers:

(1) HTML-Struktur:

<table border=&#39;1&#39; class="tablebox" id=&#39;tablebox&#39;>
    <tr>
        <td>
            <input type="button" name="bold" value=&#39;Bold&#39; class="bold">
        </td>
        <td>
            <input type="button" name="italic" value=&#39;Italic&#39; class="italic">
        </td>
        <td>
            <input type="button" name="underline" value=&#39;Underline&#39; class="decotation">
        </td>
        <td>size
            <select name="fontSize" class="font">
                <option value="1">1</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </td>
        <td>img
            <select name="insertImage">
                <option value="">请选择图片</option>
                <option value="timg.jpg">timg.jpg</option>
                <option value="timg1.jpg">timg1.jpg</option>
                <option value="timg2.jpg">timg2.jpg</option>
                <option value="timg3.jpg">timg3.jpg</option>
                <option value="timg4.jpg">timg4.jpg</option>
            </select>
        </td>
        <td>
            <input type="button" name="selectAll" value=&#39;全选&#39; class="selectAll">
        </td>
        <td>
            <input type="button" name="undo" value=&#39;撤销&#39; class="undo">
        </td>
        <td>
            <input type="button" name="justifyLeft" value=&#39;left&#39; class="justifyLeft">
        </td>
        <td>
            <input type="button" name="justifyCenter" value=&#39;center&#39; class="justifyCenter">
        </td>
        <td>
            <input type="button" name="justifyRight" value=&#39;right&#39; class="justifyRight">
        </td>
    </tr>
    <tr>
        <td colspan=&#39;10&#39;>
            <p class="text" contenteditable="true">这是一个用p的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。</p>
        </td>
    </tr>
</table>

(2) JS-Implementierungslogik:

(function() {
	//富文本编辑器类
	class Editor {

		constructor() {
			this.bindElem();
		}


		bindElem() {
			var text = document.querySelector('.text');
			var txt = null;
			var tablebox = document.getElementById_x('tablebox');
			var inputbs = tablebox.querySelectorAll('input,select');

			for (var i = 0; i {
					if (inputbs[i].tagName.toLowerCase() == 'input') {
						this.action(inputbs[i], inputbs[i].name);
					} else if (inputbs[i].tagName.toLowerCase() == 'select') {
						inputbs[i].onchange = function() {
							document.execCommand(this.name, true, this.value);
						}
					}
				}
			}


			action(obj, attr) {
				obj.onclick = function() {
					document.execCommand(attr, true);
				}
			}

		}

	new Editor();

})();

Verwandte Empfehlungen:

Eine einfache Methode zur Implementierung eines JavaScript-Rich-Text-Editors

Das obige ist der detaillierte Inhalt vonImplementierungscode für den Rich-Text-Editor der einfachen JS-Version. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!