public/magico-section
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add pagebuilder

Browse Source
This commit is contained in:
Szymon Haczyk
2023-08-17 11:33:13 +02:00
parent e04312836a
commit 01e86b071a
5 changed files with 149 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.magico.pl/tinymce/tinymce.min.js"></script>
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

8
package.json
View File

@@ -11,11 +11,13 @@
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.1", "@tinymce/tinymce-vue": "^4",
"axios": "^1.4.0", "axios": "^1.4.0",
"bootstrap": "^5.3.1",
"bootstrap-icons": "^1.10.5", "bootstrap-icons": "^1.10.5",
"vuedraggable": "^4.1.0", "tinymce": "^6.6.2",
"vue": "^3.3.4" "vue": "^3.3.4",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.3.2", "@rushstack/eslint-patch": "^1.3.2",

21
src/components/SectionElement.vue
View File

@@ -7,9 +7,7 @@
v-for="(template, key) in name_templates" v-for="(template, key) in name_templates"
:key="key" :key="key"
class="badge badge-secondary mr-1" class="badge badge-secondary mr-1"
@click=" @click="saveElement(element, true)"
saveElement(element, true)
"
>{{ template }}</span >{{ template }}</span
> >
</div> </div>
@@ -33,9 +31,7 @@
v-for="(template, key) in key_templates" v-for="(template, key) in key_templates"
:key="key" :key="key"
class="badge badge-secondary mr-1" class="badge badge-secondary mr-1"
@click=" @click="saveElement(element, true)"
saveElement(element, true)
"
>{{ template }}</span >{{ template }}</span
> >
</div> </div>
@@ -113,7 +109,7 @@
v-model="element.text" v-model="element.text"
@input="saveElement(element, true)" @input="saveElement(element, true)"
></FileChooserInput> ></FileChooserInput>
<img :src="element.text" v-if="element.text" style="width:100px"> <img :src="element.text" v-if="element.text" style="width: 100px" />
</div> </div>
<div v-else-if="element.type == 'variable' && editMode"> <div v-else-if="element.type == 'variable' && editMode">
<label>Label zmiennej:</label> <label>Label zmiennej:</label>
@@ -133,9 +129,7 @@
v-for="(template, key) in name_templates" v-for="(template, key) in name_templates"
:key="key" :key="key"
class="badge badge-secondary mr-1" class="badge badge-secondary mr-1"
@click=" @click="saveElement(element, true)"
saveElement(element, true)
"
>{{ template }}</span >{{ template }}</span
> >
</div> </div>
@@ -275,9 +269,10 @@
<script> <script>
import FileChooserInput from './FileChooserInput.vue' import FileChooserInput from './FileChooserInput.vue'
import { randId } from './helper' import { randId } from './helper'
import draggable from 'vuedraggable' import tinymceConfig from './tinymce/config.js'
import Editor from '@tinymce/tinymce-vue'
export default { export default {
components: { draggable, FileChooserInput }, components: { FileChooserInput,Editor },
props: ['modelValue', 'indexes', 'editMode'], props: ['modelValue', 'indexes', 'editMode'],
methods: { methods: {
saveElement: function (el, mode = false) { saveElement: function (el, mode = false) {
@@ -292,7 +287,7 @@ export default {
minimodal: false, minimodal: false,
value: '', value: '',
id: randId('post'), id: randId('post'),
vtinymce: {}, vtinymce: { ...tinymceConfig },
element: {}, element: {},
name_templates: ['Nagłowek', 'Podnagłówek', 'Opis', 'Tekst', 'Obrazek', 'Ikona'], name_templates: ['Nagłowek', 'Podnagłówek', 'Opis', 'Tekst', 'Obrazek', 'Ikona'],
key_templates: ['head', 'text', 'image', 'icon'], key_templates: ['head', 'text', 'image', 'icon'],

118
src/components/tinymce/config.js Normal file
View File

@@ -0,0 +1,118 @@
export default {
autoresize_max_height: window.innerHeight - window.innerHeight / 4,
width: '100%',
selector: "textarea.wysiwyg",
language: "pl",
language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
forced_root_block: "p",
entity_encoding: 'named',
entities: '160,nbsp,38,amp,60,lt,62,gt',
valid_elements: '*[*]',
document_base_url: window.location,
relative_urls: false,
browser_spellcheck: true,
autoresize_bottom_margin: 10,
autoresize_min_height: 90,
image_caption: true,
image_description: true,
image_title: true,
promotion: false,
visualblocks_default_state: true,
visualchars_default_state: false,
formats: {
mainparagraph: {
inline: 'span',
styles: {
fontSize: '18px'
},
classes: 'main_paragraph'
},
firstlink: {
inline: 'span',
styles: {
fontSize: '16px'
},
classes: 'default_button_span black'
},
secondlink: {
inline: 'span',
styles: {
fontSize: '16px'
},
classes: 'default_button_span'
}
},
style_formats: [{
title: 'Headers',
items: [{
title: 'h1',
block: 'h1'
}, {
title: 'h2',
block: 'h2'
}, {
title: 'h3',
block: 'h3'
}, {
title: 'h4',
block: 'h4'
}, {
title: 'h5',
block: 'h5'
}, {
title: 'h6',
block: 'h6'
}]
}, {
title: 'Blocks',
items: [{
title: 'Główny akapit',
format: 'mainparagraph'
}, {
title: 'LinkURL - 1',
format: 'firstlink'
}, {
title: 'LinkURL - 2',
format: 'secondlink'
}, {
title: 'p',
block: 'p'
}, {
title: 'div',
block: 'div'
}, {
title: 'pre',
block: 'pre'
}]
}, {
title: 'Containers',
items: [{
title: 'section',
block: 'section',
wrapper: true,
merge_siblings: false
},
//{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
{
title: 'blockquote',
block: 'blockquote',
wrapper: true
},
//{ title: 'hgroup', block: 'hgroup', wrapper: true },
//{ title: 'aside', block: 'aside', wrapper: true },
//{ title: 'figure', block: 'figure', wrapper: true }
]
}],
paste_word_valid_elements: "table,tr,td,th,b,strong,i,em,h1,h2, strong",
valid_styles: {
'*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius',
},
plugins: ['autoresize'],
removed_menuitems: 'newdocument',
toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
toolbar2: '',
menubar: true,
}

17
yarn.lock
View File

@@ -221,6 +221,13 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw== integrity sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==
"@tinymce/tinymce-vue@^4":
version "4.0.7"
resolved "https://registry.yarnpkg.com/@tinymce/tinymce-vue/-/tinymce-vue-4.0.7.tgz#811dd87a2a9f70e60c43c2d9d932771c0c8b4677"
integrity sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==
dependencies:
tinymce "^5.5.0"
"@vitejs/plugin-vue@^4.2.3": "@vitejs/plugin-vue@^4.2.3":
version "4.2.3" version "4.2.3"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6" resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
@@ -1358,6 +1365,16 @@ text-table@^0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
tinymce@^5.5.0:
version "5.10.7"
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.7.tgz#d89d446f1962f2a1df6b2b70018ce475ec7ffb80"
integrity sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA==
tinymce@^6.6.2:
version "6.6.2"
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.6.2.tgz#23a2ad5fae79b081a2a4a4eaf093dfff6506429a"
integrity sha512-ShoaznNP3qI8dPtEnYt3ByhAJfMhzIY1K04CoFu1IPDeAxmAZCUJLgfiplo8etP4wN8zrBIxHEqpwYYb2IllOQ==
titleize@^3.0.0: titleize@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53" resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"