document-editor-yw

A Vue 2 rich text editor component based on Tiptap, with a modern UI and powerful features.

Installation

npm install document-editor-yw

Usage

Basic Usage

<template>
  <document-editor />
</template>

<script>
import { DocumentEditor } from 'document-editor-yw'
import 'document-editor-yw/dist/document-editor-yw.css'

export default {
  components: {
    DocumentEditor
  }
}
</script>

Using Individual Components

You can also use individual components:

<template>
  <div>
    <editor-header 
      :document-title="title"
      :editor="editor"
      @document-title-change="handleTitleChange"
    />
    <editor-content 
      :document-title="title"
      @editor-ready="handleEditorReady"
    />
  </div>
</template>

<script>
import { EditorHeader, EditorContent } from 'document-editor-yw'

export default {
  components: {
    EditorHeader,
    EditorContent
  },
  data() {
    return {
      title: 'My Document',
      editor: null
    }
  },
  methods: {
    handleEditorReady(editor) {
      this.editor = editor
    },
    handleTitleChange(newTitle) {
      this.title = newTitle
    }
  }
}
</script>

Features

• Rich text editing with modern UI
• Table support with resizable columns
• Image upload and management
• Customizable toolbar
• Table of contents generation
• Structure tree view
• Multiple text formatting options
• List management
• And more...

Available Components

• DocumentEditor: Main editor component
• EditorHeader: Toolbar component
• EditorContent: Editor content area
• BubbleMenuContainer: Context menu container
• Various menu components (Bold, Italic, etc.)
• Extension components

Dependencies

• Vue 2.6+
• Element UI 2.15+
• Tiptap 2.1+

License

MIT