关于js的编辑器,网上大都是富文本编辑器,如果不是经常读源代码,可能无法抽丝剥茧找到自己需要的代码。
需求
- 每一段文字需要添加一个p标签,方便使用css提高阅读体验。
- 字数统计
contenteditable
可以让元素处于可编辑状态,当前输入的内容是复制上一个元素的标签和类名。
比如
<div contenteditable>
<p class="pEx"></p>
</div>
回车输入后就会变成这样
<div contenteditable>
<p class="pEx"></p>
<p class="pEx">the text you typed</p>
</div>
实现
- 创建一个contenteditable的div标签
- 在dom结构渲染完成后添加
<p><br></p>
占位,保证下一个标签也是p标签 - 拦截
paste
事件,将富文本变成纯文字
代码
<template>
<div>
<div class