关于vue2非表单元素使用contenteditable="true"(富文本编

Drummor 发布于2019-08-21 17:46 / 897人阅读

摘要：最近自行研究的开发后端用前端用用户消息发送框需要用到富文本编辑器我需要的东西很简单可以写文字可以发表情图片和文件可以发表情图片和文件可以黏贴剪切板的文字和图片一般富文本编辑器有更丰富的格式化工具功能太多余定制也麻烦干脆自己开发说干就干上代码

最近自行研究chat的开发,后端用go,前端用vue,用户消息发送框需要用到富文本编辑器,我需要的东西很简单:

可以写文字,可以发表情、图片和文件

可以发表情、图片和文件

可以黏贴剪切板的文字和图片

一般富文本编辑器有更丰富的格式化工具,功能太多余,定制也麻烦.干脆自己开发,说干就干.

上代码:

用pre的理由:不希望用户黏贴html代码后直接把效果显示出来
用v-html的理由:图片要显示
其他理由:部分代码黏贴还能原样显示

碰到无法使用v-model绑定的问题,然后找了几篇关于这方面的文章:
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...

结果都有问题,包括作者后面更新的最终版的代码,还是存在问题.

我只是要一个可以写内容,然后可以读内容的容器.所以有了以下简单粗暴的做法.

代码到这里就结束了,没有光标问题和其他问题,整个过程只v-html只为赋值,后面的取值都用this.$refs.sendContent.innerHTM,只需注意清空值的时候不能用this.sendContent = ""

GPU云服务器云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89974.html

vue2 实现 div contenteditable=&quot;true&quot; 类似于 v

摘要：解决思路二使用组件单独声明一个组件，在组件内部处理数据也就是，并将数据返回给父组件。该组件应该是一个元素也不一定非要是的子元素，父元素的大小即为子元素的大小。问题在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用到 contenteditable=true 的 div ，而在这个 div 上是使用 v-model 是没有效果的...

jokester 2019-08-20 14:07 评论0 收藏0
JavaScript 表单脚本——“富文本编辑”的注意要点

摘要：操作富文本方法与富文本编辑交互的方式，就是使用。将当前选中区复制到剪贴板并删除之。增加选中文本的缩进。富文本选区在富文本编辑器中，使用框架的方法，可以确定实际选择的文本。这个方法是对象和对象的属性，调用它返回一个表示当前选择文本的对象。富文本测试 BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异部分内容来自w3c help：htt...

MartinDai 2019-08-19 17:30 评论0 收藏0
JS学习笔记（第14章）（表单脚本）

摘要：布尔值，表示当前字段是否被禁用。指向当前字段所属表单的指针只读。文本框脚本在中，有两种方式来表现文本框一种是使用元素的单行文本框，另一种是使用的多行文本框。然后，我们把这个函数指定为每个文本框的事件处理程序。本章知识架构 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

BlackHole1 2019-08-26 10:23 评论0 收藏0
高程3总结#第14章表单脚本

表单脚本表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset，服务器能够处理的字符集，等价于HTML中的accept-charset特性 action，接受请求的URL，等价于HTML中的action特性 elements，表单中所有控件的集合 enctype，请求的编码类型，等价于HTML中的enctype特性 length，表单中控件的数量 m...

Tony 2019-08-23 12:04 评论0 收藏0