android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图

基于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 表情符标签，展示的时候解析标签就行

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

[笑脸]

[奋斗]

[:17]

(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"));

});

复制代码

可是上面方法并不是我想要在编辑框插入表情图片效果。div可编辑属性(设置contenteditable="true"实现)

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