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的特有属性。
在本文中，我们将重点介绍JavaScript中的 innerHTML 属性，它是DOM（文档对象模型）的一部分，用于操作和更改HTML元素的内容。...DOM 是文档对象模型的缩写，它是HTML文档的编程接口，允许开发者通过编程方式访问、操作和更新HTML文档的内容和结构。...注意事项和安全性 使用 innerHTML 具有强大的功能，但也需要注意一些潜在的安全性和性能问题： 安全性: 直接使用 innerHTML 从用户输入中创建HTML内容可能导致跨站点脚本攻击（XSS...性能: 操作 innerHTML 会导致页面的重新渲染，这可能降低性能。当你使用 innerHTML 更新大段HTML内容时，浏览器必须重新解析和渲染整个内容，这可能会引起性能问题。...因此，在修改大段HTML内容时，最好使用其他DOM操作方法，例如 createElement 和 appendChild，以减轻性能负担。
实现分析 一般的实现方式是整个页面内容html存起来，用一些特殊标记表示已经高亮: // magic-highlight表示高亮，高亮'666' ` abc def</...html元素渲染即可 但是现在问题来了，我们这是一个现成的react页面，是一个详情页，页面的内容是多个接口返回填进去的： 标题1 {接口1返回} 标题2 {接口2返回} 我们如果高亮了接口2返回的内容，那就意味着接口2返回的内容里面有特殊标记： // before 12334666345 // after...对象，其中有一个getRangeAt方法可以获取range对象。...当选择完成，渲染了container，拿到它的ref引用，再setstate(当前container元素) 页面内操作完全没问题，但问题来了，当props改变，需要删除元素的时候，立刻报错了。
例如，这里有一个 ，它具有 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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
