在光标位置处插入图片

madthumb 发布于2019-08-20 18:52 / 520人阅读

摘要：在光标位置处插入图片问题来源需要在图中所示的文本区域内在光标处插入一张图片需要了解的前置知识可以略过对象表示用户选择的文本范围或插入符号的当前位置。在的起始位置插入节点。

在光标位置处插入图片 问题来源

需要在图中所示的文本区域内在光标处插入一张图片

需要了解的前置知识(可以略过)

Selection

Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象，请调用 window.getSelection()。

window.getSelection()

返回一个 Selection 对象，表示用户选择的文本范围或插入符号的当前位置。

Range

Range表示包含节点和部分文本节点的文档片段。

Range可以用 Document 对象的 createRange方法创建，也可以用Selection对象的getRangeAt方法取得。另外，可以通过构造函数 Range() 来获得一个 Range

Selection.getRangeAt()

返回一个包含当前选区内容的区域对象。

Range.createContextualFragment()

该方法通过调用HTML片段解析算法或XML片段解析算法返回一个文档片段 DocumentFragment 。

Range.insertNode()

在Range的起始位置插入节点。

解决方案

  // 返回插入符号当前位置的selection对象
  var selection = window.getSelection()

  // 获取包含当前节点的文档片段
  var range = selection.getRangeAt(0)

  // 创建需追加到光标处节点的文档片段
  var fragment = range.createContextualFragment("")

  // 将创建的文档片段插入到光标处
  range.insertNode(fragment.lastChild)

由于本人学识有限，有很多需要提升的地方，望大家多多指教。

GPU云服务器云服务器光标处 java的光标位置插入图片 ppt插入图片

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

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

编辑器之神-VIM

摘要：在这天地间，流传这两大神器的故事据说是神的编辑器，而是编辑器之神。正所谓，工欲善其事必先利其器。今天就和大家分享一下关于编辑器之神的传说。主要用于用来编写和查看文本文件。在这天地间，流传这两大神器的故事：据说Emacs是神的编辑器，而Vim是编辑器之神。正所谓，工欲善其事,必先利其器。今天就和大家分享一下关于编辑器之神Vim的传说。一、Vim的历史 1.下图是关于几款主流编辑器...

imingyu 2019-06-28 10:14 评论0 收藏0
在Windows上使用Vim

摘要：几年前使用，在此记录下的命令以及配置文件保存退出命令保存后面加强制执行退出后面加强制执行，不保存保存并退出保存并退出仅在需要时保存保存并退出退出不保存搜索替换命令向下搜索如果搜索出多个匹配，可按键到下一个向上搜索替换第一个匹配的替换整行中匹几年前使用vim，在此记录下Vim的命令以及_Vimrc配置文件保存&退出命令（Save&Quit Command） :w #保存（后面加！...

woshicixide 2019-06-28 10:14 评论0 收藏0
vim 入门笔记

摘要：学习整理注意后文中带尖括号的描述表示键盘按键，比如回车是指回车按键。输入文件名回车即可进入编辑器编辑该文件。按键回车进入替换模式可以连续替换多个字符。所有的命令都必须敲回车键结束。前言本文的初衷从知道 vim 开始我就有心学习并尝试过几次，每次都是暂时的心血来潮，最终全部不了了之，就连最基本的 vimtutor 我都是学个两三节就半途而废，所以这次干脆写篇文章，利用几次学习把这篇...

Hegel_Gu 2019-06-28 10:36 评论0 收藏0