Extension documentation #107

Leecason · 2020-06-08T14:18:06Z

documentation for extensions

TODO: in README or docs site

The text was updated successfully, but these errors were encountered:

Leecason · 2020-06-10T10:24:00Z

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 · 2020-06-10T10:27:30Z

`Heading`

Usage

new Heading({
  level: 5
});

options

level

the max level of heading

Leecason · 2020-06-10T10:28:06Z

`Bold`

Usage

new Bold()

Leecason · 2020-06-10T10:28:18Z

`Italic`

Usage

new Italic()

Leecason · 2020-06-10T10:28:28Z

`Underline`

Usage

new Underline()

Leecason · 2020-06-10T10:28:48Z

`Strike`

Usage

new Strike()

Leecason · 2020-06-10T10:29:08Z

`Code`

Usage

new Code()

Leecason · 2020-06-10T10:29:20Z

`CodeBlock`

Usage

new CodeBlock()

Leecason · 2020-06-10T10:29:42Z

`Blockquote`

Usage

new Blockquote()

Leecason · 2020-06-10T10:31:45Z

`Link`

Usage

new Link()

Leecason · 2020-06-10T10:36:24Z

`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 · 2020-06-11T13:22:17Z

`BulletList`(use with `ListItem`)

Usage

new BulletList()

`OrdererList`(use with `ListItem`)

Usage

new OrderedList()

`ListItem`

Usage

new ListItem()

Leecason · 2020-06-11T13:23:02Z

`TodoList` (use with `TodoItem`)

Usage

new TodoList()

`TodoItem`

Usage

new TodoItem()

Leecason · 2020-06-11T13:25:37Z

`Iframe`

Usage

new Iframe()

Leecason · 2020-06-11T13:31:38Z

`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 · 2020-06-11T13:36:36Z

`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 · 2020-06-11T13:39:07Z

`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 · 2020-06-11T13:41:50Z

`Indent`

Usage

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

options

minIndent、maxIndent

Per indent step is 30px

Leecason · 2020-06-11T13:43:18Z

`HorizontalRule`

Usage

new HorizontalRule();

`HardBreak`

Usage

new HardBreak();

`TrailingNode`

Usage

new TrailingNode();

Leecason · 2020-06-11T13:43:41Z

`History`

Usage

new History();

Leecason · 2020-06-11T13:47:16Z

`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 · 2020-06-11T13:47:40Z

`FormatClear`

Usage

new FormatClear();

Leecason · 2020-06-11T13:54:16Z

`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 · 2020-06-11T13:55:34Z

`Preview`

Usage

new Preview();

`Print`

Usage

new Print();

`Fullscreen`

Usage

new Fullscreen();

`SelectAll`

Usage

new SelectAll();

Leecason · 2020-06-11T13:56:51Z

`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 · 2023-06-13T07:45:10Z

Link extension how to add placeholder?

JiaWenjie1001 · 2023-06-13T07:45:14Z

Link extension how to add placeholder?

Leecason added the docs label Jun 8, 2020

Leecason mentioned this issue Jun 10, 2020

Custom upload image event #51

Closed

Leecason pinned this issue Jun 11, 2020

Leecason changed the title ~~Extension docs~~ Extension documentation Jun 11, 2020

Leecason mentioned this issue Dec 14, 2020

How to add inline code #276

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extension documentation #107

Extension documentation #107

Leecason commented Jun 8, 2020 •

edited

Loading

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020

Leecason commented Jun 10, 2020 •

edited

Loading

Leecason commented Jun 11, 2020 •

edited

Loading

Leecason commented Jun 11, 2020 •

edited

Loading

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

Leecason commented Jun 11, 2020

JiaWenjie1001 commented Jun 13, 2023

JiaWenjie1001 commented Jun 13, 2023

Extension documentation #107

Extension documentation #107

Comments

Leecason commented Jun 8, 2020 • edited Loading

Leecason commented Jun 10, 2020

Necessary extensions

Doc

Usage

options

Paragraph

Usage

Text

Usage

Leecason commented Jun 10, 2020

Heading

Usage

options

Leecason commented Jun 10, 2020

Bold

Usage

Leecason commented Jun 10, 2020

Italic

Usage

Leecason commented Jun 10, 2020

Underline

Usage

Leecason commented Jun 10, 2020

Strike

Usage

Leecason commented Jun 10, 2020

Code

Usage

Leecason commented Jun 10, 2020

CodeBlock

Usage

Leecason commented Jun 10, 2020

Blockquote

Usage

Leecason commented Jun 10, 2020

Link

Usage

Leecason commented Jun 10, 2020 • edited Loading

Image

Usage

options

Leecason commented Jun 11, 2020 • edited Loading

BulletList(use with ListItem)

Usage

OrdererList(use with ListItem)

Usage

ListItem

Usage

Leecason commented Jun 11, 2020 • edited Loading

TodoList (use with TodoItem)

Usage

TodoItem

Usage

Leecason commented Jun 11, 2020

Iframe

Usage

Leecason commented Jun 11, 2020

Table (use with TableHeader, TableCell, TableRow)

Usage

options

TableHeader

Usage

TableRow

Usage

TableCell

Usage

Leecason commented Jun 11, 2020

TextAlign

Usage

options

Leecason commented Jun 11, 2020

LineHeight

Usage

options

Leecason commented Jun 11, 2020

Indent

Leecason commented Jun 8, 2020 •

edited

Loading

`Doc`

`Paragraph`

`Text`

`Heading`

`Bold`

`Italic`

`Underline`

`Strike`

`Code`

`CodeBlock`

`Blockquote`

`Link`

Leecason commented Jun 10, 2020 •

edited

Loading

`Image`

Leecason commented Jun 11, 2020 •

edited

Loading

`BulletList`(use with `ListItem`)

`OrdererList`(use with `ListItem`)

`ListItem`

Leecason commented Jun 11, 2020 •

edited

Loading

`TodoList` (use with `TodoItem`)

`TodoItem`

`Iframe`

`Table` (use with `TableHeader`, `TableCell`, `TableRow`)

`TableHeader`

`TableRow`

`TableCell`

`TextAlign`

`LineHeight`

`Indent`

`HorizontalRule`

`HardBreak`

`TrailingNode`

`History`

`TextColor`

`TextHighlight`

`FormatClear`

`FontType`

`FontSize`

`Preview`

`Print`

`Fullscreen`

`SelectAll`

`CodeView`