关于vue2非表单元素使用contenteditable=“true”(富文本编辑器雏形)
最近自行研究chat的开发,后端用go,前端用vue,用户消息发送框需要用到富文本编辑器,我需要的东西很简单:
可以写文字,可以发表情、图片和文件可以发表情、图片和文件可以黏贴剪切板的文字和图片一般富文本编辑器有更丰富的格式化工具,功能太多余,定制也麻烦.干脆自己开发,说干就干.
上代码:
<pre contenteditable="true" v-html="sendContent"></pre>
用pre的理由:不希望用户黏贴html代码后直接把效果显示出来
用v-html的理由:图片要显示
其他理由:部分代码黏贴还能原样显示
碰到无法使用v-model绑定的问题,然后找了几篇关于这方面的文章:
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
结果都有问题,包括作者后面更新的最终版的代码,还是存在问题.
我只是要一个可以写内容,然后可以读内容的容器.所以有了以下简单粗暴的做法.
<template>
<pre ref="sendContent" contenteditable="true" v-html="sendContent" @keyup.shift.enter="sendMsg"></pre>
</template>
<script>
export default {
data () {
return {
sendContent: ''
}
},
methods: {
sendMsg () {
let content = this.$refs.sendContent.innerHTML
if ((content.length) > 1200) {
alter('您输入的内容过长,无法发送')
return false
}
this.$emit('send', this.sendContent)
this.$refs.sendContent.innerHTML = ''
}
}
}
</script>
代码到这里就结束了,没有光标问题和其他问题,整个过程只v-html只为赋值,后面的取值都用this.$refs.sendContent.innerHTM,只需注意清空值的时候不能用this.sendContent = ''
相关知识
HTML+CSS+JavaScript美食博客网页制作教程：从零开始，超详细代码解析与完整示例，适合初学者！
使用 SQL 查询编辑器进行查询
HTML网页设计：十一、表单
Vue.js 订单页面实战：从零打造用户友好界面
PDF编辑器 – 免费在线编辑PDF文件
打造高效项目管理：Vue2自制甘特图组件推荐
Sublime Text 2 有像UE那样，查找时列出包含字符串的行吗
第二期
Watson 主题：Sublime Text 编辑器的不二之选
辽农花卉与花艺搜答案神器
网址: 关于vue2非表单元素使用contenteditable=“true”(富文本编辑器雏形) https://m.huajiangbk.com/newsview661970.html
| 上一篇: 青春不负，愿你安好 |
下一篇: 有关观察花作文三篇 |
