但是使用的是 contenteditable 这个属性进行富文本操作。 相似之处在于 Twitter 的 ID 也是唯一，但是可以通过昵称进行搜索，然后转化成 ID，这一点在体验上好了不少。...根据 Selection API 规范：一个选择可以包括零个或多个范围（不过实际上，只有 Firefox 允许使用 Ctrl+click (Mac 上用 Cmd+click) 在文档中选择多个范围）。...这是在 Firefox 中做的一个具有 3 个范围的选择的截图： 其他浏览器最多支持 1 个范围。...正如我们将看到的，某些 Selection 方法暗示可能有多个范围，但同样，在除 Firefox 之外的所有浏览器中，范围最多是 1。...综上所述：一般我们只有一个 Range，当我们的光标在 contenteditable 的 div 上闪动的时候，其实就有了一个 Range，这个 Range 的开始和结束位置都是一样的。
1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。...collapse(toStart)：向边界点折叠range，即是设置光标位置，toStart默认为false，表示光标定位在节点末尾，true表示光标定位在节点起点。...extractContents()：将range的内容从文档树移动到文档片段中。 insertNode(newNode)：在range的其实位置插入新的节点。...1.4. input/textarea 在HTML5中，input/textarea 都存在以下属性,不支持IE6/7。...: 可编辑div: <div contenteditable
编辑框，textarea，input text的光标位置，兼容FF和IE 0) { OsObject = "Firefox"; } if (navigator.userAgent.indexOf("Safari") > 0) { OsObject = "Safari...= "INPUT") { if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")... <div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true...注意div编辑框源码里面是嵌套有其他标签的，可以正常返回正确位置！
> ); } export default App; 效果图: 第二天，掌控浏览器中光标 小标题又可以叫做在接管输入文字以后，我们可以怎样在富文本光标位置输入文本...在第一天，我们已经实现了，监听用户输入，并选择性的输入内容。虽然它使用的原理很有价值，但是这个编辑器有点low，不管用户在编辑器哪里输入，内容都只能在文本末尾追加。...首先，我们知道如何获取光标的位置，以及对应文本的位置。这里我们会用到window.getSelection() api来获取光标所在的dom，以及光标在dom中文本的位置。...但是光标在输入后位置不对了，我们接下来要改变光标。...在监听中修改window.root，并在里面更新txt和txtO,最后清除光标，防止txt更新导致光标闪动。
而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？ contenteditable 属性规定是否可编辑元素的内容。...可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编辑状态，就出现光标了。...如 效果： ? contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。...FireFox外的浏览器下都保持良好兼容性，如需使用事件委托，可考虑在FireFox下使用事件流elem.addEventListener(‘focus’, handler, true) 可获得焦点的元素...= [this[0]]; //结果数组 for(var i = 1; i < this.length; i++) { //从第二项开始遍历 //如果当前数组的第i项在当前数组中第一次出现的位置不是
这是不可编辑的 该属性最早是在 IE 上实现的（厉害哦?）...（光标可以看做是范围重合的特殊状态），一个页面用户可能选择多个范围（比如 Firefox）。...这个知识点是很重要的，因为它让我们有了操纵光标的能力（比如插入内容之后设置光标的位置），不过这篇文章中我并没有去深入它，只是浅出?。 目标 开篇一顿扯，下面让我们抓紧时间做一个属于自己的富文本吧?...在点击的图片上创建个大小一样的 div 如果点击的是一个图片，那我们就创建一个 div ，暂且把这个 div 叫做蒙层吧，顺便先看张示意图： 也就是动态创建一个蒙层（和图片一样大小）以及四个拖拽顶点，并定位到和图片一样的位置...所以我们需要具有控制光标的能力，具体操作就是在点击按钮之前我们可以先存储当前光标的状态，执行完命令或者在需要的时候后再还原或设置光标的状态即可。
的回答： 当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美，咳咳。...那用 div 包裹呢？也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。...解决方法是在 componentDidUpdate 里把光标重新放到最后就可以了，每次渲染后光标回到最后的位置。...isFocused) return // 将光标放到最后 const selection = window.getSelection() if (selection !...的组件就完成了，主要实现了： value 和 onChange 的数据流 在 componentDidUpdate 里处理光标总是被放在最前面的问题 在 shouldComponentUpdate 里添加
平时我们使用文本框input, textarea时，我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足，就是不能满足我们插入图片或者其他的一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊，终于可以了，记录一下，网上资料不多. 首先要让DIV启用编辑模式.... 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。...下面说怎么获取或设置光标位置. 2个步骤 1：获取DIV中的光标位置 2：改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...中的光标移动到最后面了..
document.activeElement获取当前获得焦点的元素： IE:document.activeElement可获得所有聚焦的元素，包括input、textarea、div等。...IE只关心光标聚焦的位置，不关心聚焦元素的性质。...chrome:document.activeElement仅对input、textarea等标准的输入文本有效；对于div等非编辑类的元素(即使开启了contentEditable)，返回的值为BODY...fireFox：document.activeElement可获得所有聚焦的元素。包括input、textarea、div等。
我们来用大白话说一下富文本编辑器原理 将一个div设置属性 contenteditable="true" 设置加粗,加横线,放大字体等效果 使用 document.execCommand('bold...formatBlock: 添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素)....(IE浏览器不支持) indent: 缩进选择或插入点所在的行， 在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。...italic: 在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I ) justifyCenter: 对光标插入位置或者所选内容进行文字居中。...justifyRight: 对光标插入位置或者所选内容进行右对齐。 outdent: 对光标插入行或者所选行内容减少缩进量。 paste: 在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。
) 当前需求的拆解 按住shift + @ 的时候，弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。...、可以做为编辑器使用，由于时间原因并没有深入体会、感兴趣的小伙伴可以看一下以下内容 contenteditable-MDN contenteditable实现编辑器,光标、输入法处理 基于contenteditable...$refs.editor)“ 使用ref的方式而不是ID的方式呢？ 使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中，所以当您操作这个ref时，它不会干扰其他组件。...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset...这个功能只是在开发中挤出来的、很多东西写的不够好、不够完善，希望本文能帮助您在开发中节约一点时间。也欢迎大家提出踊跃的反馈、希望能与大家共进步，加油～
onerror=alert(1)>"> 在页面上的任何位置（甚至在表单外部）单击提交元素 <input type...在＆之后允许NULL Firefox Firefox允许在命名实体内使用NULL Firefox Firefox在开头的注释中允许使用NULL字符 XBL也使用数据URL在FF3.5中工作 在怪癖模式下，IE允许您使用=代替： <div style
* 因为浏览器兼容性问题，第二个参数要为false，firefox在该参数为true时抛出错误。...rangeCount：选区中包含的DOM范围的数量 方法 addRange(range)：将指定的DOM范围添加到选区中 collapse(node,offset)：将选区折叠到指定节点中的相应的文本偏移位置...collapseToEnd()：将选区折叠到终点位置 collapseToStart()：将选区折叠到起点位置 containsNode(node)：确定指定的节点是否包含在选区中 deleteFromDocument...anchorOffset：“起点”在anchorNode中的偏移量。 focusNode：返回包含“结束点”的节点。 focusOffset：“结束点”在focusNode中的偏移量。...表单提交 富文本编辑不是使用表单控件实现的，而需要手工来提取并提交HTML。为此，通常可以添加一个隐藏的表单字段，就是在提交表单之前提取出HTML，并将其插入到隐藏的字段中。
正常来说点击可编辑框末尾空白,光标默认会闪烁在末尾 , 但是闪到了倒数第二个了....当时一直以为js有问题...压根没想到是一个top属性.......虽然transform: translateY(5px);补丁可用 , 不过问题关键点还是对齐问题 , 是时候探个究竟了 数格子可以知道图片在div[contenteditable=true]里面和文字的水平线高...4px 在CSS深入理解vertical-align和line-height的基友关系找到了答案~ 解决办法变得更简单了 , 并且多选不会出现背景断层 然后配合Disable autocorrect.../ autocompletion in content editable div
正常来说点击可编辑框末尾空白 ,光标默认会闪烁在末尾 , 但是闪到了倒数第二个了....当时一直以为js有问题...压根没想到是一个top属性.......数格子可以知道图片在div[contenteditable=true]里面和文字的水平线高4px 在CSS深入理解vertical-align和line-height的基友关系找到了答案~ 解决办法变得更简单了...然后配合Disable autocorrect / autocompletion in content editable div ?
前端富文本基础及实现 https://www.zoo.team/article/rich-text 前言 在日常生活中我们会经常接触到各种各样的文档格式和形式，其中富文本在文档格式中扮演了重要角色。...文档变成可编辑后，就可以像使用文字处理程序一样编辑文本。 效果如图： 元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。...使用方式是在一个元素上添加 contenteditable 属性并设置为 true，然后该元素会立即被用户编辑。...光标示例（起始位置是同一个位置的选区） 如图：anchorNode 与 focusNode 为同一节点 ("ZOO" 文本节点)，anchorOffset 与 focusOffset 指向节点同一处，通过此信息可得到光标位置...标签，如 insertImage 在光标位置插入图片 图片的 URL 链接 insertParagraph 在光标位置插入元素 null italic 切换选中文本的斜体样式 null styleWithCSS
演进之路 Web富文本编辑器也是在不断演进，在整个发展的过程中，也是遇到了不少困难，而正是因为这些问题，可以将发展历程分为L0、L1、L2三个阶段的发展历程。...data:text/html, 做过文本复制功能的同学应该比较熟悉document.execCommand("copy")这个命令，...来实现加粗还是来实现加粗，而且还有浏览器的兼容性问题，例如在IE浏览器中是使用来实现加粗，在Chrome中是使用<...如果有用过CodeMirror5的用户可能会注意到，在默认配置下的CodeMirror，除了排版的能力不是完全自行实现的，其他的方面都有自己的一套实现方案，例如光标是通过div来模拟定位的、输入是通过一个跟随光标移动的...当一个Range的起始处和结尾处是同一个位置时，该Range就处于Collapsed状态，也就是我们常见的光标状态。
接管所有事件，有自己的排版引擎 Google Docs 光标 kix-cursor-caret 输入 docs-texteventtarget-iframe contenteditable 金山文档 光标...什么是 contenteditable HTML中的 contenteditable 的属性可以打开某些元素的可编辑状态．也许你没用过 contenteditable 属性．甚至从未听说过． contenteditable...我们最常用的输入文本内容便是 inpu t与t extarea ，使用 contenteditable 属性后，可以在 div , table , p , span , body ,等等很多元素中输入内容...即通过 contenteditable 可以让普通的元素实现可编辑状态。 2. 什么是 Selection Selection 对象表示用户选择的文本范围或插入符号的当前位置。...脱离execCommand实现编辑器 execCommand 只在编辑器中渲染，完全可以通过使用 dom 的 api 来实现渲染功能。
说明 页面内增加一个可编辑的编辑区域div.editor-box,开启contenteditable 为div.editor-box绑定paste事件 处理paste 事件，从event.clipboardData...|| window.clipboardData获得数据 将数据转换为文件items[i].getAsFile() 实现在编辑区域的光标处插入内容 insertNodeToEditor 方法 问题1 测试中发现复制多个文件无效...HTML 可以直接粘贴图片到这里直接上传 ...;//记录光标位置对象 var node = window.getSelection().anchorNode; // 这里判断是做是否有光标判断，因为弹出框默认是没有的...(ele);// 在光标位置插入该对象 } else { editor.append(ele); } } var box
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
