首页 > 其他分享 >js 选中文字修改:裁剪,加粗... 获得选中内容

js 选中文字修改:裁剪,加粗... 获得选中内容

时间:2023-02-14 10:36:17浏览次数:63  
标签:... const selObj Range js range 选中 styled return


js 选中文字修改:裁剪,加粗... 获得选中内容_API

使用以下两个api

​MDN Selection API​​​​MDN Range API​

需要 API

const Range = useCallback(() => {
const selObj = window.getSelection();
if (!selObj) return;
return selObj.getRangeAt(0);
}, []);

删除代码

const range = Range();
if (!range) return;
range.deleteContents();// 删除节点

加粗功能代码(修改 加入markdown 语法 ** ** 加粗)

onClick={() => { const range = Range(); if (!range) return; const t = document.createElement("span"); range.surroundContents(t);//标签先加入 然后在改值 t.innerHTML = `**${range.toString()}**`; }}

如果选中的文字不是同一行(不是同一个元素)需要先删除原来的 再添加新的

const range = Range(); if (!range) return; const prev = range.toString(); range.deleteContents(); const t = document.createElement("span"); range.surroundContents(t); t.innerHTML = `**${prev}**`;

完整代码 仅供参考

import { Button } from "antd";
import { useState, useCallback, useRef, useMemo } from "react";
import { FC, ReactElement } from "react";
import styled from "styled-components";
import MarkDown from "../components/MD/MarkDown";

interface IProps {}

const MD: FC<IProps> = (): ReactElement => {
const [content, setContent] = useState("");
const input = useRef<HTMLInputElement | null>(null);
const inputEvent = useMemo(() => {
const event = document.createEvent("HTMLEvents");
event.initEvent("input", true, true);
return event;
}, []);
const Range = useCallback(() => {
const selObj = window.getSelection();
if (!selObj) return;
return selObj.getRangeAt(0);
}, []);

const onInput = useCallback(e => {
setContent(e.target.innerText);
}, []);

const forceInput = useCallback(() => {
input.current?.dispatchEvent(inputEvent);
}, [inputEvent]);

return (
<Container>
<Nav>
<Button
onClick={() => {
const range = Range();
if (!range) return;
range.deleteContents();
forceInput();
}}
>
删除
</Button>
<Button
onClick={() => {
const range = Range();
if (!range) return;
const t = document.createElement("span");
range.surroundContents(t);
t.innerHTML = `**${range.toString()}**`;
forceInput();
range.collapse(false);
}}
>
加粗
</Button>
</Nav>
<EditWrapper>
<div ref={input} onInput={onInput} contentEditable='true'></div>
<MarkDown content={content} />
</EditWrapper>
</Container>
);
};

export default MD;

const Container = styled.div`
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
`;

const Nav = styled.nav`
width: 100%;
height: 50px;
background-color: #000;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
`;

const EditWrapper = styled.div`
height: calc(100% - 50px);
width: 100%;
display: flex;

& > div {
width: 50%;
max-width: 50%;
padding: 0 5px;
}

& > div:first-child {
border-right: 1px dashed #ccc;
outline: none;
}
`;


标签:...,const,selObj,Range,js,range,选中,styled,return
From: https://blog.51cto.com/u_15964288/6055867

相关文章

  • 在next.js中使用styled-component以及全局主题切换
    文章目录​​使styled-component像SPA中使用​​​​step1安装插件​​​​step2根目录下创建`.babelrc`​​​​step3创建`page/_document.js`自定义Document​​​......
  • JS实现下载文件
    最近需要下载一些视频,数量不算多,百十个,动态加载比较多,写爬虫比较麻烦,想想不如直接做个书签JS直接点点鼠标下载了。第一个:直接打开链接javascript:(function(){varuri_e......
  • Python_json类方法
    Python_json类方法importrequestsimportjsonheaders={"User-Agent":"Mozilla/5.0(LinuxAndroid6.0Nexus5Build/MRA58N)AppleWebKit/537.36(KHTML,l......
  • js 0.1+0.2 !== 0.3 简单解决方案
    exportconstround=number=>{constgetFloat=number.toString().split(".");if(getFloat.length===1){returnnumber;}constfloatLength=getFloa......
  • Node.js 处理 File
    Node.js处理Filefs模块常规使用运用递归遍历目录树创建文件和目录读写文件path模块对于file的理解,此处fs模块Node.js提供了处理文件系统的内置模块:f......
  • 实战:第七章:微信H5支付时用户有微信分身停留5秒后未选择哪个微信分身,也未支付就被动回
    三种问题:微信H5支付时用户有微信分身停留5秒后未选择哪个微信分身,也未支付就被动回调到商户支付是否完成的页面安卓H5支付设置了redirect_url后调起微信收银台5秒后回退......
  • go-rod 设置等待,用js设置等待
       page.MustWait(`()=>{window.astr=Array.from(document.querySelectorAll('#noResult>div>div>p:nth-child(3)')).map(article=>article.inn......
  • Js导出csv
    functionexportCSV(title,jsonData,name){//要导出的json数据letstr=``;for(letioftitle){......
  • 介绍 Blite,轻量级 Node.js 后端服务器
    为小型应用程序构建后端服务器可能是一个复杂且耗时的过程。Blite提供了一种解决方案来简化此过程并让您快速启动和运行。Blite是一个单一的Node.js后端服务器应用程序,提......
  • 对json中的字典提取其中的所有参数(包括list和dict中)整合为一层
    例如:在python中,我有一个字典,类似于{s1:[{s11:0,s12:2},{s13:3,s14:4}],s2:'s2',s3:{s31:0,s32:2}},我想使用递归提取其中所有的字典的key值和value,并在key值中包含它在字典......