前端问题求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 457 days ago, the information mentioned may be changed or developed.

前端小白就会用 tailwindcss 和 vue3 写写简单的项目。请教下各位前端佬，如图所示的效果用什么实现比较简单
需求如图所示：
左侧是个文本编辑器，右边返回的检测结果能对左侧的文本原文进行一些标记啥的。
https://cdn.img2ipfs.com/ipfs/QmWA7xjYW44KxbuJYUc2bPQWtzj5o9wsWfrtnAMy3bDeEG?filename=image.png

tailwindcss

文本编辑器

3 replies 2025-01-26 13:49:01 +08:00

msmmbl

Jan 25, 2025 via Android

文字高亮常规做法是使用一些富文本编辑器的高亮功能。另外还可以看看浏览器的 highlight api 。

lilywang

Jan 26, 2025

如果只是问纯前端的实现，我理解这就是怎么定义渲染这个效果的数据结构的问题吧
例如左[{type: 'normal', content: '作者：小飞飞，撰写于'}, {type: 'delete', content: '6 月 31 日'}, {type: 'replace', content: '既往开来,replacer: '继往开来'}]
左侧就可以通过这个数组直接渲染，type 非 normal 代表是特殊的需要处理，就给个特殊的样式，右边校对部分，就找到这个结构中特殊的 type ，然后根据其 type 值是删除还是替换来做不同的显示。
不知道你是不是想问这个。

unhappy224

Jan 26, 2025

如果左边要能编辑的，基本上要用那些富文本编辑器了，推荐用基于 promisemirror 的 tiptap ，然后看这里 https://prosemirror.net/examples/lint/