杂记之手写编辑器

用到的知识点:
实现效果:

1598257756(1).jpg

就这点小内容也是折腾了好一阵,说的不是很详细重点步骤我贴上了代码,等空了我上传一下github。
代码:
image.png

当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。(MDN上官方给的描述) 所以这就引出了一个光标问题,如果页面中没有光标的话,execCommand这个方法就执行不了,实践:使用点击事件时页面中的光标就消失了,找了许多方法最后采用了这位博主的方法,原博链接:https://www.jianshu.com/p/f35fdb013c6f
具体使用:我贴出了我添加文本超链接的方法,
image.png

添加图片就更加简单了,直接替换命令"insertHtml"为"insertImage",希望对你有所帮助。

你可能感兴趣的:(javascript,前端,vue.js,html)