Skip to content

[ospp]RichTextEditor富文本功能增强

Kagol edited this page Sep 26, 2024 · 20 revisions

任务清单:https://github.com/orgs/opentiny/projects/6/views/1

本地启动和验证

git clone git@github.com:opentiny/tiny-vue.git
git checkout ospp-2024/003-rich-text-editor-enhancement
pnpm i --registry=https://registry.npmmirror.com
pnpm site

访问:http://localhost:3101/,进入 RichTextEditor 组件的 demo。

验证功能点:

  • 工具栏
  • 表格
  • 粘贴
  • 斜杆菜单
  • 浮动菜单(选择文本之后出现浮动菜单工具栏)
  • 协同编辑
  • E2E测试用例
  • API/Demo文档

还需要验证之前的功能是否受到影响。

发布 alpha 版本验证

在 Vite+Vue3+TinyVue 和 Webpack(VueCLI)+Vue2+TinyVue 项目中安装和使用。

执行命令:

pnpm build:ui rixh-text-editor

可以构建 rich-text-editor 组件的产物,产物地址在 packages/dist2(vue2版本) 和 packages/dist3(vue3版本) 两个目录下。

但是构建出来的 @opentiny/vue-rich-text-editor 软件包,依赖了 @opentiny/tiny-tiptap,但是 @opentiny/tiny-tiptap 又无法发包,将导致用户无法使用 @opentiny/vue-rich-text-editor。

目前 tiny-tiptap 缺失构建脚本,无法单独发包,需要优先完善 tiny-tiptap 构建脚本,走通发包流程。

验证时,可以将 @opentiny 这个 scope 替换成自己的名字,比如 @kagol/tiny-tiptap / @kagol/vue-rich-text-editor,然后发布到 npmjs,进行验证,确保发布到 npmjs 之后的包没有问题。

问题

  1. 默认情况下,不应该开启选中文本之后的气泡菜单功能,参考Demo【基本用法】

image

  1. 行内代码样式不好看,应该在内容左右增加一些间距

image

  1. 代码块语言下拉框样式比较丑,需要优化

image

  1. 代码块高亮样式不好看,行间距太小,有点挤

  2. 工具栏按钮顺序不合理,建议参考业界富文本进行优化

image

  1. 鼠标移到工具栏按钮上,缺少文字提示

  2. 工具栏按钮取消超链接不需要,因为超链接再次点击就是取消超链接,功能上存在重复

  3. 工具栏中的下拉列表(包括标题、字号、行距等)不好看,建议参考TinyVue组件的Select进行优化

image

Select: https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/select

  1. 没法对选中的内容设置字号,现在是会整行设置字号

  2. 文本色和背景色,缺少常见颜色,目前只有一个色盘

当前效果: image

参考语雀效果: image

  1. 上传的图片被挤压变形了

image

  1. 上传的图片初始状态不应该有边框和用于拉伸的小矩形,应该是点击图片之后才出现

image

  1. 插入图片之后,富文本输入内容变得很卡,需要优化

  2. 插入表格的体验不好,并且最多插入4x4的表格,不太方便,建议优化成动态变化的形式,最多可以插入10x10的表格,然后单元格的正方形缩小一点

现在的效果: image

参考语雀效果: image

  1. 表格气泡菜单位置不对

image

  1. 设置表格单元格背景色的图标不对

image

  1. 表格横向滚动后,样式不好看

image

  1. 斜杆菜单样式有点丑,并且没有分类,全部平铺在一起了,体验不好

image

参考语雀效果:

image

  1. 斜杆菜单搜索功能不正常,目前是需要光标移开之后再移回来才能搜索

另外就是我本来就要输入字符 /sss,但是光标移到sss后面出现暂无选项,体验不太好,搜不到就不显示下拉框就行了

image

image

  1. 斜杆菜单的demo没有演示 Component 可选值的用法

  2. 表格气泡菜单,每次点击鼠标移动光标位置,都会消失又出现,体验不好

建议表格气泡菜单放到表格上放固定不动,或者增加表格右键菜单进行操作

image

  1. 协同编辑demo,编辑器里的内容有点乱,显得很不正式,建议规范一些

比如使用 TinyVue README 的 介绍文案:https://github.com/opentiny/tiny-vue/blob/dev/README.zh-CN.md

image

  1. API文档编写不规范

image

后续优化点

优先级高:

  1. 补充 tiny-tiptap 构建脚本,走通 @openitny/tiny-tiptap 发包流程