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

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

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


例:

点击不失去焦点跳转开始和结束,避免失去焦点使用preventDefault

<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>
  <button id='start-id'>jumpt start</button>
  <button id='end-id'>jumpt end</button>
</body>
<script type="text/javascript">
  function printSelection() {
    const selection = window.getSelection()
    console.log('selection', selection)
    console.log('selection.toString()', selection.toString())
    console.log('selection.getRangeAt(0)', selection.getRangeAt(0))
  }
  function jumpStart() {
    let range = window.getSelection().getRangeAt(0);
    let textEle = range.commonAncestorContainer;
    range.setStart(range.startContainer, 0);
    range.setEnd(range.startContainer, 0);
  }
  function jumpEnd() {
    let range = window.getSelection().getRangeAt(0);
    let textEle = range.commonAncestorContainer;
    range.setStart(range.startContainer, textEle.length);
    range.setEnd(range.endContainer, textEle.length);
  }
  window.onload = function() {
    document.getElementById('start-id').addEventListener('click', function(e) {
      jumpStart()
    })
    document.getElementById('start-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
    
    document.getElementById('end-id').addEventListener('click', function(e) {
      jumpEnd()
    })
    document.getElementById('end-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
  }
</script>

效果如下图:

💖 设置选取range

Selection.addRange()

概述

向选区(Selection)中添加一个区域(Range)。

语法

sel.addRange(range)

例子:

失去焦点之后恢复选区

<body>
  <blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
    <b>yma16</b>
  </blockquote>
  <cite contenteditable="true">-- Write your own name here</cite>
  <br>
  <button id='print-id'>console.log(getSelection)</button>
  <br>
  <br>
  <button id='start-id'>jump start</button>
  <button id='end-id'>jump end</button>
  <button id='focus-id'>focus content</button>
</body>
<script type="text/javascript">
  const config = {
    selection: null
  }
  function printSelection() {
    const selection = window.getSelection()
    range = document.getSelection().getRangeAt(0).cloneRange();
    config.cloneRange = range;
    console.log('selection', selection)
    // console.log('selection.toString()', selection.toString())
    // console.log('selection.getRangeAt(0)', selection.getRangeAt(0))
  }
  function jumpStart() {
    let range = window.getSelection().getRangeAt(0);
    let textEle = range.commonAncestorContainer;
    range.setStart(range.startContainer, 0);
    range.setEnd(range.startContainer, 0);
    range = document.getSelection().getRangeAt(0).cloneRange();
    config.cloneRange = range;
  }
  function jumpEnd() {
    let range = window.getSelection().getRangeAt(0);
    let textEle = range.commonAncestorContainer;
    range.setStart(range.startContainer, textEle.length);
    range.setEnd(range.endContainer, textEle.length);
    range = document.getSelection().getRangeAt(textEle.length).cloneRange();
    config.cloneRange = range;
  }
  function focusContent() {
    document.getSelection().removeAllRanges(); //把没用的Ranges删除
    console.log('config.cloneRange',config.cloneRange)
    document.getSelection().addRange(config.cloneRange); //恢复Range
  }
  window.onload = function() {
    document.getElementById('print-id').addEventListener('click', function(e) {
      printSelection()
    })
    document.getElementById('print-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
    document.getElementById('start-id').addEventListener('click', function(e) {
      jumpStart()
    })
    document.getElementById('start-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
    document.getElementById('end-id').addEventListener('click', function(e) {
      jumpEnd()
    })
    document.getElementById('end-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
    document.getElementById('focus-id').addEventListener('click', function(e) {
      focusContent()
    })
    document.getElementById('focus-id').addEventListener('mousedown', function(e) {
      e.preventDefault()
    })
  }
</script>

效果如下:

⭐总结

Contenteditable属性

Contenteditable是一种HTML属性,用于指定页面中的元素是否可以编辑。以下是Contenteditable的总结:

  1. Contenteditable属性可以应用于HTML元素上,如div、span、p、h1等等。
  2. 当Contenteditable属性设置为true时,用户可以编辑元素内的文本、图像等内容。
  3. Contenteditable属性的取值包括true和false,分别表示可编辑和不可编辑。
  4. Contenteditable属性可以通过JavaScript来动态修改。
  5. Contenteditable属性的兼容性很好,支持大多数现代浏览器。
  6. 虽然Contenteditable属性很方便,但也存在一些潜在的安全问题,因此应该谨慎使用。

富文本编辑器

富文本编辑器是一种允许用户编辑带有样式和格式的文本的编辑器。它与普通文本编辑器的区别在于,它允许用户使用各种字体、颜色、大小、加粗、斜体、下划线、超链接、图片等来设计和呈现文本内容。其原理主要包括以下几个方面:

  • DOM操作:富文本编辑器通过操作DOM树来实现文本样式和格式的改变。当用户在编辑器中输入或选择文本时,编辑器会将文本转换为DOM节点,并将节点添加到DOM树中。通过对DOM节点的增删改查,实现对文本样式和格式的修改操作。
  • 事件监听:通常情况下,富文本编辑器会监听用户的输入事件、鼠标点击事件和键盘事件等,以便及时捕捉用户的操作并做出相应的反应。
  • 样式和格式化:富文本编辑器通常内置了样式和格式化工具,比如字体、颜色、大小、加粗、斜体、下划线、超链接等,可以通过这些工具来控制文本的样式和格式。
  • 插件和组件:富文本编辑器可以通过插件和组件来扩展其功能,比如图片上传组件、表格插件、代码高亮插件等,可以让编辑器满足更多的需求。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
1天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
2天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
22 5
|
2天前
|
缓存 前端开发 JavaScript
【JavaScript】JavaScript 中的闭包:从入门到精通
【JavaScript】JavaScript 中的闭包:从入门到精通
8 0
|
2天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
16 1
|
2天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
19 1
|
2天前
|
JavaScript 安全 前端开发
【Node.js】从入门到精通(一)—— fs 模块全解析
【Node.js】从入门到精通(一)—— fs 模块全解析
6 0
|
2天前
|
JavaScript 前端开发 物联网
【Nodejs】从入门到精通 —— Node.js 基础知识与常用命令
【Nodejs】从入门到精通 —— Node.js 基础知识与常用命令
19 0
|
2天前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
8 1
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
6天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1