mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-27 14:59:27 +08:00
replace renderless with headless
This commit is contained in:
parent
813575850c
commit
bb9e159642
@ -2,7 +2,7 @@
|
||||
|
||||
# tiptap 2 (Preview!)
|
||||
|
||||
A renderless and extendable rich-text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror), which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
A headless and extendable rich-text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror), which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
|
||||
<!-- [![Version](https://img.shields.io/npm/v/tiptap.svg?label=version)](https://www.npmjs.com/package/tiptap)
|
||||
[![Downloads](https://img.shields.io/npm/dm/tiptap.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
|
||||
@ -21,8 +21,8 @@ We’re looking for your feedback to improve tiptap 2 before the first public re
|
||||
## Why we built tiptap
|
||||
We were looking for a text editor for [Vue.js](https://github.com/vuejs/vue) and found some solutions that didn’t really satisfy us. An editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called [Slate.js](https://github.com/ianstormtaylor/slate), which impresses with its modularity. We came across [ProseMirror](https://github.com/prosemirror) and decided to build on it. ProseMirror is a toolkit for building rich-text editors that are already in use at many well-known companies such as *Atlassian* or *New York Times*.
|
||||
|
||||
### What does `renderless` mean?
|
||||
With renderless components you'll have (almost) full control over markup and styling. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s all up to you. There is also a [great article about renderless components](https://adamwathan.me/renderless-components-in-vuejs/) by Adam Wathan.
|
||||
### What does `headless` mean?
|
||||
With headless components you'll have (almost) full control over markup and styling. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s all up to you. There is also a [great article about headless components](https://adamwathan.me/headless-components-in-vuejs/) by Adam Wathan.
|
||||
|
||||
### How is the data stored under the hood?
|
||||
You can save your data as a raw `HTML` string or can get a `JSON`-serializable representation of your document. And of course, you can also pass `HTML` or `JSON` content back to the editor.
|
||||
|
@ -53,7 +53,7 @@ export default {
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
|
||||
content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and headless. You can easily add custom nodes as Vue components.</p>',
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
|
@ -1,7 +1,7 @@
|
||||
# Dropcursor
|
||||
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged over the editor.
|
||||
|
||||
Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
|
||||
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
|
@ -1,7 +1,7 @@
|
||||
# Gapcursor
|
||||
This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document.
|
||||
|
||||
Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
|
||||
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
|
@ -1,5 +1,5 @@
|
||||
# Link
|
||||
The Link extension adds support for `<a>` tags to the editor. The extension is renderless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
|
||||
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
|
||||
|
||||
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like.
|
||||
|
||||
|
@ -1,3 +1,3 @@
|
||||
# Links
|
||||
|
||||
<demo name="Examples/Links" highlight="3-8,19,38,55" />
|
||||
<demo name="Examples/Links" highlight="3-8,19,38,55-59" />
|
||||
|
@ -3,7 +3,7 @@
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap is renderless, that doesn’t mean there is no styling provided. You can decided how your editor should look like.
|
||||
tiptap is headless, that means there is no styling provided. That also means, you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.
|
||||
|
||||
## Option 1: Style the plain HTML
|
||||
The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:
|
||||
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Renderless rich-text editor
|
||||
title: Headless rich-text editor
|
||||
---
|
||||
|
||||
:::error Don’t try this at home
|
||||
@ -15,13 +15,13 @@ Nothing here is production-ready, don’t use it anywhere.
|
||||
<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
|
||||
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
|
||||
|
||||
tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
|
||||
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
|
||||
|
||||
## Features
|
||||
|
||||
**Renderless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You are in full control over markup and styling.
|
||||
**Headless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup and styling.
|
||||
|
||||
**Framework-agnostic.** We don’t care what framework you use. tiptap is ready to be used with plain JavaScript or Vue.js. That makes it even possible to write a renderer for React, Svelte and others.
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user