微信聊天框怎么制作（x实现微信聊天编辑框inputEditor）

最近开发的一款基于svelte.js仿微信app聊天项目，有一个聊天输入框，支持在光标处插入/删除表情、多行文本等功能。

新建一个editor.svelte组件，单独抽离此组件功能。

引入组件

import Editor from './editor.svelte'

使用组件

<div class="vui__editorPanel flexbox"> <div class="vui__editor flex1"> <Editor bind:this={editorEl} bind:editor={editorText} on:click={handleEditorClick} on:focus={handleEditorFocus} on:blur={handleEditorBlur} /> </div> ... </div>

// 编辑器获取焦点 function handleEditorFocus() { console.log('编辑器获取焦点') } // 编辑器失去焦点 function handleEditorBlur() { console.log('编辑器失去焦点') } // 点击编辑器 function handleEditorClick() { console.log('点击编辑器') isVisibleFootBar = false }

点击表情，即可在编辑器光标处插入表情。

// 点击表情 function handleEmojClicked(e) { let facenode = e.target.cloneNode(true) editorEl.addHtmlInCursor(faceNode) }

editor.svelte组件

使用contenteditable属性实现插入图文消息，bind:innerHTML实现双向绑定。

<div class="editor" bind:this={editorNode} contenteditable="true" bind:innerHTML={editor} on:input={handleInput} on:click={handleClick} on:focus={handleFocus} on:blur={handleBlur} ></div>

在光标处插入内容。

// 光标位置插入内容 export async function addHtmlInCursor(html) { let sel let range if(window.getSelection) { // IE9及其它浏览器 sel = window.getSelection() // ##注意：判断最后光标位置 if(lastCursor) { sel.removeAllRanges() sel.addRange(lastCursor) } if(sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0) range.deleteContents() let el = Document.createElement('div') el.appendChild(html) var frag = document.createDocumentFragment(), node, lastNode range.insertNode(frag) if(lastNode) { range = range.cloneRange() range.setStartAfter(lastNode) range.collapse(true) sel.removeAllRanges() sel.addRange(range) } } } else if(document.selection && document.selection.type != 'Control') { // IE < 9 document.selection.createRange().pasteHTML(html) } }

今天的分享就到这里。大家感兴趣的话，可以去试一试哈。