强悍!基于Vue的无渲染的富文本编辑器——tiptap!
介绍
tiptap编辑器基于Prosemirror,完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。
Github
https://github.com/scrumpy/tiptap
为什么使用tiptap?
市面上有不少富文本编辑器,但大多数可能并不能满足你的需求。编辑器应该易于扩展,并且不应基于旧的依赖项(例如jQuery)。对于React,已经有一个名为Slate.js的出色编辑器,其模块化给人留下深刻的印象。tiptap是基于Prosemirror进行扩展开发的没有很多公司在Prosemirror(富文本工具包)基础上进行开发。
无渲染要如何理解?
使用无渲染组件(函数式组件),你将(几乎)完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。
安装和使用
- 安装
npm install tiptap
#或者
yarn add tiptap
- 使用
<template><editor-content :editor="editor" />
</template><script>
// Import the editor
import { Editor, EditorContent } from 'tiptap'export default {components: {EditorContent,},data() {return {editor: null,}},mounted() {this.editor = new Editor({content: '<p>This is just a boring paragraph</p>',})},beforeDestroy() {this.editor.destroy()},
}
</script>
Demo截图
下面是来自官方网站的一组Demo截图:
- 基本使用
- 菜单气泡
- 浮动菜单
- 添加链接
- 图片
- 可隐藏菜单栏
点击可隐藏菜单栏
- 待办事项清单
- 表格table
- 搜索和替换
- 输入建议
- 快捷支持Markdown
- 代码突出高亮显示
- 历史记录
- 只读
- 嵌入
- 占位符
- 焦点
- 可通过前后端搭配实现协同编辑
- 标题
- 末尾段落
可理解为对图片等的解释说明等等,可灵活使用
- 导出html和json
ProseMirror简介
ProseMirror 用于在网络应用程序上构建富文本编辑器的工具包,视图解决Markdown和经典WYSIWYG(所见即所得)编辑器。它通过实现WYSIWYG样式的编辑界面来实现此目的,以使文档比纯HTML更加受约束和结构化。可以自定义编辑器创建的文档的形状和结构,并根据应用程序的需要对其进行定制。
https://github.com/prosemirror
总结
tiptap是一个相当不错的富文本编辑器,其无渲染特性以及可实现的协同编辑让其扩展更加方便!enjoy it!
强悍!基于Vue的无渲染的富文本编辑器——tiptap!相关推荐
- 控制富文本table不能超过div宽度_强悍!基于Vue的无渲染的富文本编辑器——tiptap!...
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
- vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap 官网: github:https://github.com/ueberdosis/tiptap 演示:https://www.vue365.cn/code_demo.php?id=9 ...
- vue中引入TinyMCE实现富文本编辑器
整片文章是以vue2.X 引入tinymce富文本编译器 首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...
- vue实战025:配置TinyMCE富文本编辑器
目录 组件安装 组件引用 添加模板 初始化编辑器 常用属性配置 扩展插件使用 之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
- Vue项目中使用 tinymce 富文本编辑器的方法,附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
- VUE快速简单搭建UEditor富文本编辑器
效果图如下所示 Installation npm i vue-ueditor-wrap 下载 UEditor 官网链接: http://ueditor.baidu.com/website/downlo ...
- vue 调用百度的UEditor富文本编辑器,本地运行没问题,打包后工具栏显示出错
首先说下ueditor插件存放位置 问题出现的原因 udditor.config.js中基础路径配制错误 修改如下 将基本路径,从static为首的绝对路径修改为相对路径,即修改如下 window.U ...
- tiptap - 基于 vue 的优雅流畅的开源富文本编辑器
一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器. 关于 Tiptap Tiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编 ...
- 富文本编辑器(html格式)导出为word(vue实现)
纯Vue实现将多个富文本编辑器内容[html格式]统一导出为word 一.vue需要导入的包 二.制作html的格式 1. 为了方便,先用word制作成对应的导出样式,然后通过word导出为html格 ...
最新文章
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理...
- 5G NGC — AMF 接入和移动性管理功能
- CheckStyle
- OpenCV Sobel Derivatives衍生物
- Maven解决jar包版本冲突
- 一线大厂为什么对免费的开源项目这么热衷?
- python watchdog占用,python基于watchdog库全自动化监控目录文件
- python threading timer 退出_解决Python中定时任务线程无法自动退出的问题
- 通勤一小时,堵车半小时,AI 救救社畜
- linux内核imx6,imx6ull之linux内核移植
- python项目结构图_python项目
- java环境变量的配置_一文带你学会Java环境变量配置(小白向)
- C/C++获取文件大小
- 信息系统项目管理师必背核心考点(二十六)三点估算(PERT)
- 应用华为大数据平台配置大数据项目①
- 《数据结构》:中缀表达式转后缀表达式 后缀表达式的计算
- 喜马拉雅xm文件转换为mp3?
- Foxmail 将所有邮件设置为已读
- servlet+jsp数据库增删改查实例
- 扫频的matlab及FPGA实现