electron/vue可编辑框contenteditable|仿微信截图

xiaoyan2015
9,056 阅读2分钟
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能

为了避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

仿微信聊天编辑器插入表情

如何实现微信客户端，在编辑器光标处插入表情？通常有以下两种实现思路：

  • 普通方法（input/textarea实现）

通过input或textarea实现，在文本框插入[笑脸]、(:12 表情符标签，展示的时候解析标签就行


如上图：通过如下代码就能实现效果

<!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" 实现）

运用div模拟 设置contenteditable="true" 实现富文本编辑器效果，这种方法可以在可编辑区插入表情图片，由于在vue中div不能绑定v-model，需要换位处理。


如上图：就是通过设置div的 contenteditable="true" 来实现的功能，亲测通过。

实现思路

新建一个可编辑组件，chatInput.vue，通过监听数据变化并返回父组件。

1、调用chatInput.vue组件，并给其绑定v-model

<template>
    ...
    <chatInput ref="chatInput" v-model="editorText" />
</template>

...

export default {
    data () {
        return {
            editorText: '',
            
            ...
        }
    },
    ...
}

2、v-model中传入的值editorText在子组件prop中获取并监听变化

vue官方说明：
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，v-model的值将会传入子组件中的prop

cn.vuejs.org/v2/guide/co…

export default {
    props: {
        value: { type: String, default: '' }
    },
    data () {
        return {
            editorText: this.value,
            ...
        }
    },
    watch: {
        value() {
            ...
        }
    },
}

3、通过监听获取到的prop值，并将该值赋值给子组件中的v-html参数，双向绑定就实现了。

在vue中，div[contenteditable=true]的组件作为文本输入框，在非手动输入值后, 如点击表情后，光标会丢失，可通过如下代码实现将光标定位到最后

function setLastAtCaret(obj) {
	console.log(obj)
	console.log(window.getSelection)
	console.log(document.selection)
	if (window.getSelection) { //ie11 10 9 ff safari
		obj.focus(); //解决ff不获取焦点无法定位问题
		var range = window.getSelection(); //创建range
		range.selectAllChildren(obj); //range 选择obj下所有子内容
		range.collapseToEnd(); //光标移至最后
	} else if (document.selection) { //ie10 9 8 7 6 5
		var range = document.selection.createRange(); //创建选择对象
		//var range = document.body.createTextRange();
		range.moveToElementText(obj); //range定位到obj
		range.collapse(false); //光标移至最后
		range.select();
	}
}

可是这种方法，每次都是定位到输入最后，也不是很完美~~

如是通过这篇分享，完美解决了vue中div可编辑框光标处插入表情效果

blog.csdn.net/weixin_4391…

/**
 * 光标处插入内容
 * @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()
}

chatInput.vue组件

以下就是实现在vue+electron中可编辑 contenteditable="true" 光标处插入表情完整代码

<!-- 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>

vue中div contenteditable = 'true'  还支持paste粘贴事件

可通过向可编辑框粘贴截图，发送聊天图片

// 可编辑div contenteditable中粘贴发送图片
handlePastImage {
	let that = this
	this.$refs.editor.addEventListener('paste', function(e) {
		let cbd = e.clipboardData
		let ua = window.navigator.userAgent
		if(!(e.clipboardData && e.clipboardData.items)) return
		
		if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
			cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
			ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
			return;
		}
		for(var i = 0; i < cbd.items.length; i++){
			var item = cbd.items[i];
			console.log(item);
			console.log(item.kind);
			if(item.kind == "file"){
				var blob = item.getAsFile();
				if(blob.size === 0){
					return;
				}
				// 插入图片记录
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function(){
					var _img = this.result;

					// ***返回图片给父组件
					that.$emit('pasteFn', _img)
				}
			}
		}
	})
},

electron-vue实现截图功能



1、通过Electron支持调用原生模块截图API: desktopCapturer

这种方法，去参看官网api即可，下面具体说下方法二实现方式

2、通过命令行执行.exe文件去调用dll

nodejs中通过的execFile方法去执行exe文件，exe调用同级目录下的dll，调出截图工具

将exe和dll文件打包到static目录下，通过绝对路径去执行。exe和dll可网上找。

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实现聊天编辑器插入表情、截图功能小记录分享，后续会继续分享一些electron实战项目。

Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例



avatar
文章
阅读
粉丝