vue3 quill中 多个span 修改其中某一个的span的内容的时候,已知所修改span的id,把span标签换为纯文本内容
时间: 2024-03-08 14:49:55 浏览: 26
可以使用 Quill 的 Delta 对象来实现这个需求。首先,你需要将 Quill 编辑器中的内容转换为 Delta 对象,然后通过 Delta 对象来修改对应的 span 标签。
假设你要修改的 span 标签的 id 是 `target-span`,以下是实现的代码片段:
```javascript
// 获取 Quill 编辑器的内容
const content = quillRef.current.getContents();
// 遍历 Delta 对象中的每一个操作
const newOps = content.ops.map(op => {
if (op.attributes && op.attributes.id === 'target-span') {
// 找到目标 span 标签
return {
insert: op.insert.text, // 将 span 中的内容作为纯文本插入
};
} else {
return op;
}
});
// 生成修改后的 Delta 对象
const newContent = {
ops: newOps,
};
// 将修改后的 Delta 对象设置回 Quill 编辑器中
quillRef.current.setContents(newContent);
```
这段代码将会把所有 id 为 `target-span` 的 span 标签的内容替换为纯文本。如果你只想替换第一个匹配的 span 标签,可以在遍历 Delta 对象时添加一个变量来记录是否已经找到目标 span 标签,如果已经找到,则跳过后续的操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)