Редактор Element Tiptap

Vue3-совместимый «вот что ты видишь, то и получишь» редактор на основе tiptap и Element Plus

Прост в использовании, удобен для разработчиков, легко расширяем, имеет простой дизайн

💥 Версия 2.0 находится в стадии альфа

Поддерживает Vue3, основана на tiptap2 и Element Plus, подробнее

📔 Выберите язык

English | Русский

🎄 Пример

👉https://leecason.github.io/element-tiptap

👾Code Sandbox

✨ Особенности- 🎨 Использует element-plus компоненты

• 💅 Множество встроенных расширений (добро пожаловать с предложениями для новых функций в issues 👏)
• 🔖 Поддерживает синтаксис markdown
• 📘 Поддержка TypeScript
• 🌐 Поддерживает i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). Добро пожаловать с вкладами на другие языки
• 🎈 Доступные events: create, transaction, focus, blur, destroy
• 🍀 Высокий уровень кастомизации, вы можете кастомизировать расширения и соответствующие им кнопки меню
• 💻 Также можно кастомизировать редактор, контролируя его поведение напрямую.## 📦 Установка

Через NPM

yarn add element-tiptap

npm install --save element-tiptap

Установка плагина

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// импорт стилей element-tiptap
import 'element-tiptap/lib/style.css';

// Установка плагина ElementUI
app.use(ElementPlus);
// Установка плагина element-tiptap
app.use(ElementTiptapPlugin);
// Теперь вы глобально зарегистрировали компонент `el-tiptap`.

app.mount('#app');

или

Локальное использование

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

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

🚀 Использование

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

<script setup>
import { ref } from 'vue';
import {
  // Необходимые расширения
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
} from 'element-tiptap';

// Расширения редактора
// Они будут добавлены в меню и панели в том порядке, в котором вы их объявили
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // Отображение кнопки в панели всплывающего окна
  Underline.configure({ bubble: true, menubar: false }), // Отображение кнопки в панели всплывающего окна, но не в меню
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// Содержимое редактора
const content = ref(`
  <h1>Заголовок</h1>
  <p>Этот редактор просто замечательный!</p>
`);
</script>

📔 Параметры

Расширения extensions

Тип: Array

Вы можете использовать только те расширения, которые вам нужны, и соответствующие кнопки меню будут добавлены в том порядке, в котором вы их объявили.Все доступные расширения:

• 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

Просмотреть документацию по всем расширениям

Вы можете настроить расширения. См. Пользовательские расширения.

Захватчик placeholder

Тип: string

Значение по умолчанию: ''

При отсутствии содержимого в редакторе будет отображаться placeholder.

<el-tiptap placeholder="Напишите что-нибудь…" />

Содержимое content

Тип: string

Значение по умолчанию: ''

Содержимое редактора.

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

Или используйте 'v-model'

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

Вывод output

Тип: string

Значение по умолчанию: 'html'

Может быть определено как 'html' (по умолчанию) или 'json'.

<el-tiptap output="json" />

Дополнительная информация: структура данных Prosemirror

readonly

Тип: boolean

Значение по умолчанию: false

<el-tiptap readonly />

Когда readonly равно true, редактор становится недоступным для редактирования.

spellcheck

Тип: boolean

Значение по умолчанию: значение параметра конфигурации плагина spellcheck

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

Включение проверки орфографии для содержимого редактора.### width, height

Тип: string | number

Строковое значение с единицами измерения, числовое значение будет интерпретироваться как px:

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

Пример будет преобразован в:

width: 700px;
height: 100%;

showMenubar

Тип: boolean

Значение по умолчанию: true

Отображение панели меню.

enableCharCount

Тип: boolean

Значение по умолчанию: true

Отображение счетчика символов.

tooltip

Тип: boolean

Значение по умолчанию: true

Отображение подсказок при наведении указателя мыши на кнопки.

locale

Установка языка интернационализации редактора.

<template>
  <el-tiptap :locale="zh"></el-tiptap>
</template>

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

Доступные языки:

• en (по умолчанию)
• 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

Приветствуем вклады новых языков.

🚀 События Events

onCreate

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

<script setup>
/**
 * Экземпляр редактора tiptap
 * См. https://tiptap.scrumpy.io/docs/guide/editor.html
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>

onTransaction, onFocus, onBlur, onDestroy

Использование такое же, как и у init

🛠 Внесение вклада

Для получения дополнительной информации см. CONTRIBUTING

📝 Журнал обновлений

Журнал обновлений

📄 ЛицензияMIT

💝 Купи мне кофе

Очень приятно видеть, что так много людей любят этот проект. С вашей поддержкой я буду делать его еще лучше.