editor Svelte Themes

Editor

HTML5 friendly & Email friendly WYSIWYG rich text editor by Tiptap & Svelte (in prototype phase)

#markdown #rich-text-editor #shiki #svelte #tiptap #web-editor #wysiwyg #wysiwyg-editor #svelte-editor #prosemirror
Demo Download

tiptiz WYSIWYG editor

[English] | [Github.io Playground]

Light Mode Dark Mode

当前项目刚结束探索阶段，基于Svelte和Tiptap实现一个WYSIWYG富文本编辑器，目前能通过 技术手段实现再github pages部署静态文档，但不够开箱即用，还处于很原型的阶段。

项目的目标是实现一个HTML5 Copy/Paste友好 & Email格式友好 & Markdown友好的WYSIWYG富文本编辑器。 编辑器将用于个人博客、邮件编辑器、博客文章快速复制粘贴到微信公众号、掘金、知乎等平台发布。

[前往 GitHub.io Playground 体验现有功能]

[前往 Issues查看相关资料和记录]

我在playground里持续补充文档和新的，希望能帮助到各位想入门编辑器开发的开发者。目前实现的功能：

  1. 基本的标记（Marks)，文本样式（TextStyl: 字体、字号、颜色、背景色、缩进、对齐等）
  2. 列表（无序、有序、任务列表），引用，表情，行内代码、代码块，图片，链接，表格等
  3. 已经初具规模的工具栏，（没有UI）图标完全手工调整对齐的svg icon一套，感谢 iconify
  4. 目录，快速跳转
  5. 简单实现的一个i18n功能
  6. （开发模式）自动保存功能，资源管理侧边栏，CI/CD部署到github.io

❗️❗️❗ 项目仍处于原型阶段，还有许多功能需要实现，每天都变化很快。如果您有任何建议或想法，请随时提出问题（目前变动很大很快，暂不接受PR）🙏 ❗️❗️❗ Dev Mode下的自动保存目前仅Swap文件，打包前记得手动复制过去（实在是没实现自动交换和保存，后面会做桌面应用）

编辑器功能兼容新测试表（快速更新中🚀🚀🚀）

issue记录: https://github.com/tiptiz/editor/issues/29

  • 当前实践状态:
    ✅ 支持; ❌ 不支持; ⏳ 正在开发; 🚧 计划中;
  • 其他编辑器状态:
    🆗 部分支持; 📋 粘贴支持;
  • 空着表示没测试或者没必要测试
features 本编辑器 微信公众号 知乎 markdown 掘金富文本
Undo/Redo ✅ ✅ ✅ ✅ ✅
clear marks ✅ ✅ ✅ ❌ ❌
bold ✅ ✅ ✅ ✅ ✅
italic ✅ ✅ ✅ ✅ ✅
inline code ✅ ✅ ✅ ✅ ✅
strike ✅ ✅ ✅ ✅ ❌
superscript ✅ ❌ ✅ ✅ ❌
subscript ✅ ❌ ✅ ✅ ❌
underline ✅ ✅ ✅ ✅ ✅
fontFamily ✅ ✅ ❌ ❌ ❌
fontSize ✅ ✅ ❌ ❌ ❌
HeadingLevel ✅ ✅ ❌ ✅ ✅
link ✅ ❌ ✅ ✅ ✅
blockquote ✅ ✅ ✅ ✅ ✅
fontColor ✅ ✅ ❌ ❌ ❌
bgColor ✅ ✅ ❌ ❌ ❌
Clear font/bg color only ✅ ✅ ❌ ❌ ❌
Hr ✅ ✅ ✅ ✅ ❌
BulletList ✅ ✅ ❓ ✅ ✅ ✅
TaskList ✅ ❌ ❌ ✅ ❌
Emoji Picker (builtin component) ✅ ✅ ❌ ❌ ❌
Text Alignment ✅ ✅ ❌ ❌ ❌
Indent/Outdent ✅ ✅ ❌ ❌ ❌
LineHeight ✅ ✅ ❌ ❌ ❌
TextStyle Margin ✅ ✅ ❌ ❌ ❌
Table ✅ ✅❓ ✅ ✅ ❌
Table Head/Cell Toggle ✅ 📋 🆗❓3 ❌ ❌
Table Cell Merge/Split ✅ 📋 ❌ ❌ ❌
Table Row Add/Delete ✅ ❌ ✅ ✅ ❌
Table Col Add/Delete ✅ ❌ ✅ ✅ ❌
Code Block ✅
Image ✅
Table Layout 🚧
Float layout 🚧

❓3: 知乎表格最左侧支持toggle表头，顶部表头切换报错

项目结构（欢迎交流）

  • packages/*: 自定义组件、公共库都在这里（暂无发布npm计划）.
  • example: demo playground实现的完整代码.
  • example/dev-server.mjs: 开发模式下提供 /content api 进行文件读取保存的能力，vite通过middleware mode集成.
  • src/App.svelte: 主页面（就这一个），编辑器和工具栏，编辑器状态上下文
  • src/icons/toolbars: 所有工具栏用到svg icon，整套手工调整对齐
  • src/icons/*: 其他SVG icon.
  • src/components/ui: shadcn-svelte components, 配置文件 src/components.josn
  • src/components/Toolbar.svelte: 工具栏的入口文件.
  • src/components/toolbars/*.svelte: 所有的工具栏交互按钮、调用Editor实现的功能代码文件都在这里.
  • src/states/*.svelte.ts: 全局状态，参照vue的store理解. (editor state, theme, color picker histories ...)
  • src/assets/noto-emojis-v16.json: Google Emoji图标元数据文件（NotoEmoji metadata json file）.
  • public/NotoColorEmoji.ttf: Google Emoji字体（NotoEmoji font file），没有这个字体，有些emoji在windows上不可渲染，有其他字体实现也可以的.

dev server

目前保存文件仅能通过dev mode（node dev-server.mjs）实现，dev启动非常简单（如下）。

dev模式保存在example/src/assets下的HTML文件会被github action复制到部署的github pages里。

> git clone https://github.com/tiptiz/editor.git --depth=1
> cd editor
> fnm install/use # optional
> pnpm install
> cd exmaple 
> node dev-server.mjs # also pnpm server, or you can't use local save

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes