一, insertNode
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF8">
- <meta name="viewport" content="width=devicewidth, initialscale=1.0">
- <meta httpequiv="XUACompatible" content="ie=edge">
- <title>Document</title>
- <style>
- .edit {
- width: 400px;
- height: 140px;
- border: 2px solid #ff7f50;
- overflow: auto
- }
- </style>
- </head>
- <body>
- <div class="emojicontainer">
- </div>
- <div class="edit" contenteditable="true">
- </div>
- <script>
- const arr = ['', '', '', '', '', '', '', '', '', '', '']
- let container = document.querySelector('.emojicontainer')
- let html = ``
- for (let i = 0; i <arr.length; i++) {
- html += `<span>${arr[i]}</span>`
- }
- let edit = document.querySelector('.edit')
- let range
- edit.onclick = function() {
- range = window.getSelection().getRangeAt(0)
- }
- edit.oninput = function() {
- range = window.getSelection().getRangeAt(0)
- }
- container.innerHTML = html
- let emojis = document.querySelectorAll('span')
- for (let i = 0; i <emojis.length; i++) {
- emojis[i].onclick = function() {
- let newNode = document.createElement('span')
- newNode.innerText = this.innerText
- range.insertNode(newNode)
- console.log(range);
- }
- }
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF8">
- <meta name="viewport" content="width=devicewidth, initialscale=1.0">
- <meta httpequiv="XUACompatible" content="ie=edge">
- <title>Document</title>
- <style>
- .edit {
- width: 400px;
- height: 140px;
- border: 2px solid #ff7f50;
- overflow: auto
- }
- </style>
- </head>
- <body>
- <div class="emojicontainer">
- </div>
- <div class="edit" contenteditable="true">
- </div>
- <script>
- const arr = ['', '', '', '', '', '', '', '', '', '', '']
- let container = document.querySelector('.emojicontainer')
- let html = ``
- for (let i = 0; i <arr.length; i++) {
- html += `<span>${arr[i]}</span>`
- }
- let edit = document.querySelector('.edit')
- let range
- edit.onclick = function() {
- range = window.getSelection().getRangeAt(0)
- }
- edit.oninput = function() {
- range = window.getSelection().getRangeAt(0)
- // editF(edit.innerHTML)
- }
- container.innerHTML = html
- let emojis = document.querySelectorAll('span')
- for (let i = 0; i <emojis.length; i++) {
- emojis[i].onclick = function() {
- let newNode = document.createElement('span')
- newNode.innerText = this.innerText
- range.collapse()
- range.insertNode(newNode)
- }
- }
- </script>
- </body>
- </html>
以上案例来自于李同学~
来源: http://www.bubuko.com/infodetail-2762537.html