Vue 2 integration

A rich text editor for Vue 2

Still on Vue 2? yjd wraps into a small Options-API component with v-model (the value prop + input event). No framework baked in, tree-shakeable, ~17 KB. On Vue 3? See the Vue 3 guide.

See it running in Vue 2 → Docs Playground
01 — Install

Add the package

One dependency, no peer requirements. The stylesheet is a single import.

terminal
npm i @oix1987/yjd
02 — The component

A reusable v-model component

Vue 2's v-model is a value prop plus an input event. Create the editor in mounted, destroy it in beforeDestroy, and setContent only when the value differs so typing never resets the caret.

YjdEditor.js
import yjd from '@oix1987/yjd';
import '@oix1987/yjd/styles.css';   // once in your app

export default {
  name: 'YjdEditor',
  props: { value: String, placeholder: String },
  mounted() {
    this.ed = new yjd(this.$el, {
      content: this.value || '',
      placeholder: this.placeholder,
      onChange: (html) => this.$emit('input', html),   // v-model
    });
  },
  beforeDestroy() { this.ed && this.ed.destroy(); },
  watch: {
    value(v) {
      if (this.ed && v != null && v !== this.ed.getContent()) this.ed.setContent(v);
    },
  },
  render(h) { return h('div'); },   // host element = this.$el
};
03 — Use it
App.vue
<YjdEditor v-model="html" placeholder="Write…" />
Live

The editor itself

A real yjd instance (the same one the component mounts). Type in it, or open the running Vue 2 example.

YjdEditor.js — live

Notes

v-model in Vue 2

Emit input and accept a value prop — no .sync, no wrapper library.

~17 KB, tree-shakeable

Register only the formats you use from the /core entry.

Also on Vue 3

The Vue 3 guide uses composition API + update:modelValue.

No lock-in

Same core in React, Angular and vanilla.

Next

Running Vue 2 example · Vue 3 · React · Angular · Docs