Редактор Element Tiptap

WYSIWYG-редактор для создания богатого текста с использованием tiptap2 и Element Plus для Vue3.

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

🧊 Legacy

Element Tiptap 1.0

📔 Языки

English | 简体中文 | Русский

🎄 Демо

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

👾Code Sandbox

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

• 💅 Множество встроенных расширений (добро пожаловать для отправки запроса на добавление новых функций👏)
• 🔖 Поддержка Markdown
• 📘 Поддержка TypeScript
• 🌐 Поддержка i18n (en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). Добро пожаловать для внесения дополнительных языков
• 🎈 События, которые вы можете использовать: 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';
// импортируем стили ElementTiptap
import 'element-tiptap/lib/style.css';

const app = createApp(App);

// использование плагина ElementPlus
app.use(ElementPlus);
// использование плагина этого пакета
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

Тип: строка

По умолчанию: 'html'

Вывод может быть определен как 'html' или 'json'.

<el-tiptap output="json" />

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

readonly

Тип: логический

По умолчанию: false

<el-tiptap readonly />

когда только для чтения равно true, редактор не редактируется.

проверка орфографики

Тип: логический

По умолчанию: `false````html

Указывает, включена ли проверка орфографии для содержимого.

### Ширина, высота

Тип: `строка | число`

Значение строки с единицей или простое значение (по умолчанию используется единица **`px`**)：

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

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

width: 700px;
height: 100%;

Включить счетчик символов

Тип: логический

По умолчанию: true

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

Подсказки

Тип: логический

По умолчанию: true

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

Локализация

Указывает язык i18n редактора.

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

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

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

• en(по умолчанию)
• zh
• pl от @FurtakM
• ru от @baitkul
• de от @Thesicstar
• ko от @Hotbrains
• es от @koas
• zh_tw от @eric0324
• fr от @LPABelgium
• pt_br от @valterleonardo
• nl от @Arne-Jan
• he от @shovalPMS

Добро пожаловать к вкладу.

👽 События

onCreate

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

<script setup>
/**
 * экземпляр редактора tiptap
 * см. https://tiptap.dev/api/editor
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>

onTransaction, onFocus, onBlur, onDestroy

То же самое, что и onCreate

🏗 Вклад

Пожалуйста, увидеть CONTRIBUTING для подробностей.

📝 Журнал изменений

Журнал изменений## 📄 Лицензия

MIT

💝 Покупайте мне кофе

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