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