Text Editor

Word-ga o‘xshash imkoniyatlarga ega to‘liq funksiyali rich text muharriri: shrift uslubi, rang tanlagichlari, tekshiruv ro‘yxatlari, jadvallar, rasm/video embedlari, emoji, qidirish va almashtirish, izohlar, chop etish, to‘liq ekran va boshqalar. Tashqi bog‘liqliksiz contenteditable asosida qurilgan.

Arial

Ajoyib narsa yozing...

vue

<script setup>
import { ref } from 'vue'
const content = ref('')
</script>

<template>
  <VxTextEditor v-model="content" placeholder="Write something amazing..." />
</template>

With Initial Content

Arial

Start writing...

vue

<template>
  <VxTextEditor v-model="content" />
</template>

Image Upload with `beforeUpload`

beforeUpload prop tanlangan File obyektini qabul qiladi. Funksiyangiz uni serveringizga yuklashi va rasm URL’ini qaytarishi kerak. URL qaytarilgandan so‘ng muharrir rasmni kiritadi.

Arial

Yuklash uchun rasm tugmasini bosing yoki rasmni drag & drop qiling...

vue

<script setup>
import { ref } from 'vue'

const content = ref('')

async function handleUpload(file) {
  // Upload file to your server
  const formData = new FormData()
  formData.append('image', file)

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  })

  const data = await response.json()

  // Return the URL — the editor inserts <img src="url">
  return data.url
}
</script>

<template>
  <VxTextEditor
    v-model="content"
    :before-upload="handleUpload"
    :max-file-size="5 * 1024 * 1024"
    @upload-error="(err, file) => console.error(err, file)"
  />
</template>

Qanday ishlaydi:

Foydalanuvchi rasm asboblar paneli tugmasini bosadi → "Upload" tab → diskdan faylni tanlaydi
beforeUpload(file) xom File obyekti bilan chaqiriladi
Funksiyangiz serverga yuklaydi va URL qatorini qaytaradi
Muharrir kursor pozitsiyasida <img src="returned-url"> ni kiritadi

Shuningdek quyidagilarni qo‘llab-quvvatlaydi:

Drag & drop — rasmlarni to‘g‘ridan-to‘g‘ri muharrirga tashlang
Paste — clipboard’dan rasmlarni joylashtiring (ekran tasvirlari, ko‘chirilgan rasmlar)
URL tab — zaxira sifatida rasm URL’ini qo‘lda kiriting

Resizable Images

Muharrirdagi istalgan rasmni tanlash uchun uning ustiga bosing. Hajmini o‘zgartirish uchun burchak yoki yon tutqichlarini suring. Tanlangan rasmni o‘chirish uchun Delete yoki Backspace tugmasini bosing.

Arial

Rasmni shu yerga tashlang va o‘lchamini o‘zgartirish uchun ustiga bosing...

vue

<template>
  <VxTextEditor v-model="content" :before-upload="handleUpload" />
  <!-- Click any inserted image to select it, then drag handles to resize -->
</template>

Table

Grid tanlovchini ochish uchun asboblar panelidagi jadval tugmasini bosing. O‘lcham tanlash uchun kursor bilan o‘ting va kiritish uchun bosing.

Jadvalni kiritish uchun asboblar panelidagi jadval belgisini bosing...

vue

<template>
  <VxTextEditor v-model="content" />
</template>

O‘ng tugmali kontekst menyu istalgan katakda:

Yuqoriga / pastga qator qo‘shish
Chapga / o‘ngga ustun qo‘shish
Katakchani o‘ngga birlashtirish — o‘ng tarafdagi katakcha bilan birlashtiradi (colspan’ni oshiradi)
Katakchani pastga birlashtirish — pastdagi katakcha bilan birlashtiradi (rowspan’ni oshiradi)
Katakchani ajratish — colspan > 1 yoki rowspan > 1 bo‘lganda paydo bo‘ladi, birlashtirilgan katakchani qaytadan ajratadi
Colspan / Rowspan boshqaruvi — aniq span qiymatlarini o‘rnatish uchun +/- tugmalari
Qator / ustun / jadvalni o‘chirish

Ustun o‘lchamini o‘zgartirish — o‘lcham o‘zgartirish kursorini ko‘rish uchun kursor bilan ustun chegarasi yonidan o‘ting, so‘ngra o‘lchamini o‘zgartirish uchun suring.

Font Family & Size

Tipografiyani o‘zgartirish uchun font oilasi va font o‘lchami ochiluvchi menyularidan foydalaning. Avval matnni tanlang, keyin shrift yoki o‘lchamni tanlang.

Arial

Start writing...

vue

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="['fontFamily', 'fontSize', '|', 'bold', 'italic', '|', 'undo', 'redo']"
  />
</template>

Text & Highlight Color

Tanlangan matnga matn rangini yoki fon ajratib ko‘rsatish rangini qo‘llang. 80 ta tayyor rangdan birini tanlang.

Start writing...

vue

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="['bold', 'italic', '|', 'textColor', 'highlightColor', '|', 'undo', 'redo']"
  />
</template>

Checklist

Interaktiv tekshiruv ro‘yxatlari yarating. Elementlarni almashtirish uchun checkbox sohasiga bosing.

Bajariladigan ishlar ro‘yxatini qo‘shish uchun checklist tugmasini bosing...

vue

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="['checklist', '|', 'bulletList', 'orderedList', '|', 'bold', 'italic', '|', 'undo', 'redo']"
  />
</template>

Video Embed

YouTube yoki Vimeo videolarini joylashtiring. Video tugmasini bosing, URL’ni joylashtiring va muharrir responsiv iframe’ni kiritadi.

YouTube yoki Vimeo video joylashtirish uchun video tugmasini bosing...

vue

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="['video', 'image', 'link', '|', 'bold', 'italic', '|', 'undo', 'redo']"
  />
</template>

Import & Export

Word hujjatlarini (.docx/.doc) import qiling, Word yoki PDF’ga eksport qiling. Asboblar paneli tugmalari Vexel Icons’dan foydalanadi.

Eksport qilish uchun matn kiriting yoki Word hujjatini import qiling...

vue

<script setup>
import { ref } from 'vue'
const content = ref('')
</script>

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="[
      'bold', 'italic', 'underline', '|',
      'heading1', 'heading2', '|',
      'bulletList', 'orderedList', '|',
      'importWord', 'exportWord', 'exportPdf',
    ]"
  />
</template>

Xususiyatlar:

Import Word — .docx yoki .doc faylni tanlash uchun import belgisini bosing. Kontent tahlil qilinadi va muharrirga kiritiladi.
Export Word — Muharrir kontentini tegishli formatlash, jadvallar va uslublar bilan Word’ga mos .doc fayl sifatida yuklab oladi.
Export PDF — Toza chop etish uslublari bilan PDF sifatida saqlash uchun brauzerning chop etish dialogini ochadi.

Full-Featured

Barcha Word’ga o‘xshash asboblar paneli elementlari yoqilgan — shrift uslubi, ranglar, ro‘yxatlar, media, emoji, maxsus belgilar, qidirish va almashtirish, izohlar, sahifa tanaffuslari, chop etish va to‘liq ekran.

Arial

To‘liq funksiyali Word’ga o‘xshash muharrir...

0 words0 characters

vue

<template>
  <VxTextEditor v-model="content" :before-upload="handleUpload" show-word-count show-character-count />
</template>

Asboblar paneli elementlarining moslashtirilgan massivini uzating. Ajratuvchilar uchun '|' dan foydalaning.

Faqat oddiy formatlash...

vue

<template>
  <VxTextEditor
    v-model="content"
    :toolbar="['bold', 'italic', 'underline', '|', 'bulletList', 'orderedList', '|', 'image', 'link', '|', 'undo', 'redo']"
    :before-upload="handleUpload"
  />
</template>

Asboblar panelini butunlay yashirish uchun :toolbar="false" ni o‘rnating. Klaviatura yorliqlari hamon ishlaydi.

Start writing...

vue

<template>
  <VxTextEditor v-model="content" :toolbar="false" />
</template>

Word & Character Count

Arial

Start writing...

0 words0 characters

vue

<template>
  <VxTextEditor v-model="content" show-word-count show-character-count />
</template>

Min / Max Height

Arial

Compact editor with scroll...

vue

<template>
  <VxTextEditor v-model="content" min-height="100px" max-height="300px" />
</template>

Read Only

Arial

Start writing...

vue

<template>
  <VxTextEditor v-model="content" readonly />
</template>

Disabled

Arial

Start writing...

vue

<template>
  <VxTextEditor model-value="<p>Disabled content</p>" disabled />
</template>

HTML Output

Arial

Type to see HTML output below...

vue

<script setup>
import { ref } from 'vue'
const content = ref('')
</script>

<template>
  <VxTextEditor v-model="content" />
  <pre>{{ content }}</pre>
</template>

Barcha mavjud asboblar paneli elementlari:

Item	Description
`fontFamily`	Shrift oilasi ochiluvchi menyusi (Arial, Times New Roman, Georgia va boshqalar)
`fontSize`	Shrift o‘lchami ochiluvchi menyusi (8px – 72px)
`bold`	Qalin matn
`italic`	Kursiv matn
`underline`	Tagiga chizilgan matn
`strikethrough`	Chizilgan matn
`heading1` – `heading6`	Sarlavha darajalari 1–6
`textColor`	Matn rangi tanlagichi (80 ta tayyor rang)
`highlightColor`	Fon ajratib ko‘rsatish rangi tanlagichi
`bulletList`	Tartiblanmagan ro‘yxat
`orderedList`	Tartiblangan ro‘yxat
`checklist`	Checkbox’lar bilan interaktiv tekshiruv ro‘yxati
`blockquote`	Iqtibos bloki
`code`	Ichki kod
`codeBlock`	Kod bloki
`link`	Havolani kiritish/tahrirlash
`image`	Rasm yuklash yoki URL orqali kiritish
`video`	YouTube yoki Vimeo video joylashtirish
`table`	Grid tanlovchi bilan jadval kiritish; qator/ustun/birlashtirish amallari uchun katakchalarni o‘ng tugma bilan bosing
`emoji`	Emoji tanlagichi (80 ta emoji)
`specialChars`	Maxsus belgilar tanlagichi (60 ta belgi)
`alignLeft`	Chapga tekislash
`alignCenter`	Markazga tekislash
`alignRight`	O‘ngga tekislash
`alignJustify`	Ikki tomonga tekislash
`indent`	Chekinishni oshirish
`outdent`	Chekinishni kamaytirish
`lineHeight`	Qator balandligi tanlagichi (1.0 – 3.0)
`horizontalRule`	Gorizontal chiziq
`pageBreak`	Sahifa tanaffusini kiritish
`footnote`	Raqamlangan izoh kiritish
`subscript`	Pastki indeks
`superscript`	Yuqori indeks
`findReplace`	Keyingi/oldingi navigatsiyaga ega qidirish va almashtirish paneli
`undo`	Bekor qilish
`redo`	Qaytarish
`clear`	Formatlashni tozalash
`print`	Muharrir kontentini chop etish
`fullscreen`	To‘liq ekran tahrirlash rejimini almashtirish
`\|`	Ajratuvchi

Props

Prop	Type	Default	Description
`modelValue`	`string`	`''`	HTML kontent (v-model)
`placeholder`	`string`	`'Start writing...'`	Placeholder matni
`disabled`	`boolean`	`false`	Muharrirni o‘chirish
`readonly`	`boolean`	`false`	Faqat o‘qish rejimi
`toolbar`	`TextEditorToolbarItem[] \| false`	Default toolbar	Asboblar paneli sozlamalari
`minHeight`	`string`	`'200px'`	Muharrirning minimal balandligi
`maxHeight`	`string`	`undefined`	Muharrirning maksimal balandligi (scroll’ni yoqadi)
`showCharacterCount`	`boolean`	`false`	Belgilar sonini ko‘rsatish
`showWordCount`	`boolean`	`false`	So‘zlar sonini ko‘rsatish
`autofocus`	`boolean`	`false`	Montaj qilinganda avtomatik fokuslash
`beforeUpload`	`(file: File) => Promise<string> \| string`	`undefined`	Yuklash ishlovchisi — faylni qabul qiladi, rasm URL’ini qaytarishi kerak
`accept`	`string`	`'image/*'`	Fayl kirish uchun qabul qilinadigan fayl turlari
`maxFileSize`	`number`	`undefined`	Maksimal fayl o‘lchami (baytlarda)

Events

Event	Payload	Description
`update:modelValue`	`string`	Kontent o‘zgarganda chiqariladi
`focus`	`FocusEvent`	Muharrir fokus olganda chiqariladi
`blur`	`FocusEvent`	Muharrir fokusni yo‘qotganda chiqariladi
`change`	`string`	Kontent o‘zgarganda chiqariladi
`uploadError`	`(error: Error, file: File)`	Rasm yuklash muvaffaqiyatsiz tugaganda yoki o‘lcham chegarasidan oshganda chiqariladi

Exposed Methods

Method	Description
`focus()`	Focus the editor
`blur()`	Blur the editor
`getHTML()`	Get current HTML content
`getText()`	Get current plain text content
`exec(command, value?)`	Execute a document command

Text Editor ​

With Initial Content ​

Image Upload with beforeUpload ​

Resizable Images ​

Table ​

Font Family & Size ​

Text & Highlight Color ​

Checklist ​

Video Embed ​

Import & Export ​

Full-Featured ​

Custom Toolbar ​

No Toolbar ​

Word & Character Count ​

Min / Max Height ​

Read Only ​

Disabled ​

HTML Output ​

Toolbar Items ​

Props ​

Events ​

Exposed Methods ​

Text Editor

With Initial Content

Image Upload with `beforeUpload`

Resizable Images

Table

Font Family & Size

Text & Highlight Color

Checklist

Video Embed

Import & Export

Full-Featured

Custom Toolbar

No Toolbar

Word & Character Count

Min / Max Height

Read Only

Disabled

HTML Output

Toolbar Items

Props

Events

Exposed Methods