首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取draft.js中的插入符号位置(行号)

在draft.js中获取插入符号位置(行号)可以通过以下步骤实现:

  1. 首先,获取当前编辑器的内容状态。可以使用EditorState.getCurrentContent()方法获取当前编辑器的内容状态。
  2. 然后,获取当前编辑器的选中范围。可以使用SelectionState.getStartKey()方法获取选中范围的起始行的key。
  3. 接下来,使用ContentState.getBlockForKey()方法获取起始行的Block对象。
  4. 最后,使用Block.getKey()方法获取起始行的行号。

以下是一个示例代码,演示如何获取draft.js中插入符号的行号:

代码语言:javascript
复制
import { EditorState, SelectionState } from 'draft-js';

// 获取插入符号位置(行号)
function getInsertionPosition(editorState) {
  const contentState = editorState.getCurrentContent();
  const selectionState = editorState.getSelection();
  const startKey = selectionState.getStartKey();
  const block = contentState.getBlockForKey(startKey);
  const lineNumber = block.getKey();

  return lineNumber;
}

// 使用示例
const editorState = EditorState.createEmpty();
const insertionPosition = getInsertionPosition(editorState);
console.log(insertionPosition);

请注意,以上代码仅演示了如何获取插入符号的行号,并没有涉及draft.js的具体用法。在实际应用中,您需要根据具体的需求和场景进行相应的处理和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

getBoundingClientRect方法获取元素在页面相对位置

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。...1.使用语法: element.getBoundingClientRect(); 方法没有任何参数,返回值为对象类型。...2.在IE8及以下浏览器,返回值对象包含属性值有: top::元素上边缘距离文档顶部距离; right: 元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离; left:...元素左边缘距离文档左边距离; 3.在IE9以上、谷歌、火狐等浏览器,返回值对象包含属性值有: top: 元素上边缘距离文档顶部距离; right:元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离...width 和 height 属性解决方法: 在IE8及以下浏览器,可以通过计算得到元素宽和高: 如: var dom = document.querySelector("#demo"), r

3.9K20
  • 如何在 Go 函数获取调用者函数名、文件名、行号...

    背景 我们在应用程序代码添加业务日志时候,不论是什么级别的日志,除了我们主动传给 Logger 让它记录信息外,这行日志是由哪个函数打印、所在位置也是非常重要信息,不然排查问题时候很有可能就犹如大海捞针...如果让我们用 Go 设计一个Log Facade,就需要我们自己在门面里获取调用者函数名、文件位置了,那么在Go里面怎么实现这个功能呢?...、该调用在文件行号。...获取调用者函数名 runtime.Caller 返回值第一个返回值是一个调用栈标识,通过它我们能拿到调用栈函数信息 *runtime.Func,再进一步获取到调用者函数名字,这里面会用到函数和方法如下...真正要实现日志门面之类类库时候,可能是会有几层封装,想在日志里记录调用者信息应该是业务代码打日志位置,这时要向上回溯层数肯定就不是 1 这么简单了,具体跳过几层要看实现日志门面具体封装情况

    6.5K20

    动态获取当前屏幕光标所在位置颜色

    初始位置和在左下角,右下角位置 Point formLoc, ptLeftBottom, ptRightBottom; private System.Windows.Forms.Label lblColor...int nXDest, // 目标对象左上角X坐标 int nYDest, // 目标对象左上角X坐标 int nWidth, // 目标对象矩形宽度 int nHeight, // 目标对象矩形长度...IntPtr hdcSrc, // 源设备句柄 int nXSrc, // 源对象左上角X坐标 int nYSrc, // 源对象左上角X坐标 int dwRop // 光栅操作值 );...= gfxDisplay.GetHdc(); // 获得位图句柄 IntPtr hdlBmp = gfxBmp.GetHdc(); // 把当前屏幕鼠标指针所在位置一个象素拷贝到位图中 BitBlt...gfxDisplay.ReleaseHdc(hdlScreen); // 释放位图句柄 gfxBmp.ReleaseHdc(hdlBmp); lblColor.BackColor = bmp.GetPixel(0, 0); // 获取像素颜色

    2.7K30

    duilib获取控件位置或者大小不对可能原因

    duilib初学者可能总会有这样疑问:为什么我获取控件位置或者大小和我想象不一样?...位置不一样可能原因: 1.xml中直接配置位置和实际显示之后位置确实是不一样.xml设置位置(相对或绝对)都是基于他父控件左上角.而实际显示之后获取位置,是基于整个客户区左上角; 2....控件位置计算都是在WM_PAINT消息处理中进行,在这个消息处理之前,获取位置都是旧; 大小不一样可能原因: 1.参考上面第2条,大小计算也是在WM_PAINT消息处理中进行; 2.有其他你忽略干扰项....比如子控件采用相对布局时父控件有inset,或者父控件大小有限; 3.可能只是因为其他控件遮盖或者超出了父控件而不显示,看起来大小不对;

    1.8K40

    VBA:获取指定数值在指定一维数组位置

    文章背景:在采用VBA抓取数据时,有时需要判断指定数值是否在一维数组已存在;如果存在,则希望能够获取该数值在数组内位置。...Filter 函数 根据指定筛选准则,传回包含字串阵列子集以零为基础阵列。...要搜寻的字串一维阵列。 match 必要。要搜寻的字串。 include 选用。指出是否传回包含或排除match子字串布尔值。...指出要使用字串比较种类数值。 compare引数可具有以下值: vbBinaryCompare选项,区分大小写;vbTextCompare选项,不区分大小写。...而在实际案例,可能希望只获得完全匹配元素。 WorksheetFunction.Match 方法 傳回項目在陣列相對位置,其符合指定順序指定值。

    7.3K30

    c++获取子类窗口句柄位置_C++各种获取窗口句柄方法「建议收藏」

    AfxGetMainWnd AfxGetMainWnd获取自身窗口句柄 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函数功能:该函数检查与特定父窗口相联子窗口...z序(Z序:垂直屏幕方向,即叠放次序),并返回在z序顶部子窗口句柄。...GetActiveWindow 函数功能:该函数可以获得与调用该方法线程消息队列相关活动窗口窗口句柄(就是取得当前进程活动窗口窗口句柄)。...GetSafeHwnd 函数功能:获取某个窗口对象(CWnd派生对象)指针句柄(HWND)时,最安全方法是使用GetSafeHwnd()函数。...这个原子(一个16bit值),必须被放置在lpClassName低位字节,lpClassName高位字节置零。

    2.4K30

    「可视化搭建系统」——从设计到架构,探索前端领域技术和业务价值

    比如,输入: live@12345@rondStyle 则表示页面插入一个 id 为 12345 Sku 卡片。...因此我们设计了 Markdown 编辑器按钮:「添加 Sku Cell」,点击按钮之后,会弹出表单对话框,由运营输入 Sku 类型和 id ,即可自动在 Markdown 编辑器光标所在位置插入一行内容...这个编辑器内置了诸如「插入 Sku 卡片」、「插入 Banner 图」等一系列业务功能。...因为 Draft.js 是一个基于 React 编辑器,我们可以直接在编辑器渲染出一个 React 组件 如下图: ?...数据源解析 对于编辑器获取数据 rawContent,我们使用 isDraftJson 工具函数判断该 rawContent 是否可以被多功能编辑器以 Draft.js 支持数据解析:如果可以,则证明

    2K30

    【已解决】怎么获取字符串相同字符串第N 个所在位置

    问题描述 给一个配置字符串例如 NSString *string = @"34563879-+4561346573"; 现在我想获取到字符串第3个字符串3所在位置。...对于我们经常用rangeOfString这个方法只能获取最近一次出现位置,而不能指定第几个出现位置。 查看关于 NSString里面其他不经常用到 API,还真找到一个相似的方法。...NSNumericSearch = 64, //按照字符串里数字为依据,算出顺序。...< Foo7.txt < Foo25.txt NSDiacriticInsensitiveSearchNS_ENUM_AVAILABLE(10_5, 2_0) = 128,//忽略 "-" 符号比较...使用通用兼容比较方法,如果设置此项,可以去掉 NSCaseInsensitiveSearch 和 NSAnchoredSearch }; rangeOfReceiverToSearch 需要搜索在源字符串所在范围

    2.5K20

    技术|必知必会 Vim 编辑器基础命令

    你可以使用:help命令来获取在线帮助。 理解Vim模式Vim有两种模式,详细介绍如下: 命令模式:当启动Vim编辑器后,默认处在命令模式下。...你可以在文件中移动并且修改内容,剪切、复制和粘贴文件一部分,同时发出命令执行更多操作(按ESC键进入命令模式) 插入模式:插入模式用于在给定文档位置插入文本(按i键进入插入模式) 我如何知道我正使用哪种...键–向上移动一页 Ctrl+d–向下移动半页 Ctrl+u–向上移动半页 插入模式:插入文字下面的Vim快捷键允许你根据需要在光标的不同位置插入内容。...o–在光标所在行下面插入新行O–在光标所在行上面插入新行ea–在单词末尾插入拷贝、粘贴和删除一行yy–复制一行p/P–将内容粘贴到光标之后/之前dd–删除一行dw–删除一个单词在Vim搜索和替换匹配模式...:%s/旧模式/新模式/gc–逐个询问是否文件旧模式替换为新模式如何在Vim编辑器跳转到特定行你可以根据需求以两种方式达到该目的,如果你不知道行号,建议采用第一种方法。

    1.3K40

    shell(一)

    2.3.3.1和脚本文件相关变量 符号 意义 $0 获取当前执行shell脚本文件名 $$ 获取执行shell脚本进程号 $n 获取当前执行shell脚本第n个参数值,n=1..9,当n为0时表示脚本文件名...获取指定位置参数 echo "第一个位置参数是: $1" echo "第二个位置参数是: $2" echo "第三个位置参数是: $3" echo "第四个位置参数是: $4" 执行脚本:...: 作用:在指定行号的当行插入内容。...格式: sed-i'行号i\插入内容'文件名 注意:如果插入多行,可以在行号位置写个范围值,彼此间使用逗号隔开。...格式: sed-i'行号d'文件名 注意:如果删除多行,可以在行号位置写个范围值,彼此间使用逗号隔开。

    3.4K50

    Linux——常用命令(2)

    通常结合着“>”重定向符号,用来在文本文件,添加数据,“>>” 表示追加。...-a:此参数效果和同时指定"-dpR"参数相同; -d:当复制符号连接时,把目标文件或目录也建立为符号连接,并指向与源文件或目录连接原始文件或目录; -f:强行复制文件或目录,不论目标文件或目录是否已存在...---- 3.vim 三种模式:命令模式、插入模式、末行模式 1. i I a A o O 进入到插入模式 i: 在光标当前位置插入 I: 在光标所在行首插入 a: 在光标所在位置插入 A: 在光标所在行尾插入...G   跳转到文件末尾行                       #G   跳转到文件第#行  4、行号显示 :set nu在编辑器显示行号                        :... 6、复制 yy   复制当前行整行内容到剪贴板         #yy   复制从光标处开始#行内容  7、粘贴 p 小写    将缓冲区内容粘贴到光标位置处之后

    25020

    【Linux 】开发利器:深度探索 Vim 编辑器无限可能

    1)按「~」:完成光标所在位置字符大小写切换  2)按「n~」:完成光标所在位置开始往后n个字符大小写切换 【跳至指定行】  1)「ctrl」+「g」列出光标所在行行号  2)「#G」:例如...【行号设置】  1)「set nu」:显示行号  2)「set nonu」:取消行号 【跳转】  1)「#」:跳到文件第#行 【查找字符】  1)「/关键字」:先按「/」键,再输入您想寻找字符...后,你需要在命令行输入你想要查找字符(或字符串),然后按下回车键。Vim会从当前光标位置开始向上查找与输入匹配内容。...使用/:按下/后,你需要在命令行输入你想要查找字符(或字符串),然后按下回车键。Vim会从当前光标位置开始向下查找与输入匹配内容。...设置行号:在.vimrc文件添加如下指令: set number 这个指令会在每一行前显示行号

    9010

    vim编辑器,应该这样用!

    A:在光标的行末,插入内容; i:在光标的行首,插入内容; o:在光标的下一行,插入内容; O:在光标的上一行,插入内容; "底行模式":编辑模式下,点击Esc键,进入底行模式...3、命令模式下常用光标移动 按照单个字符移动:使用键盘上面的↑、↓、←、→键; 按照整个单词移动:w/W b/B e/E w:安照单词首字母向后移动,不忽略标点符号 W:安装单词首字母向后移动...,忽略标点符号 b:按照单词首字母向前移动,不忽略标点符号 B:按照单词首字母向前移动,忽略标点符号 e:按照单词末尾字母向后移动,不忽略标点符号 E:按照单词末尾字母向后移动...gg:移动到文件顶端开始 G:移动到文件底端开始 M:移动到文件中间位置 4、命令模式下常用基本操作 dd :删除光标所在行; 3dd :删除从当前光标开始起3行内容; 4dd...(包括当前光标行); p :paste粘贴; u :undo撤销; $ :直接定位到当前行行末; 5、底行模式下常用命令 :set nu 显示行号; :set nonu 不显示行号

    65940

    Django搭建博客(九):为博客添加代码高亮显示和 md文档支持

    特别需要注意是:代码块必须使用三个 '`' 符号包裹起来才能正确识别,语言标记可有可无,但是三个 '`' 必须单独成行。...再将生成 html标签插入到原来代码位置,然后再用 markdown将处理之后文档整个解析为 html文档即可。...四、遇到问题 1、如何将上色后代码放回原位 一开始我想直接使用占位符替换原来代码,然后再根据占位符来将代码插入回原来位置。...2、如何显示行号 pygments是可以自动生成带行号 html标签(只需要将 lineno设置为 True 即可)。...五、使用方法 我将代码封装成了一个函数,这个函数接受一个 markdown文档字符串,返回 html字符串。 返回字符串可以直接插入 html页面(Django记得使用 safe过滤器)。

    1.3K30

    2023最全vim编辑器教程(详细、完整)-编辑器之神

    下移动指定行(对应数字) 语法9:数字+键盘方向键左/右 //键盘输入数字+键盘方向键左/右,光标以光标所在位置为准向左/右移动指定个字符(对应数字) 语法10::数字 //键盘输入英文符号:+数字再回车...新内容/g //用新内容替换整个文件全部被搜索到内容 6.显示行号 语法1::set nu //键盘输入英文符号:+字母set+空格+字母nu再回车,显示文件每行行号,显示行号是暂时下次打开该文件不会再显示...语法2::set nonu //键盘输入英文符号:+字母set+空格+字母nonu再回车,取消行号显示 7.切换文件 语法1::files //键盘输入英文符号:+字母files再回车,查看同时打开所有文件名称...: i 在光标所在字符前开始插入 a 在光标所在字符前开始插入 o 在光标所在行下面另起一行开始插入 I 在光标所在行行首开始插入,若行首有空格则在空格后插入 A 在光标所在行行尾开始插入 O 在光标所在行上面另起一行开始插入...) 2.简易计算器 当编辑文件需要用计算器计算时,不需要退出文件,可以使用vim简易计算器完成计算; 使用方法: 在编辑模式下键盘ctrl+r,然后键盘输入符号=,光标就会移动到末行,键盘输入计算格式后回车

    2.7K50
    领券