@magnolia/vue-editor

Magnolia Vue Editor

Usage no npm install needed!

<script type="module">
  import magnoliaVueEditor from 'https://cdn.skypack.dev/@magnolia/vue-editor';
</script>

README

Magnolia Vue Editor

This library facilitates integration of front-end projects with Magnolia Page Editor.

Usage

  1. Install the package:
npm install --save @magnolia/vue-editor
  1. Load Vue Plugin in your Application
import VueEditor from "@magnolia/vue-editor";
Vue.use(VueEditor);
  1. Connect to rest endpoints and use <EditablePage> directive in your component:
<template>
  <EditablePage
    v-if="content"
    v-bind:content="content"
    v-bind:config="config"
    v-bind:templateDefinitions="templateDefinitions"
  />
</template>

<script>
import config from "../magnolia.config";
import { helper, EditableMixin } from "@magnolia/vue-editor";

export default {
  name: "PageLoader",
  mixins: [EditableMixin],
  data: function() {
    return {
      content: undefined,
      config,
      inEditorEdit:helper.isEditorEdit,
      templateDefinitions: {}
    };
  },
  methods: {
    async loadPage() {
      const contentResponse = await fetch(getContentUrl());
      const content = await contentResponse.json();

      if (helper.inEditorEdit) {
        const templateDefinitionsResponse = await fetch(
          process.env.VUE_APP_REST_TEMPLATE_DEFINITION +
            content["mgnl:template"]
        );
        const templateDefinitions = await templateDefinitionsResponse.json();
        this.templateDefinitions = templateDefinitions;
      }

      this.content = content;
    }
  },
  mounted() {
    this.loadPage();
  }
};
</script>

  1. Render areas inside your components using <EditableArea> directive and add mixin EditableMixin to your component:
<h2>Primary Area</h2>
<div className="col-12">
  <EditableArea :content="mainAreaContent" />
</div>

You can change the surrounding element with elementType property e.g. <EditableArea :content="mainAreaContent" elementType="ul" />

Changelog

See the CHANGELOG.md file.