在空白的 HTML 文档中嵌入一个 iframe，并将 designMode 属性设置为 on，文档就会变成可编辑的，实际编辑的则是 iframe 内的 body 元素。...Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。...如想删除后插入，可获取新的 Selection 对象，利用此时位置所在 dom 元素的方法插入对应的文字、元素。...标签，如 insertImage 在光标位置插入图片 图片的 URL 链接 insertParagraph 在光标位置插入元素 null italic 切换选中文本的斜体样式 null styleWithCSS...编辑区域可通过获取编辑元素的 innerHTML 拿到对应富文本数据，存入数据库。 网络请求的富文本数据设置为富文本容器的 innerHTML，即可展示富文本内容。
) 当前需求的拆解 按住shift + @ 的时候，弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。...// 需要在字符前插入一个空格否则、在换行与两个@标签连续的时候导致无法删除标签 let spanNode = document.createElement('span'); spanNode.innerHTML...contents.length) { const index = contents.length - 1 // 在文本中拆入换行符号兼容...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset...这个功能只是在开发中挤出来的、很多东西写的不够好、不够完善，希望本文能帮助您在开发中节约一点时间。也欢迎大家提出踊跃的反馈、希望能与大家共进步，加油～
1.简介 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。...JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。...>变量的命名规范：1驼峰命名法(一个或者多个单词组成，第一个单词全部小写，后面每个单词首字母大写)；2见名知意 >变量的使用规则：先声明，后使用 > JavaScript...： test.innerHTML 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。...test.innerText 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
追加节点 要想在界面看到, 还得插入到某个父元素中 1....，生成渲染树(Render Tree) 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息(位置，大小) 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制...重绘和回流(重排) 会导致回流的操作： 页面的首次刷新 浏览器的窗口大小发生改变 元素的大小或位置发生改变 改变字体的大小 内容的变化（如：input框的输入，图片的大小) 激活css伪类(如：:hover...发布内容不能为空 // 点击button后判断 内容为空 则提示不能输入为空 并直接return 不能为空 // 使用字符串.trim()去掉首尾空格 // 并将表单value值设置为空字符串 同时字数设置为...重置表单域内容为空 text.value = '' useCount.innerHTML = 0 }) ---- 本节单词: parentNode children nextElementSibling
你可以在文件中移动并且修改内容，剪切、复制和粘贴文件的一部分，同时发出命令执行更多操作（按ESC键进入命令模式） 插入模式：插入模式用于在给定的文档位置插入文本（按i键进入插入模式） 我如何知道我正使用哪种...i–在光标之前插入a–在光标之后插入I–在光标所在行的开头插入。当光标位于行中间时，这个键很有用A–在光标所在行的末尾插入。...o–在光标所在行的下面插入新行O–在光标所在行的上面插入新行ea–在单词的末尾插入拷贝、粘贴和删除一行yy–复制一行p/P–将内容粘贴到光标之后/之前dd–删除一行dw–删除一个单词在Vim中搜索和替换匹配的模式...:%s/旧模式/新模式/gc–逐个询问是否文件中的旧模式替换为新模式如何在Vim编辑器中跳转到特定行你可以根据需求以两种方式达到该目的，如果你不知道行号，建议采用第一种方法。...通过打开文件并运行下面的命令来显示行号 :setnumber当你设置好显示行号后，按:n跳转到相应的行号。
nJ:连接后面的n行 u:撤销上一次操作 U:撤销当前行的所有修改 ctrl+r:对撤消的撤消 i 在光标前插入 I 在行首插入 a 在光标后插入 A 在行末插入 o:在当前行的下面另起一行...:放弃更改，然后相当于重新打开 ：help:帮助，可用ZZ退出帮助窗口 vim中Nyy可以复制光标后的N行。有时我们不容易得出行数，这时可以用做标记的方法来制定复制范围： 1....重复执行命令 :10,$ w test2.cpp 取行10到最后一行内容，保存到test2.cpp :r class/User.hpp 读取文件中的内容，插入到当前行的后面 dw:删除一个单词...粘贴最后第二次的删除的内容 yy:复制一行 yaw： 复制一个单词,光标在单词任意位置 ynw： 复制N个单词 ynj: 向下复制n行 ynk: 向上复制...-：到上一行的第一个字符。 n|：移动到当前行的第n列 e：移到单词的结尾 E：移到单词的结尾（忽略标点符号） ( ) { } [[ ]] 这几个对编程作用不大，可忽略。
在普通模式下，从键盘输入任何字符都被当作命令来解释。普通模式下没有任何提示符，输入命令后立即执行，不需要回车，而且输入的字符不会在屏幕上显示出来。 编辑模式 编辑模式主要用于文本的编辑。...- 移动到上个单词开头(单词含标点) ge - 移动到上个单词结尾 gE - 移动到上个单词结尾(单词含标点) % - 跳转到配对的符号(默认支持的配对符号组:: '()', '{}', '[]' -...控制 Ctrl + n - 在插入模式下，在光标之前插入自动补全的下一个匹配项 Ctrl + p - 在插入模式下，在光标之前插入自动补全的上一个匹配项 Ctrl + rx - 插入寄存器 x 的内容...yiw - 复制光标处的单词 yaw - 复制光标处的单词及其前后的空格 y$ or Y - 复制, 从光标位置到行末 p - 在光标后粘贴 P - 在光标前粘贴 gp - 在光标后粘贴并把光标定位于粘贴的文本之后... . - 上次插入的文本 - - 上次剪切的短于一行的文本 = - 表达式寄存器 _ - 黑洞寄存器 标记 :marks - 标记列表 ma - 设置当前位置为标记 a `a - 跳转到标记
通过设置，vim会自动检测文件中内容的类型，并以不同的颜色进行高亮显示，如注释变成蓝色，关键字变成褐色，而字符串变成红色等，与vi传统的黑白显示模式相比，vim更易读易用。...4.2.3 打开文件、保存文件和退出 vi 编辑器 存盘和退出、设置行号操作等功能，输入“：”进入底线模式。 在屏幕最下面一行将出现一个“：”符号。...（最常用） a：在当前光标所在的后一个位置插入，开始输入字符（最常用） o：在当前光标所在行的下面新创建一行，并在行的第一个位置开始输入字符。（最常用） 这并不是全部的进入方法，但却是最常用的。...如：3x，删除光标所在位置起的后3个字符 dw （常用） 从光标所在位置开始，向右删除单词。...下面内容中的符号“>”为键盘上的大于号，“<”为键盘上的小于号。
（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开） <input type="text...节点写入常用方式： 名称 描述 <em>innerHTML</em> 返回元素<em>中</em><em>的</em>html<em>内容</em>，通过赋值，可<em>设置</em>元素<em>中</em><em>的</em>html<em>内容</em> innerText 返回元素<em>中</em><em>的</em>文本<em>内容</em>，通过赋值，可<em>设置</em>元素<em>中</em><em>的</em>文本<em>内容</em> document.write...() 将html字符串写入到文档<em>中</em> （1）<em>在</em><em>div</em><em>中</em><em>插入</em>文字<em>内容</em>为“加油，我要通过C认证”<em>的</em>p元素，请补全横线处代码。.../script> 答案：<em>innerHTML</em> 此处需要<em>插入</em>一个p元素，<em>插入</em><em>的</em>值为字符串，所以需要使用可以解析html字符串<em>的</em>DOM属性，返回元素<em>中</em><em>的</em>html<em>内容</em>。...（3）<em>在</em>第一行元素<em>后</em><em>插入</em>第二行元素，请补全横线处代码。
1 捕获特定语法 生成AST的过程涉及到编译器的原理，一般经过以下过程： 语法分析 语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语，如“程序”，“语句”，“表达式”等等。...例如我们可以将以下这样的DOM进行捕获： 123 456789 捕获后我们或许可以得到这样的一个对象：...不是的，在这个过程中我们可以实现一些功能： 1. 排除无效DOM元素，并在构建过程可进行报错。 2. 使用自定义组件的时候，可匹配出来。 3. 可方便地实现数据绑定、事件绑定等功能。 4....AST生成模板 1 生成模板的方法 我们在捕获得到一个AST树结构后，会将其生成对应的DOM。...在这个过程中，最突出的也就是虚拟DOM，它解决了常见的局部数据更新的问题，例如数组中值位置的调换、部分更新。一般来说计算过程如下： 1. 用JS对象模拟DOM树。
可全文搜索你输入的关键字 # 斜杠 / 是正向往下搜索，? 是反向往上搜索你的关键字 # 或者使用 shift+* 或者 shift+# 可以自动匹配光标处的单词进行搜索 /想要搜索的内容 ?...，对于我们常见的正则比如： 特殊符号 描述 ^ 匹配输入字符串的开始位置，除非在方括号表达式中使用，当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。...这里的 i 表示插入 去除注释： 按 ctrl + v 进入可视模式 将所有注释符号选中 按下 x 或 d 按键，则会取消所有选中行注释 5.3 多行末尾追加内容 比如我们在敲代码过程中发现每一行末尾都少加了分号...（注意你当前在终端里）： exit 7.2 Vim 锁定 以前在 Windows 系统的时候，喜欢编辑完后按 Ctrl+s 来保存文档，这是个很好的习惯，但是在 Vim 中却不是了，因为这个操作在正常模式下会让你的...7.4 编辑二进制文件 对于一些二进制文件， 比如网络传输中我们要对接收到的数据进行字节分析,又比如分析码流文件如 h264 文件等，都需要查看二进制内容，vim 也提供二进制文件的查看和编辑功能: #
另外注意，本文所实现的代码只用于说明教学展示，并不适用于生产环境。代码托管这个 仓库。心急如焚的同学可以先去看代码，但本文会从最基础的内容开始解释。...3、实现可复用性 所以现在我们来想办法解决这个问题，让这个点赞功能具有较好的可复用的效果，那么你的同事们就可以轻松自在地使用这个点赞功能。 3.1 结构复用 现在我们来重新编写这个点赞功能。...在返回 DOM 元素之前会先给这个 DOM 元素上添加事件再返回。 因为现在 render 返回的是 DOM 元素，所以不能用 innerHTML 暴力地插入 wrapper。...4.2 重新插入新的 DOM 元素 上面的改进不会有什么效果，因为你仔细看一下就会发现，其实重新渲染的 DOM 元素并没有插入到页面当中。...div = document.createElement('div') div.innerHTML = domString return div } 6、总结 你到底能从文章中获取到什么
textNode = document.createTextNode("hello"); 获取文本节点 var textNode = div.childNodes[0]; 删除起始位置开始的num个值...textNode.deleteData(starNum,num); 尾部添加内容 textNode.appendData("后面哦"); 中间插入内容 te.insertData(1,"中间哦"); innerHTML...看出来了吧，innerHTML和innerText是有本质上的区别的，innerHTML写入的内容可以解析成标签，而innerText写入的内容只能当作是文本在浏览器中显示。...简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，而innerText只能修改文本值 总结 原生的DOM节点操作还是非常简单实用的，除了单词长了一点以外好像也没有什么明显的缺点...本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
本文内容概要： 1 获取标签 2 设置样式 3 获取/设置标签的内容 4 课程小结 5 课后练习 1 获取标签 在讲解获取标签之前，我们需要来理解一个概念，什么是对象（Object）？...注意：元素.style.属性中，“属性”只能接受把CSS属性（由一个以上单词组成，用“-”中划线连接的CSS属性）转成小驼峰命名的形式，如：font-size——>fontSize； 例如：eleObj.style.fontSize...当然可以，我们可以使用innerHTML属性实现修改或获取标签中的内容。...- 梦幻雪冰'; // 输出修改后的标签内容 console.log(desEle.innerHTML); // 利用innerHTML属性添加标签 introEle.innerHTML...代码分析： 获取到的标签是对象，通过对象.属性的形式来调用innerHTML属性，实现修改或获取标签的内容； innerHTML属性不仅仅可以添加文本内容，还可以添加HTML标签，如：introEle.innerHTML
复制和粘贴： 使用 yw 复制光标所在位置到单词末尾的内容，yy 复制整行。 使用 p 粘贴已经复制或删除的内容到光标位置后。 替换： 使用 r 替换光标所在位置的字符。...撤销和重做： 使用 u 撤销上一步操作，Ctrl + r 重做上一步操作的撤销。 更改： 使用 cw 更改光标所在位置到单词末尾的内容，c#w 更改指定数量的单词。...2.2.2插入模式（Insert mode） 在 Vim 编辑器中，插入模式（Insert Mode）是用于输入和编辑文本的模式。...在插入模式下，你可以直接在文本中插入、编辑和删除字符，就像在普通的文本编辑器中一样。 在插入模式下，你可以自由地编辑文本，直到按下 Esc 键退出插入模式，回到普通模式（Normal Mode）为止。...所谓的头文件展开，本质是在预处理的时候，将头文件内容拷贝至源文件 预处理器处理后的文件通常具有更大的体积，并且不包含注释和空行。
js alert in js’}); AppModel是我们注入的对象，“（）”中的内容是我们传递给客户端的数据。...新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式...1 功能； 增加了 多屏幕编辑 Markdown文章功能； 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间； 增加了 检查列表 功能。...+ F 替换：Ctrl/Command + G 合理的创建标题，有助于目录的生成 直接输入1次#，并按下space后，将生成1级标题。...如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; 生成一个适合你的列表
链接的第一部分格式 引用类型的链接的第一部分使用两组括号进行格式设置。第一组方括号包围应显示为链接的文本。第二组括号显示了一个标签，该标签用于指向您存储在文档其他位置的链接。..., 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。 插入图片Markdown语法代码：。...使用图形界面构建表，然后将生成的Markdown格式的文本复制到文件中。 对齐 您可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。...当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。 要创建脚注参考，请在方括号（[^1]）内添加插入符号和标识符。...在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本（[^1]: My footnote.）。您不必在文档末尾添加脚注。您可以将它们放在除列表，块引号和表之类的其他元素之外的任何位置。
括起公式（注意 $$ 后需要换行），公式会默认显示在行中间。...图片插入 插入图片除了使用插入语句外，还可以： ctrl+C/V 将网络图片、剪贴板图片复制到文档中 拖动本地图片到文档中 Typora 会自动帮你插入符合 Markdown 语法的图片语句，并给它添加...你可以在「文件 - 偏好设置 - 编辑器 - 默认换行符」中对此进行切换。 支持emoji 表情 在 Typora 中，你可以用 :emoji: 的形式来打出 emoji，软件会自动给出图形的提示。...②位置的下载或更新，在弹出的界面中选择下载。...配置 gitee，并设置为默认图床： token放置上述过程生成的序列号即可,重启 PicGO 软件（关闭后重新打开）。
删除 命令 功能 X 删除光标所在位置的字符 X 删除光标所在位置之前的一个字符 D 从光标开始到行末全部删除 dw 删除光标后的一个单词 dd 删除光标所在的一行 db 删除光标所在的前一个单词 前面学了移动...vim 中撤销 u 撤销刚才的操作 , 可以连续使用 U 撤销一行中的所有操作 ctrl + r 取消撤销的内容 对文件做了这么多操作后，头晕了，不知道编辑的是哪个文件了。...特殊符号 命令 功能 % 移动到配对的符号如当前光标在 ( 键入 % 可以自动移动到配对的 ) 同样适用于 [] 和 {} 这些功能在编程的时候特别有用。 ....复制、剪切、粘贴 在使用编辑器的时候最常用的应该算复制 , 剪切和粘贴了 命令 功能 Y 复制 , 如 yw 复制一个单词 yy 复制一行 P 粘贴 ( 光标后 ) P 粘贴 ( 光标前 ) 在 vi...first 切换到最前一个文件 :2next 切换到下二个文件 :args 可以显示多个编辑文件中当前所编辑的文件 :args 还有另外一个功能就是对打开的多个文件进行重新排序，排列方法很简单 , 在末行模式执行
通过修改你的主题或者从头开始创建一个新主题，你可以更进一步，然后把它贡献给我们的其他用户来享受。 2、多插入符号/多选 超级编辑功能最强大和直观的多插入符号编辑和多选功能在业务中。...6、可自定义的用户界面 我们的菜单系统从一开始就进行了重新构建，使其比以往任何时候都更具可定制性。我们可根据您的喜好定制新菜单。为自己设置丝带模式，以获得熟悉的外观和感觉。...2、句法高亮显示可配置，为 C/C++, VB, HTML 和 Java预配置 3、在特定列以硬回车自动换行，在现有文档的光标位置插入文件 4、可配置工具栏，分隔栏窗口、插入和叠印模式用于编辑。...6、查找和替换——按下 shift 键后，允许选择插入符和查找目标之间的文本，可替换选定区域内的所有内容。 7、文件内查找，文件内替换；自动行缩近。 8、制表符设置，支持自动换行。...10、在原文件目录内自动备份生成的文件，扩展名为（.BAK）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
