应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

markdown编辑器editormd获取光标位置,获取行号,获取总行号,获取光标处内容,相关计算等

6080人阅读 2021/1/21 12:05 总访问:5194547 评论:0 收藏:0 手机
分类: 编辑器

获取光标位置,获取行号位置

  1. let markdownCursorLine = markdownEditor.getCursor().line + 1;

获取总行号

  1. let allCount = markdownEditor.cm.lineCount();

设置光标位置

  1. testEditormd.setCursor({line:1, ch:2});

设置选中文本

  1. testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100});

获取选中文本

  1. testEditormd.getSelection()

获取光标处文本

貌似并没有直接获取光标处文本的方法,可以使用setSelection,getSelection配合起来实现。哈哈真是个可爱的小机灵

  1. testEditormd.getSelection()

如何计算当前光标位置下方是否全是空行

使用setSelection,getSelection从光标行到末尾行,这样去逐行扫描就行了哇。扫描完后在让光标回到最初的位置就行了撒,哇哦nice。嘿嘿,思维要灵活点!

  1. for (var i = markdownCursorLine; i < allCount; i++) {
  2. //bala bala bala
  3. }

其实还有更好的方法,直接选中从当前光标位置,到结束点的光标,在统一获取即可,不用逐行扫描。

  1. //获取光标位置
  2. let getCursorResult = markdownEditor.getCursor();
  3. let markdownCursorLine = getCursorResult.line + 1;
  4. //获取总行号
  5. let allCount = markdownEditor.cm.lineCount();
  6. //先选中从当前光标位置,到结束点的光标,在统一获取即可
  7. markdownEditor.setSelection({ line: markdownCursorLine, ch: 0 }, { line: allCount, ch: 0 });
  8. //获取选中文本
  9. let getSelectionContent = markdownEditor.getSelection();
  10. console.log("获取内容");
  11. console.log(getSelectionContent);
  12. if (!!getSelectionContent) {
  13. console.log("有内容");
  14. }
  15. //获取完后让光标回到最初的位置
  16. markdownEditor.setCursor(getCursorResult);

反向解压源码,查看源码,分析源码,修改源码其实可以增加很多自定义功能与一些平时很少看到的代码

比如像getValue方法的原理。

这个方法是获取所有内容的,获取从第一行到最后一行的内容,说明getLines可以获取一个范围的内容,但是好像没有暴露出来,如果我们想外部使用我们只需要在封装一个即可。

当然还有其他更多方法的内部原理和查找方式这里就不行了。比如根据行号获取内容的方法我们查看源码很容易发现就是markdownEditor.cm.getLine


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

使用markdown编辑器editormd图片上传

静态资源路径问题可以参考:https://www.tnblog.net/aojiancc2/article/details/3436自定义工具栏可以参考:https://www.tn...

markdown转HTML的显示处理

数据库保存转化好的html格式,前台直接显示" class="reference-link">方法1 : 数据库保存转化好的html格式,前台直接显示m...

markdown预览效果优化差点哭出声的艰辛历程

其实要实现的效果很简单就是想写文章的时候能即时预览效果,但是自带的会出现看不到的情况,且回车也无法改变这种现象。熬...

扩展markdown增加mermaid支持画图

我看网上没有什么资料,只有说怎么去用它,没有说怎么才能用它。那就自己慢慢研究在让markdown支持,要自己实现这个必须要...

.NETCore配置markdown的学习之路 (一)

前言MarkDown讲述 (开始使用)现在很多人都自己开发一个博客平台分享技术,老程序员都说干程序员如果没有开发出来一个...

tnblog markdown画图

tnblog画图graph LR;   A-->B;   A-->C;   B-->D;sequenceDiagram participant Alice participant Bob ...

关于tnblog markdown

我们对markdown进行了深度的优化和高度的自定义功能比如更人性化的即时预览效果扩展语法等并且持续不断的完善优化中tnlog m...

Asp.NET使用markdown上传图片

初始化富文本编辑器就不写了,初学者去看这篇文章.NETCore配置MarkDown的学习之路 (一)前台代码配置imageUploadURL属性并且...

markdown中mermaid画图解析失败

报错:Parse error on line 17:...ockquote&gt;&lt;h3 id=&quot;h3-u6570u5B57u8BA4u8BC其实就是htmlDecode的配置问题,就...

markdown编辑器editormd设置内容获取内容追加内容

这些东西网上搜半天都搜不到,只有自己分析源码了,所以还是要靠自己。找到下面4个方法。可以参考一下。 setMarkdown,set...

XAF生成markdown

usingDevExpress.ExpressApp.DC; usingDevExpress.ExpressApp.Model; usingDevExpress.Persistent.Validation; usingJGS...

markdown语法示例

[TOC]Markdown简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的H...

markdown常用语法

MarkDown 一些语法删除线~~content~~ Content # 任务清单- [x] Checked - [ ] ReChecked Checked[ ] ReChecked...

editormdmarkdown 自定义导航栏按钮

editormd,markdown 自定义导航栏按钮可以通过修改源代码来实现,但是没有必要那么麻烦。 editormd本身就有增加自定义按钮...

markdowneditormd编辑器Editor.md自动保存插件的开发

简介: Markdown编辑器Editor.md自动保存插件的开发。文章编辑器没有自动保存功能怎么行,万一不小心忘记保存不就辛苦白费了...

editormdmarkdown编辑器Editor.md图片粘贴插入插件的开发

Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便,不能像其他编辑器一样粘贴插入图片,就着手...