用到的知识点:
- 1.document.execCommand
- 2.光标获取
- 3.contenteditable
- 4.vue
实现效果:
就这点小内容也是折腾了好一阵,说的不是很详细重点步骤我贴上了代码,等空了我上传一下github。
代码:
当一个HTML文档切换到设计模式时,document
暴露 execCommand
方法,该方法允许运行命令来操纵可编辑内容区域的元素。(MDN上官方给的描述) 所以这就引出了一个光标问题,如果页面中没有光标的话,execCommand这个方法就执行不了,实践:使用点击事件时页面中的光标就消失了,找了许多方法最后采用了这位博主的方法,原博链接:https://www.jianshu.com/p/f35fdb013c6f
具体使用:我贴出了我添加文本超链接的方法,
添加图片就更加简单了,直接替换命令"insertHtml"为"insertImage",希望对你有所帮助。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。