文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

sublime学习笔记

1 sublime的几个优点 1.操作简单上手快 2.支持多点编辑：ctrl + 光标 3.基于Package Control强大的包管理功能 4.闪电一样的查找速度。...即使纯文本界面的 vim 都无法达到这样的速度。 5.深度可定制。所有的配置内容也都像 vim 一样以纯文本的形式保存在一个类似于 .vim 的目录之中。透明和分享带来的好处无限。...6.快速打开文件：ctrl + p 7.命令行面板：ctrl + shift + p 8.可启用vim模式 9.已经形成事实标准，很多其他的编辑器中都可以使用类似的快捷键。...第三行就是要插入的代码片，${1}代表的是第一个光标位置，代码片会默认选中this，当按下tab之后，会选中${2}中的snippet ： 定义了触发补全的字符串。...Explorer/iexplore.exe", "extensions":".*" } } ] 其中“keys”是指定的快捷键，可自定义，application

1.4K60

最新最全自己动手做一个富文本编辑器(附源码 api)

我们来用大白话说一下富文本编辑器原理 将一个div设置属性 contenteditable="true" 设置加粗,加横线,放大字体等效果 使用 document.execCommand('bold...insertParagraph: 在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.) insertText: 在光标插入位置插入文本内容或者覆盖所选的文本内容。...italic: 在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I ) justifyCenter: 对光标插入位置或者所选内容进行文字居中。...justifyFull: 对光标插入位置或者所选内容进行文本对齐。 justifyLeft: 对光标插入位置或者所选内容进行左对齐。...最后附上我实现的初版富文本编辑器,最终版是给公司使用的,这里就不再给大家 展示看了

3.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    打字机效果的实现与应用

    前言 在 web 应用中，模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用...初始文字是全部在页面上的，只是容器的宽度为 0，设置文字超出部分隐藏，然后不断改变容器的宽度； 设置 border-right，并在关键帧上改变 border-color 为 transparent，右边框就像闪烁的光标了...优点是简单，缺点也是有的，首先我们要先获得文本的宽度，上面的截图就是因为宽度写错了，导致光标在文字后面，然后只支持 1 行。若想要支持多行，就得使用 JavaScript 了。...，只需把要展示的文本进行切割，使用定时器不断向 DOM 元素里追加文字即可，同时使用::after 伪元素在 DOM 元素后面产生光标闪烁的效果。...将页面上的输入值，设置到 state 中，然后再使用 vue 中的 watch，监听输入值的变化，将 markdown 解析成 HTML 插入到页面中。

    3.3K20

    2023最全vim编辑器教程(详细、完整)-编辑器之神

    一、vi和vim介绍 vi和vim是两款常用的文本编辑器。vi是Unix系统中最早的文本编辑器之一，vim是vi的改进版本。 vi具有简单、高效的特点，可以在终端中使用。...它具有多种模式，包括命令模式、插入模式和底行模式。在命令模式下，用户可以执行各种编辑操作，如移动光标、删除字符、复制粘贴等。插入模式下，用户可以输入文本。...： i 在光标所在字符前开始插入 a 在光标所在字符前开始插入 o 在光标所在行的下面另起一行开始插入 I 在光标所在行的行首开始插入，若行首有空格则在空格后插入 A 在光标所在行的行尾开始插入 O 在光标所在行的上面另起一行开始插入...) 2.简易计算器 当编辑文件中需要用计算器计算时，不需要退出文件，可以使用vim的简易计算器完成计算； 使用方法： 在编辑模式下键盘ctrl+r，然后键盘输入符号=，光标就会移动到末行，键盘输入计算格式后回车...； 注意：对于同一配置项，当个人配置存在此配置项时遵循个人配置，否则遵循全局配置； 2.异常退出 编辑中的文件未保存直接退出(按终端右上角的叉或断电等)，这就是异常退出；异常退出会产生一个隐藏的交换文件

    5.5K50

    【实战】我是如何在输入框实现@ At功能的

    ) 当前需求的拆解 按住shift + @ 的时候，弹出通知列表 选择时 @的用户标签插入当前的光标位置中 生成@的用户标签的规则是：高亮、携带用户ID、一键删除信息、不可以编辑。...$refs.editor)“ 使用ref的方式而不是ID的方式呢？ 使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中，所以当您操作这个ref时，它不会干扰其他组件。...code // 编辑的文本的时候记录光标。...contents.length) { const index = contents.length - 1 // 在文本中拆入换行符号兼容...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset

    3.7K20

    掌握这些快捷键，提升你的编程效率！

    在开发过程中，高效地使用快捷键可以显著提升你的工作效率。本文将为大家介绍一些常用的快捷键，涵盖执行代码、行操作、移动光标、查看源码、编辑等多种操作。...+ B: 进入光标所在的方法/变量的定义 Ctrl + O: 选择可重写的方法 Ctrl + I: 选择可继承的方法 Ctrl + /: 注释光标所在行代码 Ctrl + F1: 显示错误信息 Ctrl...Shift + End: 选中光标到当前行尾位置 `Shift + Home `: 选中光标到当前行头位置 Shift + Enter: 在当前行下插入新行 Shift + Backspace...: 删除光标前的代码 Shift + 左方向键: 向左选中文本 Shift + 右方向键: 向右选中文本 Shift + 前方向键: 向前选中文本 Shift + 后方向键: 向后选中文本...Ctrl + Shift + E: 显示最近编辑文件 Ctrl + Shift + Backspace: 跳转到上次编辑的地方 Ctrl + Shift + Insert: 选择剪贴板内容并插入 Ctrl

    67010

    项目中遇到的bug（web前端-持续更新）

    input放在a标签里面单击不能获取input的光标（IE环境下） 双击才可以获得焦点，目前有的解决方案： 不要给a标签添加href属性； 不要在外面套上a标签。...隐藏input标签的光标 项目需求：input值json加载，只读+光标隐藏，通用的解决方案有其他标签模拟，但是不能改input 所以解决方案为给input加下面这两个属性： //只读 readonly...="readonly" //隐藏光标 unselectable="on" 返回私有数组 返回数组的一个副本，这样改动就不会影响原数组，只是副本而已 var array = (function...>Johndiv> div>hey hey JOHN hey heydiv> $('div:Contains("john")') //会选择到两个div 当一个变量被声明后，扩充其属性并不会改变原数据类型...complete') { return; } //load事件在win上，

    1.3K20

    【富文本】268- 富文本原理了解一下？

    div 中我们就可以对其进行任意编辑了。... 这是不可编辑的 div> 该属性最早是在 IE 上实现的（厉害哦?）...document.execCommand 方法 既然我们可以对上面的 div 随意编辑，那具体怎么编辑呢，目前好像也还是只能输入文本，要怎样才能进行其他操作呢（比如加粗、倾斜、插入图片等等）?？...这个知识点是很重要的，因为它让我们有了操纵光标的能力（比如插入内容之后设置光标的位置），不过这篇文章中我并没有去深入它，只是浅出?。 目标 开篇一顿扯，下面让我们抓紧时间做一个属于自己的富文本吧?...另外一种方法就是在插入图片之前先对图片进行处理（比如多一步类似裁剪的功能）再上传，这样就可以不用在编辑区里面处理图片啦，嘿嘿，目前我就想到这两种方案了，实际工作中采用的是第二种方式，因为产品的需求不止于旋转

    2.4K40

    Edge 拥抱 Chromium 对前端工程师意味着什么？

    这些元素在一起使用，可以生成一个显示和隐藏内容的简单小部件。...它允许你在文本框输入字符时设置闪烁光标的样式。 # 8位十六进制颜色表示法 在代码库中保持一致性很重要。这包括固定使用 RGB、十六进制或 HSL 颜色格式中的某一个。...用户体验研究表明，通常应该避免使用占位符文本。但是如果你用了占位符文本，可以很方便的根据用户是否在 input 中输入文本而有条件地应用样式。...Chris 文章中更全面的解释值得一读。 不幸的是，仍然有某些错误和其他影响可访问性的浏览器实现。...魔法独角兽彩色字体中的"please"字样 # 其它浏览器会怎样？ 不可否认，Edge 并不是最后一个低标准浏览器。Internet Explorer 始终不支持本文提到的所有功能。

    1.9K30

    常用的vim命令总结

    常用的命令：分类一下，无非是编辑相关的，移动，复制，粘贴，插入，删除等操作。 窗口相关的，多窗口，窗口分割和tab标签。 命令执行相关的以及配合cscope和ctag函数间查找和跳转的。...将光标放到任意符号上，然后通过 % 来移动到和这个符号匹配的符号上，% 还可以正确的识别括号的嵌套层数，总是移动到真正匹配的位置上。...上一节我们讲到了VIM中的移动，既然已经能够在屏幕和光标间游刃有余了 从光标修改到本行末尾 C 功能同上 c0 从光标修改到本行开头...，都是从光标修改到行尾，d+a达到相同效果 c0和d0+i效果一样，区别是少输入一次 cc和S效果也是一样，其实S是属于插入的范畴，这里类似，所以一起讲了 再来是s，它会删除光标处的字符再插入，效果等同于...操作相同文本的时候复制尤其有效，在Windows中我们都习惯了先用鼠标选择文本 而Vim下则不用那么麻烦，你甚至可以使用可视模式操作，但这里先略过 我在这一节主要说说命令模式下的复制 在讲复制之前我要先说一个简单到不行的命令

    2.2K10

    前端富文本基础及实现

    例如： 富文本编辑器中的富文本，是由红色框中带有语义化标签和内联样式的 html 渲染实现的。通过富文本编辑器，即可实现富文本的编写、展示。...该方式是 IE 最早实现的。使用方式是在一个元素上添加 contenteditable 属性并设置为 true，然后该元素会立即被用户编辑。...Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。...标签，如 insertImage 在光标位置插入图片 图片的 URL 链接 insertParagraph 在光标位置插入元素 null italic 切换选中文本的斜体样式 null styleWithCSS...将这些内容汇总即可实现一个简单的前端富文本编辑器。 下方附上本文内容汇总的代码 demo ，内含基于 iframe 和 div 元素分别实现的富文本编辑器，功能简单，供读者参考。

    5.8K50

    【Web技术】421- 富文本原理介绍

    div 中我们就可以对其进行任意编辑了。... 这是不可编辑的div> 该属性最早是在 IE 上实现的（厉害哦?）...document.execCommand 方法 既然我们可以对上面的 div 随意编辑，那具体怎么编辑呢，目前好像也还是只能输入文本，要怎样才能进行其他操作呢（比如加粗、倾斜、插入图片等等）?？...这个知识点是很重要的，因为它让我们有了操纵光标的能力（比如插入内容之后设置光标的位置），不过这篇文章中我并没有去深入它，只是浅出?。 目标 开篇一顿扯，下面让我们抓紧时间做一个属于自己的富文本吧?...另外一种方法就是在插入图片之前先对图片进行处理（比如多一步类似裁剪的功能）再上传，这样就可以不用在编辑区里面处理图片啦，嘿嘿，目前我就想到这两种方案了，实际工作中采用的是第二种方式，因为产品的需求不止于旋转

    1.3K20

    IDEA 中常用快捷键

    或 复制选择内容，并把复制内容插入光标位置下面 （必备） Ctrl + W 递进式选择代码块。...Ctrl + O 选择可重写的方法 Ctrl + I 选择可继承的方法 Ctrl + + 展开代码 Ctrl + - 折叠代码 Ctrl + / 释光标所在行代码，会根据当前不同文件类型使用不同的注释符号...显示各类浏览器打开目标选择弹出层 Alt + F3 选中文本，逐个往下查找相同文本，并高亮显示 Alt + F7 查找光标所在的方法 / 变量 / 类被调用的地方 Alt + F8 在 Debug...弹出模板选择窗口，将选定的代码加入动态模板中 Ctrl + Alt + H 调用层次 Ctrl + Alt + B 在某个调用的方法名上使用会跳到具体的实现处，可以跳过接口 Ctrl + Alt...） Ctrl + Shift + 左键单击 把光标放在某个类变量上，按此快捷键可以直接定位到该类中 （必备） Ctrl + Shift + 左方向键 在代码文件上，光标跳转到当前单词 / 中文句的左侧开头位置

    1.9K00

    深感一无所长，准备试着从零开始写个富文本编辑器

    实际上这个效果就是使用零宽字符来实现的，在行内容的末尾后面插入零宽字符，就可以做到末尾的文本选中效果。实际上这个效果在word中更常见，也就是额外渲染的回车符号。...在下面的例子中，line-1是无法将光标放置在@xxx内容后的，虽然我们能够将光标放置之前，但此时光标位置是在line node上，是不符合我们预期的文本节点的。...编辑器的情况下，直接按下回车键，在Chrome中的表现是会插入div>div>，而在FireFox(中的表现是会插入，IE中的表现是会插入。...在有文本的编辑器中，如果在文本中间插入回车例如123|123，在Chrome中的表现内容是123div>123div>，而在FireFox中的表现则是会将内容格式化为div>123div>文本的编辑器中，如果在文本中间插入回车后再删除回车，例如123|123->123123，在Chrome中的表现内容会恢复原本的123123，而在FireFox中的表现则是会变为div>123123

    92610

    Visual Studio 2008 每日提示(十七)

    #161、在解决方案里显示（或不显示）编辑器中打开的文件 原文链接:How to have the Solution Explorer always show (or not show) the file...可以按Ctrl+/，光标就会定位到查找的“下拉组合框”，同时在“下拉组合框”内会自动插入一个“>”符号，在“>”后面输入命令即可。...either a tool window or a dialog 操作步骤： 1、按Ctrl+/，光标就会定位到查找的“下拉组合框”。...如果未选中，则所有有关配置管理的项都会隐藏 1、在标准工具栏不可用。...box 操作步骤： 如果你在不受信任的路径上比如UNC （比如\\server\folder）创建项目，就会有个提示，如下图 如果你想去掉这个消息，操作如下 菜单：工具+选项+环境+常规，不选中“

    1.8K80

    Linux系统编程：（七）Vim 编辑器完全指南：从入门到精通的全方位实战教程

    一、Linux 编辑器 - Vim 使用概述 在 Linux 系统中，文本编辑器种类繁多，从简单的 nano、cat 到功能复杂的 Vim、Emacs，不同编辑器适用于不同场景。...核心功能：输入文本内容，与普通文本编辑器的编辑状态类似。 操作特点：底部状态栏会显示-- INSERT --标识，此时输入的字符会直接插入到文本中，按ESC键可返回命令模式。...a：在光标下一个位置插入文本（光标向右移动一位，新输入的字符插入到光标原来的位置右侧）。 o：在光标所在行的下方插入新行，光标定位到新行的行首并进入插入模式。...移动光标到love的l上，按cw输入like：将love替换为like，文本变为Hello Version I like Linux!，自动进入插入模式，按ESC返回。...let g:ale_sign_error='✗' " 错误标识（可自定义符号） let g:ale_sign_warning='⚠' " 警告标识（可自定义符号） " 为C/C++配置clang-tidy

    1.1K40

    《从 Vim 新手到“键圣”：我的手指进化史》

    是一个模态（多模式）文本编辑器，不同模式下键盘操作的功能完全不同。...命令模式（Normal Mode）—— Vim 的「战斗状态」 如何进入：启动 Vim 默认进入，或从其他模式按 Esc 核心功能： 光标移动：h（左）、j（下）、k（上）、l（右） 文本操作：...插入模式（Insert Mode）—— 真正的「编辑状态」 如何进入：命令模式下按 i（光标前插入）、a（光标后插入）、o（新行插入） 核心功能： 自由输入文本，像普通编辑器一样打字 组合快捷键...2.1 vim下各模式的切换 【命令模式】切换至【插入模式】 输入「i」：在当前光标处进入插入模式。 输入「a」：在当前光标的后一位置进入插入模式。 输入「o」：在当前光标处新起一行进入插入模式。...光标移动（手不离主键盘区） 命令 功能说明 记忆技巧 h j k l 左、下、上、右移动（←↓↑→） 方向键替代 0 或 ^ 跳转到行首（^ 忽略空格） ^ 像“起点”符号 $ 跳转到行尾 $ 像“结尾

    33610

    MacOS VSCode快捷键

    P / F1 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口 基本 Command + X 剪切（未选中文本的情况下...，剪切光标所在行） Command + C 复制（未选中文本的情况下，复制光标所在行） Option + Up 向上移动行 Option + Down 向下移动行 Option + Shift...+ Enter 上一行插入 Command + Shift + \ 跳转到匹配的括号 Command + [ 减少缩进 Command + ] 增加缩进 Home 跳转至行首 End 跳转到行尾...Option + 点击 插入多个光标 Command + Option + Up 向上插入光标 Command + Option + Down 向下插入光标 Command + U 撤销上一个光标操作...Option + Shift + I 在所选行的行尾插入光标 Command + I 选中当前行 Command + Shift + L 选中所有与当前选中内容相同部分 Command + F2

    2.8K10

    Windows 罕见技巧全集3

    Internet Explorer主键下发现一个名为“DownLoad Directory”的字符串值。...此法经过本人的测试。微软拼音输入法也支持繁体输入，其它繁体输入法也不少，你可以试试。还有一种方法，在文本文件中输入繁体文件，然后粘贴到ICQ上。...首先在中文Word2000菜单中选择“工具栏选项中的“自定义命令，进入“自定义编辑“界面，然后在“自定义编辑“界面中选择命令卡，并移动光标条到类别栏中的“字体项“，在“字体项“ 有字体，此时就可以通过使用鼠标直接将相应的字体拖曳到工具栏上...65.在Word 2000中编辑各种格式公式 首先需要将光标停在需要插入公式的地方，然后执行菜单“插入→对象”命令，选择“Microsoft 公式 3.0”（如果没有该选项，就必须通过“添加...75.将光标快速返回到Word文档的上次编辑点 按下“Shift+F5”组合键，就可以将插入点返回到上次编辑的文档位置，当再次按下“Shift+F5”组合键时，插入点会返回当前的编辑位置。

    2.2K10

    富文本vue-quill-editor结合el-element实现自定义上传组件

    解决思路 将图片先上传至服务器，再将图片链接插入到富文本中 图片上传的话可以使用element或者iview，这里我以iview举例 图片上传区域要隐藏，自定义vue-quill-editor的图片上传...，点击图片上传时调用iview或者element的图片上传，上传成功后在富文本编辑器中显示图片 步骤 零、安装使用 npm install vue-quill-editor --save main.js...{ // 提示信息，需引入Message Message.error('图片插入失败') } }, } 三、假如需要多个富文本编辑器...可能不止一处地方用到，比如添加完成后还有编辑功能，那就复制一份文件上传和富文本编辑：两个富文本用不同的ref标记，在各自配置中调用各自的文件上传；文件上传成功也使用不同的方法名称，里面调用各自的富文本编辑器...解决的思路也相同：在vue-quill-editor中自定义按钮，点击使用iView的文件上传，然后将地址赋值给a标签的href属性，插入到富文本光标处。

    3.8K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券