Vue 2

Welcome to the Vue 2-specific documentation for On-Codemerge, a versatile web editor designed for seamless integration with Vue.js 2 projects.

Getting Started with Vue 2 Integration

To integrate On-Codemerge into a Vue.js 2 project, follow these steps.

Installation

Install on-codemerge in your project:

npm i --save on-codemerge

Vue 2 Integration Example

Here’s an example of how to integrate On-Codemerge into a Vue.js 2 component, including the use of a value prop and emitting an event for updates:

OnCodemergeEditor.vue

<template>
  <div ref="editorContainer"></div>
</template>

<script>
import Vue from 'vue';
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

export default {
  name: 'OnCodemergeEditor',
  props: {
    value: String
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    this.editor = new EditorCore(this.$refs.editorContainer);
    this.editor.registerModule(new TextStylingButton());
    this.editor.registerModule(new TableButton());
    // ... additional module registrations

    this.editor.setContent(this.value || 'Your initial content here');

    this.editor.subscribeToContentChange((newContent) => {
      this.$emit('input', newContent);
    });
  },
  watch: {
    value(newValue) {
      if (this.editor && this.editor.getContent() !== newValue) {
        this.editor.setContent(newValue);
      }
    }
  }
};
</script>

In this Vue 2 component:

• The mounted lifecycle hook is used to initialize On-Codemerge when the component mounts.
• The value prop is used to set the initial content of the editor.
• The watch property is used to react to changes in the value prop and update the editor content accordingly.
• The editor.subscribeToContentChange method is used to emit an input event whenever the content changes. This allows the parent component to update its data that's bound to the value prop.

With this setup, you can integrate On-Codemerge in a Vue 2 application, providing a dynamic and powerful editor while maintaining reactivity and data binding consistent with Vue 2's architecture.