基于vue3，prosemirror 和 tiptap开发的【可分页】富文本编辑器Cool Editor

已于 2024-07-26 10:56:26 修改
阅读量1.2k 收藏 6
点赞数 10
文章标签： vue.js tiptap prosemirror vue3 cool editor umo editor vue富文本编辑器
于 2024-07-16 18:37:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41390219/article/details/140473586
版权

**基于vue ,prosemirror和tiptap开发的【可分页】富文本编辑器项目

prosemirror提供最基础的脚手架 tiptap二次api封装 可分页 Cool Editor 可以有很大的想象空间 本项目主要用于 电子病历的预研**

演示地址
http://39.101.177.50/

软件架构

软件架构说明

基础架构 prosemirror和tiptap
前端框架 vue3
typescript
tailwindcss

开发计划

  • 基础脚手架封装(已完成)
  • 样式类似world(已完成)
  • 页眉页脚(已完成)
  • 编辑器分页(已完成)
  • 自定义光标样式(已完成)
  • 自定义块状组件(已完成)
  • 气泡菜单(已完成)
  • 鼠标右键菜单(已完成)
  • 修改痕迹(已完成)
  • 批注(已完成)
  • 在线协同编辑(已完成)
  • 质控功能(已完成)
  • 自定义控件（下拉 单选 多选 svg交互）(已完成)
  • 历史记录
  • 快照版本回退
  • 电子签名(已完成)

https://github.com/Cassielxd/CassieEditor

https://gitee.com/stringlxd/cool_emr

**

tiptap中文文档

**
没钱买域名了，tiptap中文网挂到二级域名下了
https://tiptap.dingshaohua.com/

开源地址，大家伙一起完善吧，提pr
https://gitee.com/dingshaohua-com/book-tiptap

可以加技术交流群

在这里插入图片描述

友情推荐

Umo Editor,也是一款更为优秀的编辑器，Umo Editor 是一个基于 Vue3 适合于国人使用的本土化开源文档编辑器。Umo Editor 提供完善的文档编辑能力，支持 Markdown 语法，支持基础的富文本编辑功能，支持多种插入多种格式的节点类型、提供了多种类型的实用工具，并支持设置页面的样式，支持导出多种类型的格式，支持打印和打印预览，支持文档块编辑，支持添加自定义扩展，支持多语言设置，支持暗色主题。

在线文档
https://editor.umodoc.com/cn/docs

请添加图片描述

Mint520
关注
Vue3中使用富文本编辑器
m0_51431448的博客
10-20 2566
在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能。
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
vue2-prosemirror-markdown:Vue2的Prosemirror所见即所得Markdown编辑器组件
04-29
vue2-prosemirror-markdown 插件将prosemirror与Vue 2集成 用法 import Vue from 'vue' import ProseMirror from 'vue2-prosemirror-markdown' import App from './App.vue' Vue . use ( ProseMirror ) new Vue ( { // eslint-disable-line no-new el : '#app' , render : ( h ) => h ( App ) } ) 这将安装该组件，该组件可以用作... < prosemirror :initialMarkdown =" **hello** " mode =" all " textareaConfig =" {name: 'my-textarea'}
强大而灵活的富文本编辑器：Tiptap Editor
gitblog_00552的博客
08-09 1032
强大而灵活的富文本编辑器：Tiptap Editor tiptap项目地址:https://gitcode.com/gh_mirrors/tip/tiptap Tiptap Editor 是一个基于 ProseMirror 库构建的无头、框架无关的富文本编辑器，它的设计理念是可定制化和扩展性。所谓“无头”，意味着它不自带预设的用户界面，给予设计者充分的自由度来塑造自己的编辑体验（可以参考下面提供...
开源项目：Element Tiptap - Vue3富文本编辑器指南
gitblog_07423的博客
09-13 429
开源项目：Element Tiptap - Vue3富文本编辑器指南 element-tiptap ????A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2) ...
Vuetify Pro Tiptap 使用指南
gitblog_01023的博客
08-24 632
Vuetify Pro Tiptap 使用指南 vuetify-pro-tiptaptiptap text editor on vuejs and vuetify项目地址:https://gitcode.com/gh_mirrors/vu/vuetify-pro-tiptap 项目介绍 Vuetify Pro Tiptap 是一款专为 Vue.js 3 设计的富文本编辑器，它结合了 tiptap...
Element Tiptap - Vue.js的现代富文本编辑器
gitblog_07424的博客
09-13 321
Element Tiptap - Vue.js的现代富文本编辑器 element-tiptap ????A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2) ...
探索Element Tiptap：Vue3的富文本编辑器新星
gitblog_00009的博客
08-08 1115
探索Element Tiptap：Vue3的富文本编辑器新星 项目地址:https://gitcode.com/gh_mirrors/el/element-tiptap 项目简介 Element Tiptap是一个专为Vue3打造的富文本编辑器，结合了流行的Tiptap框架和优雅的Element Plus组件库。它的核心理念是“所见即所得”，提供了一种直观且易于使用的界面，让内容创作变得简单而高效...
vue3项目中使用富文本编辑器
热门推荐
前端学习笔记
11-22 1万+
适配 Vue3 的富文本插件不多，我看了很多插件官网，也有很多写的非常棒的，有UI非常优雅让人耳目一新的，也有功能非常全面的。Quill，简单易用，功能全面。editorjs，UI极其优雅，非常好看。ckeditor-5，一款完全重写的富文本编辑器，支持现代 Web 标准，例如模块化架构、原生语义化输出等。还有很多优秀的富文本编辑器插件，就不一一列举了。
Vue3中使用的富文本编辑器（详细实现流程）
贫僧法号依平
04-09 7296
有不少的前端需求都需要使用到富文本编辑器,但是富文本编辑器百花齐放,每次使用可能都会重新找一个编辑器,所以有了这篇文章. 当项目中需要使用到富文本编辑器时,可以直接按照这篇文章的步骤进行,不出意外的话应该可以满足你的绝大多数需求。
Vue3项目集成CKEditor富文本编辑器，支持代码语法高亮显示
heshengfu1211的博客
03-09 3587
Vue3项目中集成具有扩展功能的CKEditor富文本编辑器，支持代码语法高亮显示！
ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)
weixin_34358092的博客
05-18 301
这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下,在导入之前要先修改一下ueditor的jar包中的bug,这个可以参考这里点击打开链接 接着就是配置jsp目录下的config.json文件了,让它能适应我们的项目,配置内容如下:...
cool editor插件
10-05
好极了，下载吧
cool editor2.1
05-16
破解版的cool editor 2.1。相信大家都知道这软件的好使之处。里面有安装教程。安装前请详细阅读
cool editor2.0
12-29
音频编辑软件。
prosemirror-pagination:ProseMirror 插件模拟 A4 页面
05-29
准分页 安装方式 npm i prosemirror-pagination import { paginationPlugin, schema } from 'prosemirror-pagination' 演示版 开发 npm run watch
tiptap一个Vuejs的无渲染和可扩展的富文本编辑器
08-07
tiptap是一个基于Vue.js框架的高级富文本编辑器库，它以其无渲染和高度可扩展的特性在JavaScript开发领域内受到广泛关注。在本文中，我们将深入探讨tiptap的核心概念、功能特性以及如何在实际项目中进行集成和自定义...
基于ProseMirror Tiptap的酷炫文本与电子病历编辑器设计源码
最新发布
09-27
该项目是一款基于ProseMirror Tiptap框架构建的酷炫文本与电子病历编辑器，源码共包含153个文件，涵盖82个TypeScript文件、37个Vue文件、11个JavaScript文件、6个SVG文件、5个PNG文件、3个JSON文件、2个Markdown文件...
tiptap：Vue.js的无渲染富文本编辑器
02-03
我们正在研究Tiptap2。成为赞助商即可立即获得访问权限！ 轻按 且可扩展的RTF编辑器 [FAQ]我应该开始集成Tiptap 1还是等待Tiptap ... Prosemirror是用于构建富文本编辑器的工具包，这些文本已被许多著名公司（例如Atla
vue3富文本编辑器
08-12
Vue.js 3 可以使用一些富文本编辑器库来实现富文本编辑器的功能。以下是一些常用的 Vue.js 3 富文本编辑器库： 1. Vditor：一个功能强大的 Markdown 编辑器，支持实时预览、图片上传、代码块高亮等功能。你可以在 Vue 项目中使用它。 2. tiptap：一个基于 ProseMirror 构建的富文本编辑器，提供丰富的编辑功能和扩展性。它支持自定义节点、命令式操作等特性，具有很好的可定制性。 3. CKEditor 5：这是一个经典的富文本编辑器，提供了丰富的编辑功能和插件扩展机制。CKEditor 5 提供了 Vue 组件，可以很方便地在 Vue 项目中使用。 以上是一些常见的 Vue.js 3 富文本编辑器库，你可以根据项目需求选择适合的库来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值