前端问题求助

27 天前
zhangjiashu2023  zhangjiashu2023
前端小白就会用 tailwindcss 和 vue3 写写简单的项目。请教下各位前端佬,如图所示的效果用什么实现比较简单
需求如图所示:
左侧是个文本编辑器,右边返回的检测结果能对左侧的文本原文进行一些标记啥的。
https://cdn.img2ipfs.com/ipfs/QmWA7xjYW44KxbuJYUc2bPQWtzj5o9wsWfrtnAMy3bDeEG?filename=image.png
1073 次点击
所在节点   前端开发  前端开发
3 条回复
msmmbl
msmmbl
27 天前
文字高亮常规做法是使用一些富文本编辑器的高亮功能。另外还可以看看浏览器的 highlight api 。
lilywang
lilywang
27 天前
如果只是问纯前端的实现,我理解这就是怎么定义渲染这个效果的数据结构的问题吧
例如左[{type: 'normal', content: '作者:小飞飞,撰写于'}, {type: 'delete', content: '6 月 31 日'}, {type: 'replace', content: '既往开来,replacer: '继往开来'}]
左侧就可以通过这个数组直接渲染,type 非 normal 代表是特殊的需要处理,就给个特殊的样式,右边校对部分,就找到这个结构中特殊的 type ,然后根据其 type 值是删除还是替换来做不同的显示。
不知道你是不是想问这个。
unhappy224
unhappy224
26 天前
如果左边要能编辑的,基本上要用那些富文本编辑器了,推荐用 基于 promisemirror 的 tiptap ,然后看这里 https://prosemirror.net/examples/lint/

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1107824

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX