Skip to content

[ospp]RichTextEditor富文本功能增强

Jump to bottom
Kagol edited this page Sep 25, 2024 · 21 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 项目中安装和使用。

问题

  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. 没法对选中的内容设置字号，现在是会整行设置字号

后续优化点

Clone this wiki locally