Getting Started

CyteEditor is a modern rich-text editor with enterprise-grade extensibility. This guide helps you integrate it into your project in minutes.

Installation

Install the core package and the adapter for your framework:

# Vue 3
npm install @cyte-editor/core @cyte-editor/vue3

# Vue 2
npm install @cyte-editor/core @cyte-editor/vue2

# React
npm install @cyte-editor/core @cyte-editor/react

# Angular
npm install @cyte-editor/core @cyte-editor/angular

# Svelte
npm install @cyte-editor/core @cyte-editor/svelte

# Vanilla JS (no framework)
npm install @cyte-editor/core @cyte-editor/vanilla

CSS

Import both the core stylesheet and the stylesheet for your framework adapter in your entry file:

import '@cyte-editor/core/style.css'

// Choose the adapter stylesheet for your framework:
import '@cyte-editor/vue3/style.css'    // Vue 3
// import '@cyte-editor/vue2/style.css'    // Vue 2
// import '@cyte-editor/react/style.css'   // React
// import '@cyte-editor/angular/style.css' // Angular
// import '@cyte-editor/svelte/style.css'  // Svelte
// import '@cyte-editor/vanilla/style.css' // Vanilla JS

Each framework adapter ships its own stylesheet that must be imported manually alongside the core stylesheet. After copying, keep the line for your framework and comment out or remove the others.

Quick Start

Vue 3

<template>
  <div>
    <CyteEditor
      v-model:html="content"
      placeholder="Start writing..."
      locale="en-US"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CyteEditor } from '@cyte-editor/vue3'
import '@cyte-editor/core/style.css'
import '@cyte-editor/vue3/style.css'

const content = ref('<p>Hello CyteEditor!</p>')
</script>

Vue 2

<template>
  <div>
    <CyteEditor
      :html="content"
      placeholder="Start writing..."
      locale="en-US"
      @update:html="content = $event"
    />
  </div>
</template>

<script>
import { CyteEditor } from '@cyte-editor/vue2'
import '@cyte-editor/core/style.css'
import '@cyte-editor/vue2/style.css'

export default {
  components: { CyteEditor },
  data() {
    return {
      content: '<p>Hello CyteEditor!</p>',
    }
  },
}
</script>

React

import { useState } from 'react'
import { CyteEditor } from '@cyte-editor/react'
import '@cyte-editor/core/style.css'
import '@cyte-editor/react/style.css'

export default function MyEditor() {
  const [content, setContent] = useState('<p>Hello CyteEditor!</p>')

  return (
    <div>
      <CyteEditor
        html={content}
        placeholder="Start writing..."
        locale="en-US"
        onChange={({ html }) => setContent(html)}
      />
    </div>
  )
}

Angular

// app.module.ts
import { NgModule } from '@angular/core'
import { CyteEditorComponent } from '@cyte-editor/angular'
import '@cyte-editor/core/style.css'
import '@cyte-editor/angular/style.css'

@NgModule({
  imports: [CyteEditorComponent],
  // ...
})
export class AppModule {}

<!-- app.component.html -->
<cyte-editor
  [html]="content"
  [placeholder]="'Start writing...'"
  [locale]="'en-US'"
  (onChange)="content = $event.html"
></cyte-editor>

// app.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  content = '<p>Hello CyteEditor!</p>'
}

Svelte

<script>
  import { CyteEditor } from '@cyte-editor/svelte'
  import '@cyte-editor/core/style.css'
  import '@cyte-editor/svelte/style.css'

  let content = '<p>Hello CyteEditor!</p>'
</script>

<CyteEditor
  html={content}
  placeholder="Start writing..."
  locale="en-US"
  onChange={(e) => content = e.html}
/>

Vanilla JS

import { EditorManager } from '@cyte-editor/core'
import '@cyte-editor/core/style.css'
import '@cyte-editor/vanilla/style.css'
import { renderToolbar } from '@cyte-editor/vanilla'

const el = document.querySelector('#editor')
const manager = EditorManager.create(el, {
  height: '400px',
  locale: 'en-US',
})

manager.setContent('<p>Hello CyteEditor!</p>')

const toolbar = renderToolbar(document.querySelector('#toolbar'), {
  isProMode: false,
})
toolbar.attachEditor(manager.getEditor(), manager)

Framework Integration Summary

Next Steps

• Installation Guide — advanced configuration and Pro plugins
• API Reference — full EditorManager API and events
• Framework Guides — detailed integration for each framework