Vue 3

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

Getting Started with Vue

To use On-Codemerge in a Vue.js application, you'll first need to install it.

Installation

Run the following command in your Vue.js project directory to install on-codemerge:

npm i --save on-codemerge

Vue Integration Example

Below is a basic example of how to integrate On-Codemerge into a Vue.js project, including a value prop for initial content:

MyEditorComponent.vue

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

<script>
import { onMounted, ref, watch } from 'vue';
import EditorCore from 'on-codemerge';
import TextStylingButton from 'on-codemerge/textStylingButton';
import TableButton from 'on-codemerge/tableButton';

export default {
  name: 'MyEditorComponent',
  props: {
    value: String
  },
  setup(props) {
    const editorRef = ref(null);
    const editor = ref(null);

    onMounted(() => {
      if (editorRef.value) {
        editor.value = new EditorCore(editorRef.value);
        editor.value.registerModule(new TextStylingButton());
        editor.value.registerModule(new TableButton());
        // ... register other modules

        editor.value.setContent(props.value || "Initial content goes here");

        editor.value.subscribeToContentChange((newContent) => {
          this.$emit('update:value', newContent);
        });
      }
    });

    // Watch for changes in value prop and update the editor content
    watch(() => props.value, (newValue) => {
      if (editor.value && editor.value !== newValue) {
        editor.value.setContent(newValue);
      }
    });

    return {
      editorRef
    };
  }
};
</script>

In this updated component, the value prop is used to pass initial content to the editor. A watcher is added to update the editor's content whenever the value prop changes. This allows the parent component to control the content of the editor dynamically.

This setup enhances the flexibility of the editor within your Vue.js applications, making it responsive to changes in content from the parent component while leveraging On-Codemerge's capabilities.