@peckadesign/contenteditor

contenteditor

Vlastní blokový editor obsahu, který bude kombinovat CKEditor4 společně s našimi vlastními widgety jako jsou výpis prodejen, paušálová kalkulačka, výpis produktových boxů atd.

Použití na projektu

Balíček obsahuje vyexportovanou komponentu ContentEditor.vue. Ta obsahuje veškeré chování editoru a slouží jako vstup a výstup.

Minimální konfigurace

<template>
  <ContentEditor :content.sync="content" :config="config" />
</template>

import ContentEditor from '@/components/ContentEditor.vue'
import Vue from 'vue'
import VueCompositionAPI, { defineComponent, ref } from '@vue/composition-api'
import { ContentBlockType } from '@/model/ContentBlock'
import { Content } from '@/model/Content'
import Config from '@/model/Config'

Vue.use(VueCompositionAPI)

export default defineComponent({
  components: { ContentEditor },
  setup() {
    const content = ref<Content>(
      new Content([
        {
          type: ContentBlockType.RichText,
          value: { html: 'Hello world' }
        }
      ])
    )

    const config: Config = {
      richTextEditor: {
        ckEditorConfig: {
          extraConfig: {
            libraryUrl:
              'https://www.nay.sk/pdp/library-mod/library/browse?embedded=1&mode=ck'
          }
        }
      }
    }

    return {
      content,
      config
    }
  }
})
</script>

• props config příjmá konfigurační objekt, který umožňuje měnit nastavení jednotlivých bloků editoru
• props content reprezentuje obsah content editoru
• event update:content je vyvolán při jakékoliv změně v rámci editoru a jako hodnotu nese aktuální stav

Export dat do JSON

Reprezentaci content objektu lze serializovat do JSONu pomocí metody Content.toJson() viz.:

<template>
  <div>
    <ContentEditor :content.sync="content" :config="config" />
    <pre>{{ content.toJson() }}</pre>
  </div>
</template>

Struktura výsledného JSONu

V objektu existuje atribut blocks který reperezentuje kolekci jednotlivých bloků, seřazených podle toho jak určil uživatel. Každý blok má svůj atribut type, který určuje o jaký typ bloku se jedná. Hodnota bloku je v atributu value a vždy se jedná o objekt specifický pro daný editor. Nikdy by se zde neměla objevit přímo skalární hodnota.

Typy podporovaných bloků

• richText - klasický CKEditor
• storeBox - blok s ID konkrétní prodejny
• productBox - reprezentace produktového boxu identifikovaného pomocí extId
• productBoxList - reprezentace kolekce produktových boxů identifikovaná pomocí kolekce extId
• feeCalculator - blok paušálové kalkulačky pro konkrétní typ produktu
• accordeon - sbalovací prvek, který nese titulek a obsah viditelný po rozkliknutí, obsahem je HTML

Podrobnou deifinici jakých typů nabývají hodnoty jednotlivých bloků lze vidět v kódu.

Ukázkový JSON

{
  "blocks": [
    {
      "type": "richText",
      "value": {
        "html": "<p>Hello world</p>\n"
      }
    },
    {
      "type": "storeBox",
      "value": {
        "storeId": 123
      }
    },
    {
      "type": "productBox",
      "value": {
        "type": "slim",
        "basketButton": true,
        "extId": "IPHONE11"
      }
    },
    {
      "type": "productBoxList",
      "value": {
        "basketButton": false,
        "extIds": [
          "IPHONE11",
          "IPHONE12"
        ]
      }
    },
    {
      "type": "feeCalculator",
      "value": {
        "productType": "notebook"
      }
    },
    {
      "type": "accordeon",
      "value": {
        "title": "Titulek",
        "body": "<p>Hello world</p>\n"
      }
    }
  ]
}

Project setup

npm ci

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Compiles and minifies for npm package

npm run build-bundle

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.