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

文本编辑器开发简介

:选区起点所在节点 anchorOffset:在到达选区起点位置之前跳过anchorNode字符数量 focusNode:选区终点所在节点 focusOffset:focusNode包含在选区之内字符数量...toString():返回选区所包含文本内容 * IE8-浏览器不支持,我试了IE8以上也不支持 selection对象 术语 anchor:选中区域“起点”。...focus:选中区域“结束点”。 range:是一种fragment(HTML片断),它包含了节点或文本节点一部分。 属性 anchorNode:返回包含“起点”节点。...anchorOffset:“起点”在anchorNode偏移量。 focusNode:返回包含“结束点”节点。 focusOffset:“结束点”在focusNode偏移量。...removeAllRanges():移除selection中所有的range对象,执行后anchorNodefocusNode被设置为null,不存在任何被选中内容

4.2K20

前端富文本基础及实现

什么是富文本文本就是用纯文字编辑器编写,输入什么就是什么文档,只包含字符。...如果 anchorNode 是字符串则对应文字下标,anchorNode 是元素,则对应选中区域对应它之前同级节点数目。 focusNode 返回选中区域终点所在节点。...颜色值字符串(IE 使用这个命令设置文本背景色) bold 切换选中文本粗体样式 null createLink 将选中内容转换为指向给定 URL链接 URL 链接值,至少包含一个字符 fontSize...下列图片可简单表明: 结尾(附 Demo) 根据本文介绍内容我们依次了解了前端富文本概念、输入模式实现、选区信息及应用、富文本工具栏实现文本数据收集回填。...将这些内容汇总即可实现一个简单前端富文本编辑器。 下方附上本文内容汇总代码 demo ,内含基于 iframe div 元素分别实现文本编辑器,功能简单,供读者参考。

4.4K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手把手教你实现网页端社交应用中@人功能:技术原理、代码示例等

    Range();   range.setStart(p, 0);   range.setEnd(p, 2);   // 范围 toString 文本形式返回其内容(不带标签)   alert(range...:   - 在上例中:分别是 中第一个文本节点 2。...3)collapsed —— 布尔值,如果范围在同一点上开始结束(所以范围内没有内容)则为 true:   - 在上例中:false 4)commonAncestorContainer —— 在范围内所有节点中最近共同祖先节点...主要选择属性有: 1)anchorNode:选择起始节点; 2)anchorOffset:选择开始 anchorNode偏移量; 3)focusNode:选择结束节点; 4)focusOffset...:选择开始处 focusNode 偏移量; 5)isCollapsed:如果未选择任何内容(空范围)或不存在,则为 true ; 6)rangeCount:选择中范围数,除 Firefox 外,其他浏览器最多为

    1.2K10

    Flutter | 常用组件

    ,那么该接口子树中所有文本都会默认使用这个样式 Widget build(BuildContext context) { return Scaffold( body: Padding(...可以包含其他 TextSpan,recognizer 用于对该文本片段上用手势进行识别处理 Widget _richText() { var textSpan = TextSpan(text: "hello...,所以他们大多是属性都 RawMaterialButton 一样 另外,所有的 Material 库中按钮都有如下相同点: 1,按下都会有 “水波纹动画” 2,都有一个 onPressed 属性来设置点击事件回调...3,可以应用文本样式,可以像文本一样改变字体图标颜色,大小对齐等 4,可以通过 TextSpan 和文本混用 使用 Material Design 字体图标 Flutter 默认包含了一套 Material...,可以通过它设置/获取编辑框内容,选择编辑框内容,监听编辑框文本改变事件。

    11.4K30

    Flutter 全栈式——基础控件

    简单说就是字体缩放系数 maxLines int 文本最多可显示行数。如果文本超过给定行数,则根据溢出规则截断 textSpan TextSpan TextSpan方式显示文本。...,通常用于获取输入内容 focusNode FocusNode 用于输入框焦点管理监听 decoration InputDecoration 输入框装饰器,用于修改外观 keyboardType...内边距 shape ShapeBorder 设置形状 clipBehavior Clip 剪裁 focusNode FocusNode 用于焦点管理监听 autofocus bool 是否自动获取焦点...materialTapTargetSize MaterialTapTargetSize 配置点击目标的最小大小 focusNode FocusNode 用于焦点管理监听 autofocus bool...focusNode FocusNode 用于焦点管理监听 autofocus bool 是否自动获得焦点 CupertinoSwitch 属性较少 属性名 类型 简述 value bool 当前开关状态

    3.8K40

    flutter 输入框组件TextField实现代码

    TextField 顾名思义文本输入框,类似于iOS中UITextFieldAndroid中EditTextWeb中TextInput。主要是为用户提供输入文本提供方便。...在布局上,我们使用一个Column包含了两个TextField一个RaisedButton。...) TextInputType.datetime(带有“/”“:”数字键盘) TextInputType.multiline(带有选项启用有符号十进制模式数字键盘) TextInputAction...TextCapitalization.characters:大写句子中所有字符。 TextCapitalization.words : 将每个单词首字母大写。 ?...控制TextField中大小最大长度 TextFields可以控制在其中写入最大字符数,最大行数并在键入文本展开。 TextField( maxLength: 4, ), ?

    4.8K11

    初探富文本之基于虚拟滚动大型文档性能优化方案

    Model上,由于在虚拟滚动过程中DOM可能并不会真正渲染到页面上,而浏览器选区表达则是需要anchorNode节点与focusNode节点共同确定,所以我们就需要保证在用户选中过程中这两个节点是正常表现在...实现这部分能力实际上并不复杂,只要我们理解浏览器选区模型,并且由此保证anchorNode节点与focusNode节点是正常渲染即可,通过保证节点正确渲染则我们就不需要在虚拟滚动场景下去重新设计选区模型...那么在这种情况下我们就需要保证选区anchorNode节点与focusNode节点正确渲染,如果粒度粗则保证其所在块是正常渲染即可。...触发选区更新: 当因为某些操作导致选区中内容更新时,例如通过编辑器API操作了文档内容,此时将出现两种情况,如果更新内容不是anchorNode节点或者focusNode节点,那么对于整体选区不会造成影响...举个例子,我们在文档比较下方位置有某个块结构,这个块结构之中嵌套了行代码块,如果在检索时候我们采用直接迭代所有状态块而不是递归地查找的话,那么就存在先跳转完成块内容之后再跳转到代码块问题,所以我们在检索时候需要对高度先进行预测

    20110

    实现一个简单编辑器

    接管所有事件,有自己排版引擎 Google Docs 光标 kix-cursor-caret 输入 docs-texteventtarget-iframe contenteditable 金山文档 光标...我们最常用输入文本内容便是 inpu t与t extarea ,使用 contenteditable 属性后,可以在 div , table , p , span , body ,等等很多元素中输入内容...即通过 contenteditable 可以让普通元素实现可编辑状态。 2. 什么是 Selection Selection 对象表示用户选择文本范围或插入符号的当前位置。...它代表页面中文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改 Selection 对象,请调用 window.getSelection() 。 3....问题 对内容控制不足,只能满足基本编辑需求 对 contenteditable=false 元素处理存在很大问题 对历史状态控制完全依赖浏览器 强依赖 document.execCommand

    1K20

    【Flutter实战】文本组件及五大案例

    老孟导读:大家好,这是【Flutter实战】系列文章第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(TextRichText)和文本输入组件(TextField),基础用法五个案例助你快速掌握...基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本样式在style中设置,类型为TextStyle,TextStyle中包含很多文本样式属性...设置文本大小颜色: Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),), 上面黑色字体为没有设置效果,作为对比。...,可以获取TextField内容、设置TextField内容,下面将输入英文变为大写: TextEditingController _controller; @override void initState...); _focusNode为TextFieldfocusNode: _focusNode = FocusNode(); TextField( focusNode: _focusNode, .

    7.3K10

    如何从头手写一个富文本编辑器(解析slate源码,连载)

    一眨眼就是一年过去了,项目初见成效,但是发现困难挑战也越来越棘手。于是深入研究改编了一下源码,为后面重写源码做准备。 我们项目的成果截图,镇宅一下: 文章末尾有demo源码,欢迎评论交流。...第一天,最简单demo 首先,写一个最简单p标签,又叫我们可以怎样从浏览器手中接管用户文本输入。...在第一天,我们已经实现了,监听用户输入,并选择性输入内容。虽然它使用原理很有价值,但是这个编辑器有点low,不管用户在编辑器哪里输入,内容都只能在文本末尾追加。...作为一个富文本编辑器这是不可饶恕。 那么现在,我们来完善这个问题。 首先,我们知道如何获取光标的位置,以及对应文本位置。...这里我们会用到window.getSelection() api来获取光标所在dom,以及光标在dom中文本位置。

    2.9K30

    Flutter实现代码提示功能

    1.简介 在实现代码提示功能前,我们先来看看什么是代码提示,当我输入关键字String 时,如果输入到 Stri 时候,编辑器会为我找出所有包含 Stri 代码关键词,这个时候,我们只要选中需要输入关键字...2.RawAutocomplete Flutter 为我们提供了这一个Widget, 在名字看来,是可以自动完成填充代码Widget,我们来看看它参数 类型 属性 介绍 AutocompleteOptionsViewBuilder...fieldViewBuilder 构建输入框视图 FocusNode? focusNode 控制输入框焦点 AutocompleteOnSelected?...controller: textEditingController, focusNode: focusNode, onFieldSubmitted: (String...image.png 5.更多内容 关于我更多插件 r_router路由跳转,可实现路由拦截,路由注册,无Context 跳转、弹对话框 r_logger日志打印,突破控制台输出最大字数限制 r_upgrade

    1.6K30

    xwiki功能-快捷键

    Alt + C 取消编辑 Alt + P 不保存,预览该网页 Alt + Shift + S 保存并继续编辑 Alt + S 保存并查看 WYSIWYG编辑模式 Ctrl + A 选择编辑区域内所有内容...Ctrl + B or Meta + B 选定文本为粗体 Ctrl + C or Ctrl + Insert 复制当前选择到剪贴板 Ctrl + ↓ 当表格包含插入符或者选择表格,能在表格下面创建空段...Ctrl + I or Meta + I 选定文本为斜体 Ctrl + U or Meta + U 选定文本添加下划线 Ctrl + ↑ 当表格包含插入符或者选择表格,能在表格前面创建空段。...Ctrl + Z or Meta + Z 撤销上一步操作 WYSIWYG宏支持(从XE 3.0开始) ↓ or ↑ or ← or → 导航宏输出 Enter 编辑宏 Space 切换展开折叠宏之间状态...Ctrl + Shift + R 重新加载宏 Ctrl + Shift + E 展开所有/选定宏 Ctrl + Shift + C 折叠所有/选定宏 Ctrl + Shift + M 打开插入宏向导

    86130

    怎样用ppt制作动画效果

    然后每点击一次鼠标,就会不同动画效果出现一个人物头像图片及其对应的人名。 新建一张幻灯片在“幻灯片版式”“幻灯片设计—设计模板”任务窗格中,分别为它套用一种版式一种设计模板。...这里我们选用是“标题,内容文本”版式“DigitalDots”模板,大家也可以根据需要选用其他类型版式模板。...直接套用动画方案,可大大加快幻灯片中动画效果设计进程。在“幻灯片设计—动画方案”任务窗格中,提供了丰富动画方案,可应用于选定幻灯片或所有幻灯片。选用后,会在设计窗口中播放所选方案预览效果。...自定义动画列表显示是当前幻灯片中所有应用了动画效果元素及其对应动画效果设置。   列表中包含多个列表项目,每个项目表示一个动画事件。...这里共包含了4个项目文本列表项目,我们可点击向上向下小箭头来分别进行展开折叠。选中某一个列表项目后,可以更改有关这个动画事件效果设置。

    3K20

    Material Design — 菜单(Menus)

    每个菜单项都包含不关联选项或操作,可影响app,页面或视图中已选定元素。 菜单不应该被用作app内导航主要方法。 ?...菜单项还可包含: ·图标提示文本(如下图中展示键盘快捷键); ·如复选标记之类控件(已选择打勾),表明多个已选项目或状态。 菜单排序 带有静态内容菜单应该在菜单顶部放置最常用菜单项。...例如,重做在没有任何可重做操作时被禁用。 剪切复制在没有选择内容时不可用。 ? 不可用例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...简单菜单 ·打开时,简单菜单会尝试将当前选定菜单项目与列表项目垂直对齐。 当前选择菜单项突出显示(如下图)。 ? 向下展开简单菜单 ?...向上展开简单菜单 ·不要在简单菜单弹出第一个选项上放列表中非已选项(如下图)。 ? ·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。 ?

    5.8K100
    领券