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

富文本编辑器开发简介

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

4.3K20

前端富文本基础及实现

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

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

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

    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.3K10

    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

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

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

    34310

    实现一个简单的编辑器

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

    7.3K10

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

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

    3K30

    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.7K30

    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 打开插入宏向导

    88130

    怎样用ppt制作动画效果

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

    3K20

    Material Design — 菜单(Menus)

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

    5.8K100
    领券