溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在學習基于electron + electron-vue開發聊天客戶端項目時，需要用到編輯器插入表情功能。一般通過input或textarea也能實現，通過插入[笑臉]、(:12 這些標簽，展示的時候解析標簽就行。
如下圖效果：
在網上找到的jq插件實現在textarea光標處插入表情符標簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col col-sm-12"> <button class="btn btn-success" data-emoj="[笑臉]">[笑臉]</button> <button class="btn btn-success" data-emoj="[奮斗]">[奮斗]</button> <button class="btn btn-success" data-emoj="[:17]">[:17]</button> </div> <div class="col col-sm-12"> <textarea class="form-control" id="content" rows="10"></textarea> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> (function ($) { $.fn.extend({ insertEmojAtCaret: function (myValue) { var $t = $(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selectionStart == '0') { var startPos = $t.selectionStart; var endPos = $t.selectionEnd; var scrollTop = $t.scrollTop; $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); this.focus(); $t.selectionStart = startPos + myValue.length; $t.selectionEnd = startPos + myValue.length; $t.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } } }); })(jQuery); $("button").on("click", function() { $("#content").insertEmojAtCaret($(this).attr("data-emoj")); }); </script> </body> </html>
可是這種方法并不是我想要的類似微信編輯框插入表情效果。
如是就想到了div模擬 設置 contenteditable="true" 實現富文本編輯器效果，這種方法是可以實現，不過在vue中不能綁定v-model，最后參考一些技術貼實現了這個功能，一頓操作下來采坑不少，于是就做一些分享記錄吧。
vue中通過給div添加contenteditable=true屬性實現富文本功能
實現方式：
單獨聲明一個vue組件，chatInput.vue，通過監聽數據變化并返回父組件。
1、父組件添加v-model
<template> ... <chatInput ref="chatInput" v-model="editorText" @focusFn="handleEditorFocus" @blurFn="handleEditorBlur" /> </template>
import chatInput from './chatInput'
export default {
data () {
return {
editorText: '',
...
}
},
components: {
chatInput,
},
...
}
2、v-model中傳入的值在子組件prop中獲取
export default {
props: {
value: { type: String, default: '' }
},
data () {
return {
editorText: this.value,
...
}
},
watch: {
value() {
...
}
},
}
3、通過監聽獲取到的prop值，并將該值賦值給子組件中的v-html參數，雙向綁定就ok了。
chatInput.vue組件
<!-- vue實現contenteditable功能 -->
<template>
<div
ref="editor"
class="editor"
contenteditable="true"
v-html="editorText"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur">
</div>
</template>
<script>
export default {
props: {
value: { type: String, default: '' }
},
data () {
return {
editorText: this.value,
isChange: true,
}
},
watch: {
value() {
if(this.isChange) {
this.editorText = this.value
}
}
},
methods: {
handleInput() {
this.$emit('input', this.$el.innerHTML)
},
// 清空編輯器
handleClear() {
this.$refs.editor.innerHTML = ''
this.$refs.editor.focus()
},
// 獲取焦點
handleFocus() {
this.isChange = false
this.$emit('focusFn')
},
// 失去焦點
handleBlur() {
this.isChange = true
this.$emit('blurFn')
},
/**
* 光標處插入內容
* @param html 需要插入的內容
*/
insertHtmlAtCaret(html) {
let sel, range;
if(!this.$refs.editor.childNodes.length) {
this.$refs.editor.focus()
}
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
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;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
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);
}
this.handleInput()
}
}
}
</script>
<style>
</style>
組件功能已經親測，直接一次性拿走使用。
以下是一些參考：
1、vue官方描敘， 自定義組件的v-model：
一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，v-model的值將會傳入子組件中的prop
https://cn.vuejs.org/v2/guide/components-custom-events.html#自定義組件的-v-model
2、vue中div可編輯光標處插入內容
https://www.jb51.net/article/177989.htm
https://www.jb51.net/article/146257.htm
electron+vue中實現截圖功能
主要使用的是微信截圖dll，通過node執行即可
screenShot() {
return new Promise((resolve) => {
const { execFile } = require('child_process')
var screenWin = execFile('./static/PrintScr.exe')
screenWin.on('exit', function(code) {
let pngs = require('electron').clipboard.readImage().toPNG()
let imgData = new Buffer.from(pngs, 'base64')
let imgs = 'data:image/png;base64,' + btoa(new Uint8Array(imgData).reduce((data, byte) => data + String.fromCharCode(byte), ''))
resolve(imgs)
})
})
},
總結
以上所述是小編給大家介紹的electron+vue實現div contenteditable截圖功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
