使用HTML5新属性contenteditable实现可插入链接、表情包、其他变量的编辑器,因为在我使用这个功能是在19年项目中需求中有涉及,最近被问到一些关于该功能的问题,就做一下总结.
前序说明:
1、技术栈: vue@^2.7.14, element-ui@^2.13.1, emoji@^0.3.2, js, html, css
2、div可编辑属性,change事件失效,可通过监听input事件来时时得到输入内容的变化
3、开发此功能是为了实现用微信公众号向用户推送客服消息时,创建文本消息内容开发的,微信开放平台对于文本消息("msgtype":"text",)内容的格式有限制:文本中只支持a标签
去微信开放平台
微信开放平台提供的接口：
先看页面效果
可插入emoji表情,可插入a链接,可插入小程序链接,还可以插入一些自定义的变量
公众号发送到用户看到的效果
前期准备------首先简单介绍一下contenteditable
contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。
（1）属性值
true 规定可以编辑元素内容。
false 规定无法编辑元素内容。
<div contentEditerable = true>此处内容可编辑</div>
（2）contenteditable 与textarea的区别
1. textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条；
2. textarea只支持文本输入，随着现在越来越关注用户体验，需求也越来越多，很多时候我们需要在编辑区域插入图片，链接，视频；
3. 传统textarea文本域不能解析标签，例如：extarea.value+=""//输入框内仍然是，不能解析标签，自然就不能使用textarea作为文本载体了，我们可是使用conteneditable属性，它可以让你的div也具备输入功能，div可以输入内容了，并且插入的标签也可以解析；如果只是想在段落末尾加上表情，那你大可以这样去做：div. innerHTML+=""
（3）getSelection(获取selection对象)
Selection对象所对应的是用户所选择的ranges（区域），俗称拖蓝。默认情况下，该函数只针对一个区域
var sel =window.getSelection();
var range = sel.getRangeAt(0) //选择第一选区
range.collapse(false);//对于IE来说，参数不可省略
range.insertNode(node);//节点插入到该选区这样去写的话会存在一些问题；当你框选内容的时候，不会替换内容，而是在所选内容之后插入，这是因为range.collapse()方法
range.collapse();//（false默认）到选区末端， true开始位置， //当你框选内容的时候，执行该方法，可以让光标移动到选区结束位置，然后插入内容
所以，当框选的时候，正常做法应该是删除框选内容，然后插入新节点
range.deleteContents();//清除内容完整代码：
functioninsertImg(src){
if(window.getSelection) {
var sel =window.getSelection();
var range = sel.getRangeAt(0);
var img =newImage();
range.deleteContents()
img.src=src;
range.insertNode(img);
range.collapse(false);//对于IE来说，参数不可省略
}
}
（4）contenteditable兼容性
（5）contenteditable其他知识点
让contenteditable元素只能输入纯文本
css控制法
一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。
user-modify (属性介绍https://blog.csdn.net/weixin_30362233/article/details/98374335)
支持属性值如下：
user-modify:read-only;
user-modify:read-write;
user-modify: write-only;//可以输入富文本
user-modify:read-write-plaintext-only;//只能输入纯文本
read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容
（2）contenteditable控制法
contenteditable="plaintext-only" // "plaintext-only"可以让编辑区域只能键入纯文本
*注意：目前仅仅是Chrome浏览器支持比较好的
一、编辑器实现
1、输入功能
div标签可编辑
这一步比较简单,只需要给div标签添加contenteditable为true即可;
<div contenteditable="true" style="height:100px; border: 1px solid red; padding:2px;" id="editor" ref="editor">
</div>
通过监听input事件,时时关注内容的变化并获取输入内容
//let editor = document.getElementById('editor')
//editor.addEventListener('input', (item) => { console.log(item) })this.$refs.editor.addEventListener('input', this.changeContentValue);
自动获取焦点
// let editor = document.getElementById('editor')
// editor.focus();this.$refs.editor.focus();
光标位置定位，往光标处插入html片段
// 往光标位置插入HTML片段
function insertHtmlAtCaret(html) {
if (window.getSelection) {
// IE9 and non-IE
if (this.sel.getRangeAt && this.sel.rangeCount) {
var el = document.createElement('div');
el.innerHTML = html;
var frag = document.createDocumentFragment();
var node;
var lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
this.range.insertNode(frag);
if (lastNode) {
this.range = this.range.cloneRange();
this.range.setStartAfter(lastNode);
this.range.collapse(true);
this.sel.removeAllRanges();
this.sel.addRange(this.range);
}
}
}
else if (document.selection && document.selection.type !== 'Control') {
// IE < 9 document.selection.createRange().pasteHTML(html);
}
},
2、插入a链接功能
点击插入链接按钮可出现弹窗插入或者修改内容
在点击插入链接按钮(也就是输入框失去焦点)的时候获取光标所在的位置
this.sel = window.getSelection();
this.range = this.sel.getRangeAt(0);
this.taget = this.sel.focusNode.parentElement;
const { sel, taget } = this;选中一部分内容,或者点解已插入链接的内容
第一次添加链接或者多次修改链接内容
this.selectContents = sel.toString(); // 当选中未添加链接的内容时，选中内容复制给链接的文字字段显示弹窗,对弹窗的文本与链接进行修改
const { selectContents, selectUrl} = this;
this.$set(this.textForm, 'text', selectContents);
this.$set(this.textForm, 'url', selectUrl);完成后点击确定,以新内容替换旧内容
const { text, url } = this.textForm;
if (text && url) {
this.range && this.range.deleteContents(); // 删除输入框原有的文本内容
const { selectContents, selectUrl, taget } = this;
if (selectContents && selectUrl && taget) {
Array.from(this.$refs.editor.childNodes).forEach((item) => {
if (item === taget) {
this.$refs.editor.removeChild(taget); // 删除输入框原有的文本链接内容 }
else if (taget.parentNode === item) {
item.removeChild(taget); // 当村子a链接内有插入了一次a标签的情况处理
}
});
}插入到输入框
this.insertHtmlAtCaret(`<a href='${url}' style="color:#5392ff">${text}</a>`); }
this.textForm = { url: '', text: '' }; // 重置
效果图
3、插入小程序链接同上
4、插入表情包功能
封装emoji 组件
引入emoji组件
import Emoji from './emoji';
const emoji = require('emoji');
components: {
Emoji
}
html部分
<el-popover
ref="popover-click"
placement="bottom-start"
width="390"
trigger="click"
@show="mountedEmoji = true"
>
<Emoji
@emoji = "selectEmoji">
</Emoji>
</el-popover>插入表情
function selectEmoji(emoji) {
this.insertHtmlAtCaret(emoji);
},
5、输入字数统计功能
div的可编辑属性,获取到的内容格式如下,如果统计输入字数需要对其进行处理
从获取到的输入内容可得出的结论是
(1) shift+回车换行会在当前操作的这一行后生成<br/>标签,用来与下一行内容分开
(2) 直接回车换行会生成<div><br/></div>形式, 输入内容后,输入的内容替换div标签中的br
(3)当使用了直接回车换行,再使用shift+回车换行,则shift+回车换行这行内容会被直接回车换行生成的div包裹
(4) 光标处于0位置的时候禁止换行
针对以上需求处理方法是,对div中输入的内容进行过滤
function getDomValue(elem) {
var res = '';
let arr = Array.from(elem.childNodes);
arr.forEach((child) => {
if (child.nodeName === '#text') {
res += child.nodeValue;
} else if (child.nodeName === 'BR') {
res += '\n';
} else if (child.nodeName === 'P') {
res += '\n' + getDomValue(child);
} else if (child.nodeName === 'SPAN') {
res += getDomValue(child);
} else if (child.nodeName === 'BUTTON') {
res += getDomValue(child);
} else if (child.nodeName === 'IMG') {
res += child.alt;
} else if (child.nodeName === 'DIV') {
const s = Array.from(child.childNodes);
if (s.length === 1 && s[0].nodeName === 'BR' || child.previousSibling && child.previousSibling.nodeName === 'BR') {
// 处理shift+回车与直接回车混用导致多处来换行的情况
res += getDomValue(child); }
else {
res += '\n' + getDomValue(child);
}
)else if (child.nodeName === 'A') {
if (child.href !== null) {
const innerHTML = child.innerHTML.replace(/<br>/g, '')
.replace(/<span (.*?)>/gi, '').replace(/<\/span>/gi, '');
res += `<a href='${child.href}'>${innerHTML}</a>`;
}
}
}统计字数
function getDomValuelength(elem) {
var reg = /<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi;
var data = elem.toLowerCase().replace(reg, function ($1, $2, $3) {
return $3;
});
return data.length;
}
6、我的源码git地址:https://github.com/wangAlisa/div-follow-input
