npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

element-tiptap-vue3-fixed

v1.2.3

Published

🌸A modern WYSIWYG rich-text editor using tiptap and Element Plus for Vue3

Downloads

1,296

Readme

A WYSIWYG rich-text editor using tiptap and Element Plus for Vue3

that's easy to use, friendly to developers, fully extensible and clean in design.

It' s version of alpha tiptap 2.0.1 with fixed bugs and repaire previous functionality. Also deleted most warns in console while using.

It' s final version of lib i fixed all bugs, which i saw, welcome issues if you found bugs or warnings, i will try to fix it.

I only done fix bugs and corrected some extentions and delete warnings original

if you are Russian company you can refer me job ([email protected])

English

🎄 Demo

👾Code Sandbox

✨ Features

  • 🎨Use element-plus components
  • 💅Many out of box extensions (welcome to submit an issue for feature request👏)
  • 🔖Markdown support
  • 📘TypeScript support
  • 🌐I18n support(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). welcome to contribute more languages
  • 🎈Events you might use: create, transaction, focus, blur, destroy
  • 🍀Fully extensible, you can customize editor extension and its menu button view
  • 💻Also can control the behavior of the editor directly, customize the editor for yourself.

📦 Installation

NPM

npm i element-tiptap-vue3-fixed

Install plugin

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap-vue3-fixed';
// import ElementTiptap's styles
import 'element-tiptap-vue3-fixed/lib/style.css';

const app = createApp(App);

// use ElementPlus's plugin
app.use(ElementPlus);
// use this package's plugin
app.use(ElementTiptapPlugin);
// Now you register `'el-tiptap'` component globally.

app.mount('#app');

Or

Partial import

<template>
  <el-tiptap ...></el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap-vue3-fixed';
</script>

🚀 Usage

<template>
  <el-tiptap v-model:content="content" :extensions="extensions" />
</template>

<script setup>
import { ref } from 'vue';
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  //________________________
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
} from 'element-tiptap-vue3-fixed';

// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // render command-button in bubble menu.
  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// editor's content
const content = ref(`
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`);
</script>

📔 Props

extensions

Type: Array

You can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.

All available extensions:

  • Doc
  • Text
  • Paragraph
  • Heading
  • Bold
  • Italic
  • Strike
  • Underline
  • Link
  • Image
  • Iframe
  • CodeBlock
  • Blockquote
  • BulletList
  • OrderedList
  • TaskList
  • TextAlign
  • Indent
  • LineHeight
  • HorizontalRule
  • HardBreak
  • History
  • Table
  • FormatClear
  • Color
  • Highlight
  • Print
  • Fullscreen
  • SelectAll
  • FontFamily
  • FontSize
  • CodeView
  • CodeBlockLowlight
  • Gapcursor
  • Dropcursor
  • Commands

You can find all extensions docs here.

Addendum to the link above

Extension: Commands

Usage

import {
  ...
  Commands,
  getSuggestionItems,
  renderItems
} from 'element-tiptap-vue3-fixed';

Commands.configure({
  suggestion: {
    items: getSuggestionItems,
    render: renderItems
  }
}),

Extension: All

Custom svg for extensions

 Image.configure({
    buttonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="16" width="16" fill="currentColor"> ... </svg>'
 })

for (Indent, History) ['swg', 'swg'] for (TextAlign) ['swg', 'swg', 'swg', 'swg']

.. pull-quote:: Warning

NB: Although the buttonIcon attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause XSS attack. Please make sure that the content of buttonIcon is trustworthy. Never assign user-submitted content to the buttonIcon attribute.

Extention: Image

Insert images with original width

 Image.configure({
    defaultWidth: null
  })

Insert images with width: 400px

 Image.configure({
    defaultWidth: 400
  })

Dragging images (tests) adding button which allow to move images

 Image.configure({
    draggable: true
  })

Extention: Link

placeholder

  Link.configure({ 
    addLinkPlaceholder: 'add link', // placeholder for adding link
    editLinkPlaceholder: 'edit link' // placeholder for editing link
  }),

You can customize the extension. See [Custom extensions](https://tiptap.dev/guide/custom-extensions).
### Example custom extension
```vue
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
import {
  Editor
} from '@tiptap/core';
import { CommandButton } from 'element-tiptap-vue3-fixed';

export default CodeBlockLowlight.extend({
  addOptions() {
    return {
      ...this.parent?.(),
      button({ editor, t }: { editor: Editor; t: (...args: any[]) => string }) {
        return {
          component: CommandButton, // component of button which is used in menubar or bubblemenu (u can write your own component of button)
          componentProps: { // props is used in component
            command: () => { // command on click button
              editor.commands.toggleCodeBlock();
            },
            // WARNING buttonIcon attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause XSS attack.
            buttonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="16" width="16" fill="currentColor"> ... </svg>', // your custom svg, if there is not uses default
            isActive: editor.isActive('codeBlock'),
            icon: 'code', // name of element-tiptap icon (don't customized)
            tooltip: t('editor.extensions.CodeBlock.tooltip'),
          },
        };
      },
    };
  },
});

setContent

<el-tiptap ref="editor" />
this.$refs.editor.setContent(Content); 
can do reactive, but history brokes so add this function, to change content if necessary.

placeholder

Type: string

Default: ''

When editor is empty, placeholder will display.

<el-tiptap placeholder="Write something …" />

content

Type: object for output json

Default: ''

Type: string for output html

Default: ''

Editor's content

<el-tiptap :content="content" @onUpdate="onEditorUpdate" />

or Use 'v-model'

<el-tiptap v-model:content="content" />

output

Type: string

Default: 'html'

Output can be defined to 'html' or 'json'.

<el-tiptap output="json" />

further reading: prosemirror data structure

readonly

Type: boolean

Default: false

<el-tiptap readonly />

when readonly is true, editor is not editable.

spellcheck

Type: boolean

Default: false

<el-tiptap spellcheck> </el-tiptap>

Whether the content is spellcheck enabled.

editorProps

Type: Object

Default: {}

<el-tiptap :editorProps="{handlePaste: ...}"> </el-tiptap>

about editorProps

width, height

Type: string | number

A string value with unit or a simple value (the default unit is px):

<el-tiptap :width="700" height="100%"> </el-tiptap>

The above example will be converted to:

width: 700px;
height: 100%;

enableCharCount

Type: boolean

Default: true

Enables or disables the display of the character counter.

tooltip

Type: boolean

Default: true

Control if tooltips are shown when getting with mouse over the buttons from the toolbar.

locale

Specifies the editor i18n language.

<template>
  <el-tiptap :lang="en"></el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap-vue3-fixed';
import en from 'element-tiptap-vue3-fixed/lib/locales/en';
</script>

Available languages:

  • en(default)
  • zh
  • pl by @FurtakM
  • ru by @baitkul
  • de by @Thesicstar
  • ko by @Hotbrains
  • es by @koas
  • zh_tw by @eric0324
  • fr by @LPABelgium
  • pt_br by @valterleonardo
  • nl by @Arne-Jan
  • he by @shovalPMS

Welcome contribution.

👽 Events

onCreate

<template>
  <el-tiptap @onCreate="onCreate" />
</template>

<script setup>
/**
 * the tiptap editor instance
 * see https://tiptap.dev/api/editor
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>

onTransaction, onFocus, onBlur, onDestroy

The same as onCreate

🏗 Contributing

Please see CONTRIBUTING for details.

📄 License

MIT