DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置,当选取范围起始点和结束点一样时,就是光标插入的位置。 1.1. 术语 anchor:选区起点。 focus:选区终点。...collapseToStart():取消当前选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。...collapseToEnd():取消当前选区,并将光标定位到原选取的最末位,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。...cloneContents():克隆一个range的内容片段。 deleteContents():删除range的内容片段。...> 可编辑div: <div contenteditable="true" class="edit-div" onclick="getCursortPosition
前言 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。 方式 iframe 页面中嵌入一个包含空HTML页面的iframe。... 打开富文本编辑...* 因为浏览器兼容性问题,第二个参数要为false,firefox在该参数为true时抛出错误。...toString():返回选区所包含的文本内容 * IE8-浏览器不支持,我试了IE8以上也不支持 selection对象 术语 anchor:选中区域的“起点”。...collapseToEnd():将“起点”移动到,selction的“结束点”,多个range时也是如此。
闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): 一、定义需求 可输入文本,以及插入表情。...兼容性:IE与标准浏览器 二、详细设计 根据需求,我们大致可以想到如下问题: 兼容性的处理 事件绑定的兼容性 可编辑输入框的表情插入兼容性 获取数据的兼容性 三个模块 留言板与ui交互的模块 表情展示模块...classList在ie8-不支持的问题,暂时选择的用setAttribute代替 appendChild全都支持,append在chrome中支持,但ie不支持 2....: range(选区):IE与标准浏览器的兼容性,值得注意的IE操控选区时,需要让被操控元素(也就是选区所在的元素)获取焦点,否则会失败。...)" >获取内容
能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内容还需要能删除,拖拽等等。...下面从项目中的扩展点找2个说明一下这个NB的编辑器,当然他的更多可扩展功能也没有用上,所以只有看到的官方文档,才能理解他的可扩展性和灵活性。...然后在来一个高级一点的。设置字体为粗体 quill默认使用的是strong或者b标签方式。其实这也是没有问题的,但是架不住公司的"高级"前端对手机端的所有html标签都reset了。...所以没办法只能使用style的方式来实现。 import Inline from '.....詹泽娟 的问题,集成到vue,大约是这样子.
return { formObj, handleSubmit } } } Vue3聊天模块 聊天编辑器部分采用抽离公共组件方式...-- //Vue3.0可编辑contenteditable功能 --> <div ref="editorRef" class="editor...> 是基于div的可编辑属性contenteditable实现。...handleClear = () => { editorRef.value.innerHTML = '' } /** * @Desc vue3图文混排编辑器 * @Time...(0) } } // 光标处插入内容 @param html 需要插入的内容 const
效果如图: 两者特点 两种方式都可以实现编辑模式,并且这种编辑模式与 textarea 不同,其内部会用块级元素(默认为 div 元素)做换行处理,最终体现在 dom 结构中。...两者不同的是:iframe 方式可做到样式隔离,内部样式与外部样式不存在污染与冲突( tinymce 实现方式);元素设置 contentEditable 的方式( wangEditor 等实现方式)则和其他元素一样受到页面...编辑区域可通过获取编辑元素的 innerHTML 拿到对应富文本数据,存入数据库。 网络请求的富文本数据设置为富文本容器的 innerHTML,即可展示富文本内容。...下列图片可简单表明: 结尾(附 Demo) 根据本文介绍内容我们依次了解了前端富文本的概念、输入模式实现、选区的信息及应用、富文本工具栏的实现和富文本数据收集回填。...将这些内容汇总即可实现一个简单的前端富文本编辑器。 下方附上本文内容汇总的代码 demo ,内含基于 iframe 和 div 元素分别实现的富文本编辑器,功能简单,供读者参考。
我们简要列举下它的几个使用方式,大家就知道怎么用了?...所以通常我们可以用 letrange=window.getSelection().getRangeAt(0) 来获取选中的内容信息( getRangeAt 接受一个索引值,因为会有多个 Range,而现在只有一个...style 里面如果加上 scope 的话,里面的样式对编辑区的内容是不生效的,因为编辑区里面是后来才创建的元素,所以要么删了 scope,要么用 /deep/ 解决(Vue 是这样)。...,代码如下(代码有点多,可跳过,知道大致意思就行?)...另外一种方法就是在插入图片之前先对图片进行处理(比如多一步类似裁剪的功能)再上传,这样就可以不用在编辑区里面处理图片啦,嘿嘿,目前我就想到这两种方案了,实际工作中采用的是第二种方式,因为产品的需求不止于旋转
如果你已经熟知HTML标签和DOM编程,已经拥有了大量可用的Web组件,那么你已经是Web组件专家了。 Web组件的现状 随着各式各样的用户需求,浏览器的原生组件已经无法满足需求。...el.innerHTML = ''; 因为这不是一个内置的组件,我们现在必须手动实例化新组件, $(el).find('[data-my-widget...面临的问题 组件一旦被声明,占位符已经被替代为原生的HTML标记: <input type="...: green; } 这部分<em>内容</em>介绍了封装web组件<em>的</em>基本<em>方式</em>。...Web组件最终提供我们一种实现简单、一致、<em>可</em>复用、封装和组合部件<em>的</em>方法,这是一个有意义<em>的</em>开始。
我们简要列举下它的几个使用方式,大家就知道怎么用了?...所以通常我们可以用 let range = window.getSelection().getRangeAt(0) 来获取选中的内容信息(getRangeAt 接受一个索引值,因为会有多个 Range,...3. style 里面如果加上 scope 的话,里面的样式对编辑区的内容是不生效的,因为编辑区里面是后来才创建的元素,所以要么删了 scope,要么用 /deep/ 解决(Vue 是这样)。...,代码如下(代码有点多,可跳过,知道大致意思就行?)...另外一种方法就是在插入图片之前先对图片进行处理(比如多一步类似裁剪的功能)再上传,这样就可以不用在编辑区里面处理图片啦,嘿嘿,目前我就想到这两种方案了,实际工作中采用的是第二种方式,因为产品的需求不止于旋转
” ---- 那么问题来了,现在我想实现这样一个功能:现在的「网页翻译」大多是“页面整体翻译”或者“弹框拖入”,少部分是“选中文字后在文字旁弹出一个提示框”,但是这几种方式不管是哪一种都会有一丝丝的影响...:比如遮挡页面其余内容、精确度不高等等。... 笔者的思路是:当用户鼠标“抬起”时,去判断有没有选中文本,如果没有则啥事没有、反之则要将这一部分选中的文本替换成标签!...辗转了一上午,想到了一个“取巧的方法”:因为选中的文本已经是一个dom了,将选中的文本都转化为string,然后再用字符串替换替换掉父p标签的innerText内容的相同之处!...display ---- 笔者开源了微信小程序日期组件扩展:可自定义精确到分、秒;可自定义位置、颜色、是否用默认样式。
项目介绍 svelte3-chat 基于svelte.js+svelteKit+Sass开发的仿微信界面聊天实战项目。...未标题-2.png svelte.js 一个运行速度快、无虚拟dom的前端新框架。语法比vue还简单,上手快。...svelte.js自定义顶部导航栏+菜单栏组件 p12.gif svelte3自定义多功能手机端弹窗组件sveltePopup svelte.js状态管理 svelte也提供了状态管理工具svelte/store,可做一些简单的封装...let sel = window.getSelection() if(sel && sel.rangeCount > 0) { return sel.getRangeAt...} // 删除编辑器内容 export async function deleteHtml() { let range let sel = window.getSelection
W3C文档对象模型(DOM)提供了一个平台和语言无关的应用程序编程接口(API),用于表示和操作存储在HTML和XML文档中的信息。 通过使用DOM,程序员可以访问、添加、删除或更改元素和内容。...封装是面向对象编程的基本特性,它使程序员能够限制对某些对象组件的未授权访问。 在此定义下,对象以公共访问方法的形式提供接口作为与其数据交互的方式。这样对象的内部表示不能直接被对象的外部访问。...Shadow root 是 shadow 树中最顶层的节点,是在创建 shadow DOM 时被附加到常规DOM节点的内容。具有与之关联的shadow root的节点称为shadow host。...可以在W3C找到Shadow DOM v1的完整描述。 浏览器对Shadow DOM v1的支持 在撰写本文时,Firefox和Chrome已经完全支持Shadow DOM v1。...Shadow DOM API为我们提供了划分DOM范围的能力,从而为这个问题提供了一个优雅的解决方案。 现在,样式冲突不再是一个令人担忧的问题,选择器也不会失控。
前言 在官方最新版本的Matery主题版本中已经优化了代码块的问题,但在旧版本Hexo主题Matery中对hexo-prism-plugin只支持高亮显示,而且存在着许多的BUG。...比如新版本的hexo-prism-plugin已经支持了代码块的一键复制和收缩功能,如果不手动对旧版本Matery原有的代码做改动,则代码块显示会存在一些问题。 代码块优化 1....解决代码块复制内容不换行问题 Matery主题在开启复制版权且添加了版权信息后,会导致复制的所有内容换行失效,以下将解决这个问题。...if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') { newdiv.innerHTML = "" + newdiv.innerHTML + ""; } 至此,代码块的优化已经全部完成。
一、前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生... other common.js var ancestor = document.getElementById...执行 selection.selectAllChildren(parentNode) 时,parentNode的内容会被高亮,并且原来高亮的部分将被取消; 2. chrome下, selection.containsNode...IE5.5~8下没有Selection类型; 关于IE下的[object Selection]和[object MSSelection]类型(详细可浏览《JS魔法堂:细说Selection和MSSelection...IE5.5~IE8仅有[object MSSelection]类型 获取方式: document.selection 注意:document.selection是IE的特有属性。
实现分析 一般的实现方式是整个页面内容html存起来,用一些特殊标记表示已经高亮: // magic-highlight表示高亮,高亮'666' ` abc def</...html元素渲染即可 但是现在问题来了,我们这是一个现成的react页面,是一个详情页,页面的内容是多个接口返回填进去的: 标题1 {接口1返回} 标题2 {接口2返回} 我们如果高亮了接口2返回的内容,那就意味着接口2返回的内容里面有特殊标记: // before 12334666345 // after...对象,其中有一个getRangeAt方法可以获取range对象。...当选择完成,渲染了container,拿到它的ref引用,再setstate(当前container元素) 页面内操作完全没问题,但问题来了,当props改变,需要删除元素的时候,立刻报错了。
在本文中,我们将重点介绍JavaScript中的 innerHTML 属性,它是DOM(文档对象模型)的一部分,用于操作和更改HTML元素的内容。...DOM 是文档对象模型的缩写,它是HTML文档的编程接口,允许开发者通过编程方式访问、操作和更新HTML文档的内容和结构。...注意事项和安全性 使用 innerHTML 具有强大的功能,但也需要注意一些潜在的安全性和性能问题: 安全性: 直接使用 innerHTML 从用户输入中创建HTML内容可能导致跨站点脚本攻击(XSS...性能: 操作 innerHTML 会导致页面的重新渲染,这可能降低性能。当你使用 innerHTML 更新大段HTML内容时,浏览器必须重新解析和渲染整个内容,这可能会引起性能问题。...因此,在修改大段HTML内容时,最好使用其他DOM操作方法,例如 createElement 和 appendChild,以减轻性能负担。
例如,这里有一个 ,它具有 contentEditable 特性。该特性使我们可以聚焦和编辑元素。...当然,第三方脚本没有提供删除它的机制。 使用 MutationObserver,我们可以监测到我们不需要的元素何时出现在我们的 DOM 中,并将其删除。...还有一些其他情况,例如第三方脚本会将某些内容添加到我们的文档中,并且我们希望检测出这种情况何时发生,以调整页面,动态调整某些内容的大小等。 MutationObserver 使我们能够实现这种需求。...我们是否需要在每个地方都附加一个高亮显示调用,以在内容加载完成后,高亮内容中的代码。那很不方便。 并且,如果内容是由第三方模块加载的,该怎么办?...当我们停止观察时,观察器可能尚未处理某些更改。在种情况下,我们使用: observer.takeRecords() —— 获取尚未处理的变动记录列表,表中记录的是已经发生,但回调暂未处理的变动。
) 当前需求的拆解 按住shift + @ 的时候,弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是:高亮、携带用户ID、一键删除信息、不可以编辑。...文本框要随内容自适应高度 Android、IOS、Web显示多端一致。 具有扩张性,未来评论可能插入图片文件等.... 市面流行方案对比 ps: 方案有很多种方式,适合自己、适合团队的才是最佳实践。...$refs.editor)“ 使用ref的方式而不是ID的方式呢? 使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中,所以当您操作这个ref时,它不会干扰其他组件。...(不要问我为什么知道这个问题!!!)。 wangeditor的配置只支持固定高度,如果我们想支持文本框最小高度、文字随内容到最大高度xx时自适应滑动怎么做呢? <!...七、总结 不要放弃探寻、探究问题的本质。
凭借其模块化架构和富有表现力的 API,你可完全自定义以满足任何需求。 为什么需要 Quill 内容创建从一开始就是网络的核心。...令人惊讶的是,大多数富文本编辑器不知道用户编写了什么文本。这些编辑器通过和 Web 开发人员一样的方式来查看内容:DOM。...功能不仅是跨平台的考虑因素,同时也需要考虑用户和开发人员的体验。如果某些内容在 OSX 上的 Chrome 中生成特定标记,则会在 IE 上产生相同的标记。...placeholder Default:None 编辑器内容为空时显示的占位符。 readOnly Default:false 是否以只读模式实例化编辑器。...设置为自适应高度时,需要修复滚动跳跃的问题,并且由另一个父容器负责滚动。
这是我参与「掘金日新计划 · 10 月更文挑战」的第26天,点击查看活动详情 事件与事件流 事件最早是在 IE3 和 NetscapeNavigator2 中出现的,当时是作为分担服务器运算负担的一种手段...通过允许一些功能在客户端处理,以节省到服务器的往返时间。 JavaScript 中采用一个叫做事件监听器的东西来监听事件是否发生。...事件流 当浏览器发展到第 4 代时(IE4 及 Netscape4),浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件? 想象在一张纸上的一组同心圆。...,由于事件冒泡的存在,当我们点击 div 时,所有祖先元素的点击事件也会被触发。... true 表示使用事件捕获的方式来触发事件。
领取专属 10元无门槛券
手把手带您无忧上云