前端 富文本编辑器原理——从javascript、html、css开始入门(一)

简介: 前端 富文本编辑器原理——从javascript、html、css开始入门

⭐前言

大家好,我是yma16,本文分享关于前端 富文本编辑器原理——从javascript、html、css开始。

富文本编辑器

富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器

参考文档:https://w3c.github.io/selection-api/#abstract

⭐html的contenteditable属性

全局属性 contenteditable 是一个枚举属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的组件以允许编辑。

  • contenteditable boolean (false | true) 默认false
    简单理解,加上contenteditable ,html可以编辑具有input 输入的基本功能,所见即所得。
    例:
    html demo 标签配置contenteditable
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>富文本编辑器</title>
  </head>
  <style>
    blockquote {
      background: #eee;
      border-radius: 5px;
      margin: 16px 0;
    }
    
    blockquote p {
      padding: 15px;
    }
    
    cite {
      margin: 16px 32px;
      font-weight: bold;
    }
    
    blockquote p::before {
      content: '\201C';
    }
    
    blockquote p::after {
      content: '\201D';
    }
    
    [contenteditable='true'] {
      caret-color: red;
    }
  </style>
  <body>
    <blockquote contenteditable="true">
      <p>Edit this content to add your own quote</p>
    </blockquote>
    
    <cite contenteditable="true">-- Write your own name here</cite>
  </body>
</html>

效果如下,可以输入编辑html元素:

💖 输入的光标位置(浏览器获取selection)

getSelection() method

GetSelection ()方法返回一个 Selection 对象,该对象表示用户选择的文本范围或插入符号的当前位置。

⭐使用Selection.toString () 返回指定的文本

例:

<body>
  <blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
  </blockquote>
  
  <cite contenteditable="true">-- Write your own name here</cite>
  <button onclick="printSelection()">console.log(getSelection)</button>
</body>
<script type="text/javascript">
  const printSelection=()=>{
    const selection=window.getSelection()
    console.log('selection',selection)
    console.log('selection.toString()',selection.toString())
  }
</script>

效果如下:

⭐getRangeAt 获取指定索引范围

函数接受一个索引值

返回,其中

结束的索引值,endOffset

开始的索引值,startOffset

效果如下图:

💖 修改光标位置

调用 setStart() 和 setEnd() 方法,来修改一个光标的位置或拖蓝范围

Range.setStart()

Range.setStart() 方法用于设置 Range的开始位置。

如果起始节点类型是 Text、Comment 或 CDATASection之一,那么 startOffset 指的是从起始节点算起字符的偏移量。对于其他 Node 类型节点,startOffset 是指从起始结点开始算起子节点的偏移量。

如果设置的起始位点在结束点之下(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的起始位置。

startNode

startNode 用于设定 Range的起始位置。

startOffset

必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。

Range.setEnd()

Range.setEnd()

方法用于设置 Range的结束位置。

如果结束节点类型是 Text、Comment 或 CDATASection之一,那么 endOffset 指的是从结束节点算起字符的偏移量。对于其他 Node 类型节点,endOffset 是指从结束结点开始算起子节点的偏移量。

如果设置的结束点在起始点之上(在文档中的位置),将会导致选区折叠,起始点和结束点都会被设置为指定的结束位置。

endNode

endNode用于设定 Range的结束位置。

endOffset

必须为不小于 0 的整数。表示从endNode的结束位置算起的偏移量。

语法

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);


前端 富文本编辑器原理——从javascript、html、css开始入门(二)https://developer.aliyun.com/article/1492715

目录
相关文章
|
3月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
129 14
|
6月前
|
前端开发
|
6月前
|
前端开发
|
6月前
|
前端开发 JavaScript
|
6月前
|
XML 前端开发 JavaScript
|
6月前
|
前端开发 容器
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
197 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 UED
HTML解析原理概括(转载)
HTML解析原理   标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理    这我得加把劲了。我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了。
1107 0
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。