search

Leecason / element-tiptap

🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)
https://element-tiptap.vercel.app/
MIT License
1.35k stars 166 forks source link

Extension documentation #107

Open Leecason opened 4 years ago

Leecason commented 4 years ago

documentation for extensions

TODO: in README or docs site

Leecason commented 4 years ago

Necessary extensions

Doc

Must be introduced in the first

Usage

new Doc({
  title: true,
})

options

title

Whether the title mode is enabled. Default to false, if true, needs to introduce Title extension.

Paragraph

Usage

new Paragraph()

Text

Usage

new Text()
Leecason commented 4 years ago

Heading

Usage

new Heading({
  level: 5
});

options

level

the max level of heading

Leecason commented 4 years ago

Bold

Usage

new Bold()
Leecason commented 4 years ago

Italic

Usage

new Italic()
Leecason commented 4 years ago

Underline

Usage

new Underline()
Leecason commented 4 years ago

Strike

Usage

new Strike()
Leecason commented 4 years ago

Code

Usage

new Code()
Leecason commented 4 years ago

CodeBlock

Usage

new CodeBlock()
Leecason commented 4 years ago

Blockquote

Usage

new Blockquote()
Leecason commented 4 years ago

Link

Usage

new Link()
Leecason commented 4 years ago

Image

Usage

new Image({
  urlPattern: 
  uploadRequest:
})

options

urlPattern

check image url valid when insert external image.

Default:

/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/

uploadRequest

custom image upload method, the method should return Promise<url>.

default value is a method that return base64 data of image

Leecason commented 4 years ago

BulletList(use with ListItem)

Usage

new BulletList()

OrdererList(use with ListItem)

Usage

new OrderedList()

ListItem

Usage

new ListItem()
Leecason commented 4 years ago

TodoList (use with TodoItem)

Usage

new TodoList()

TodoItem

Usage

new TodoItem()
Leecason commented 4 years ago

Iframe

Usage

new Iframe()
Leecason commented 4 years ago

Table (use with TableHeader, TableCell, TableRow)

Usage

new Table({
  resizable: true
});

options

resizable

Whether table cell can be resized (Default to false)

TableHeader

Usage

new TableHeader();

TableRow

Usage

new TableRow();

TableCell

Usage

new TableCell();
Leecason commented 4 years ago

TextAlign

Usage

new TextAlign({
  alignments: ['left', 'center', 'right', 'justify'],
})

options

alignments

Available alignment, the order will affect the render order for the menu buttons. Default to ['left', 'center', 'right', 'justify']

Leecason commented 4 years ago

LineHeight

Usage

new LineHeight({
  lineHeights: ['100%', '200%', '300%']
});

options

lineHeights

Available line heights, the order will affect the render order for the menu buttons. Default to ['100%', '115%', '150%', '200%', '250%', '300%']

Leecason commented 4 years ago

Indent

Usage

new Indent({
  minIndent: 0,
  maxIndent: 7,
});

options

minIndent、maxIndent

Per indent step is 30px

Leecason commented 4 years ago

HorizontalRule

Usage

new HorizontalRule();

HardBreak

Usage

new HardBreak();

TrailingNode

Usage

new TrailingNode();
Leecason commented 4 years ago

History

Usage

new History();
Leecason commented 4 years ago

TextColor

Usage

new TextColor({
  colors: [...]
});

options

colors

Available colors. Default color set: https://github.com/Leecason/element-tiptap/blob/master/src/utils/color.ts#L6

TextHighlight

Usage

new TextHighlight({
  colors: [...]
});

options

colors

Available colors. Default color set: https://github.com/Leecason/element-tiptap/blob/master/src/utils/color.ts#L6

Leecason commented 4 years ago

FormatClear

Usage

new FormatClear();
Leecason commented 4 years ago

FontType

Usage

new FontType({
  fontTypes: {
    name: css_font_family_value,
  }
});

options

fontTypes

Available fontTypes. Default fontTypes:

{
  'Arial': 'Arial',
  'Arial Black': 'Arial Black',
  'Georgia': 'Georgia',
  'Impact': 'Impact',
  'Tahoma': 'Tahoma',
  'Times New Roman': 'Times New Roman',
  'Verdana': 'Verdana',
  'Courier New': 'Courier New',
  'Lucida Console': 'Lucida Console',
  'Monaco': 'Monaco',
  'monospace': 'monospace',
}

FontSize

Usage

new FontSize({
  fontSizes: ['8', '10', ...]
});

options

fontSizes

Available fontSizes. Default fontSizes: ['8', '10', '12', '14', '16', '18', '20', '24', '30', '36', '48', '60', '72']

Leecason commented 4 years ago

Preview

Usage

new Preview();

Print

Usage

new Print();

Fullscreen

Usage

new Fullscreen();

SelectAll

Usage

new SelectAll();
Leecason commented 4 years ago

CodeView

An extension to view and edit HTML source code.

❗This extension requires the codemirror library, please install codemirror in your project.❗

Usage

import { CodeView } from 'element-tiptap';
import codemirror from 'codemirror'; // install 'codemirror' in your own project

import 'codemirror/lib/codemirror.css'; // import base style
import 'codemirror/mode/xml/xml.js'; // language

data () {
  return {
    extensions: [
      ...
      new CodeView({
        codemirror:  // the CodeMirror library.
        codemirrorOptions: // specify the options for CodeMirror.
      }),
    ],
  };
}

default codemirrorOptions:

{
  lineNumbers: true,
  lineWrapping: true,
  tabSize: 2,
  tabMode: 'indent',
  mode: 'text/html',
}

check more codemirror options

Example

https://github.com/Leecason/element-tiptap/pull/106/files#diff-f46d3cf30b935a3e6aaa63e4ce7dbeb6

JiaWenjie1001 commented 1 year ago

Link extension how to add placeholder?

JiaWenjie1001 commented 1 year ago

Link extension how to add placeholder?