昆明微信小程序定制_electron+vue完成div contentedit

electron+vue实现div contenteditable截图功能       这篇文章主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能。一般通过input或textarea也能实现,通过插入[笑脸]、(:12 这些标签,展示的时候解析标签就行。

如下图效果:

 

在网上找到的jq插件实现在textarea光标处插入表情符标签

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title /title 
 link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
 /head 
 body 
 div 
 div 
 div 
 button data-emoj="[笑脸]" [笑脸] /button 
 button data-emoj="[奋斗]" [奋斗] /button 
 button data-emoj="[:17]" [:17] /button 
 /div 
 div 
 textarea id="content" rows="10" /textarea 
 /div 
 /div 
 /div 
 script src="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 

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

chatInput.vue组件

 !-- vue实现contenteditable功能 -- 
 template 
 div 
 ref="editor"
 contenteditable="true"
 v-html="editorText"
 @input="handleInput"
 @focus="handleFocus"
 @blur="handleBlur" 
 /div 
 /template 
 script 
 export default {
 pro凡科抠图: {
 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')

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.colla凡科抠图e(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

#自定义组件的-v-model
2、vue中div可编辑光标处插入内容

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截图功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jzabcd.cn/ziyuan/3133.html