前端 富文本编辑器原理——从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

目录
相关文章
|
1天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
10天前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
12 0
|
10天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
12天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
9 0
前端基础学习(一)HTML入门
|
19天前
|
Web App开发 前端开发
CSS3入门
该内容介绍了CSS3的基本概念和三种样式表导入方式:行内式、内嵌式和链入式。CSS用于分离网页内容和表现形式,常见浏览器如Chrome支持CSS。样式规则包括选择器(如标记、类和ID选择器)和属性值对。通过实例展示了不同导入方式的效果,如行内样式直接在HTML元素中设置,内嵌样式写在`&lt;head&gt;`标签内的`&lt;style&gt;`标签中,链入式则将样式保存在外部CSS文件并用`&lt;link&gt;`标签引用。文章还展示了标记、类和ID选择器的应用,分别影响对应的所有标记、类名或ID名。
|
19天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
24天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
28 1