使用div标签的可编辑属性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链接,可插入小程序链接,还可以插入一些自定义的变量
公众号发送到用户看到的效果
一、富文本实现
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
网友评论