clear master
This commit is contained in:
Szymon Haczyk
34
.eslintrc.js
34
.eslintrc.js
@@ -1,34 +0,0 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
// add more generic rulesets here, such as:
|
||||
// 'eslint:recommended',
|
||||
"plugin:vue/vue3-recommended",
|
||||
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
|
||||
],
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
// 'vue/no-unused-vars': 'error'
|
||||
"vue/no-mutating-props": 1,
|
||||
"vue/html-indent": 0,
|
||||
"vue/html-self-closing": ["warn", {
|
||||
"html": {
|
||||
"void": "any",
|
||||
"normal": "always",
|
||||
"component": "always"
|
||||
},
|
||||
"svg": "always",
|
||||
"math": "always"
|
||||
}],
|
||||
"vue/max-attributes-per-line": [
|
||||
"warn",
|
||||
{
|
||||
singleline: {
|
||||
max: 2,
|
||||
},
|
||||
multiline: {
|
||||
max: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
30
README.md
30
README.md
@@ -1,30 +0,0 @@
|
||||
# magicopagebuilder
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
|
||||
|
||||
IMPORT TINYMCE FROM CDN
|
||||
|
||||
<script src="https://cdn.magico.pl/tinymce/tinymce.min.js"></script>
|
||||
@@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
43
package.json
43
package.json
@@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "magicopagebuilder",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.7",
|
||||
"@tinymce/tinymce-vue": "^4",
|
||||
"bootstrap": "^5.3.1",
|
||||
"core-js": "^3.6.5",
|
||||
"magico-section": "../magico-section",
|
||||
"tinymce": "^6.0.3",
|
||||
"vue": "^3.2.36",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.22.9",
|
||||
"@vue/cli-plugin-babel": "~5.0.8",
|
||||
"@vue/cli-plugin-eslint": "~5.0.8",
|
||||
"@vue/cli-service": "~5.0.8",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-plugin-vue": "^9.16.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
|
||||
<script src="https://cdn.magico.pl/tinymce/tinymce.min.js"></script>
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
34
src/App.vue
34
src/App.vue
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div id="app" class="container">
|
||||
<img alt="Vue logo" style="width:100px" src="./assets/logo.png">
|
||||
<h2>Pagebuilder Magico</h2>
|
||||
<MagicoPagebuilder v-model="data" />
|
||||
|
||||
<div class="bg-dark text-light mt-4 p-2">{{data}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
||||
},
|
||||
data: function(){
|
||||
return {
|
||||
data:'[{"label":"1 kolumna ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="row p-2">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="col-md-3"
|
||||
>
|
||||
<div class="my-check v2">
|
||||
<label
|
||||
@click="emitEvent(item)"
|
||||
:for="item.name"
|
||||
><img
|
||||
style="width: 100%"
|
||||
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
|
||||
:alt="item.label"
|
||||
/></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
import grid from "./grid.js";
|
||||
|
||||
export default {
|
||||
emits: ["choose"],
|
||||
setup(props, { emit }) {
|
||||
const items = ref(grid);
|
||||
|
||||
function emitEvent(item) {
|
||||
emit("choose", item);
|
||||
}
|
||||
return { items, emitEvent };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.my-check input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.my-check label {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row col-md-12 pagebuilder_section">
|
||||
<div
|
||||
v-for="(item, index) in $pagebuilder.items"
|
||||
:key="index"
|
||||
class="col-md-2"
|
||||
>
|
||||
<template v-if="!item.type || item.type != 'custom'">
|
||||
<div class="my-check v2">
|
||||
<label
|
||||
@click="$emit('choose', index)"
|
||||
:for="'pos_' + index"
|
||||
>
|
||||
<div
|
||||
style="width: 100%"
|
||||
v-if="item.svg"
|
||||
v-html="item.svg"
|
||||
></div>
|
||||
<img
|
||||
v-else
|
||||
style="width: 100%"
|
||||
:src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'"
|
||||
alt="1 kolumna"
|
||||
/>
|
||||
<span
|
||||
style="cursor: pointer"
|
||||
class="d-inline-block w-100 text-center mt-1 mb-1"
|
||||
>{{ item.label }}</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-12 text-center">
|
||||
<h3>DESIGN SYSTEM</h3>
|
||||
<div>
|
||||
<div class="row col-md-12 pagebuilder_section">
|
||||
<div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
|
||||
<div class="form-check v2">
|
||||
<input @input="event => { $emit('update:modelValue', index) }" type="radio" :id="'pos_' + index"
|
||||
name="pos">
|
||||
<label :for="'pos_' + index">
|
||||
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
|
||||
<img v-else style="width:100%"
|
||||
:src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
|
||||
alt="1 kolumna">
|
||||
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
|
||||
item.label
|
||||
}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
methods: {},
|
||||
|
||||
emits:['choose'],
|
||||
data: function () {
|
||||
return {
|
||||
items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.my-check input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.my-check label {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
class="modal"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog"
|
||||
:class="class_other"
|
||||
>
|
||||
<div
|
||||
v-if="modal"
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
v-if="title"
|
||||
class="modal-header"
|
||||
>
|
||||
<h4
|
||||
class="modal-title"
|
||||
v-html="title"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from "bootstrap";
|
||||
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
|
||||
|
||||
export default {
|
||||
props: ["modelValue", "title", "class_other"],
|
||||
setup(props, { emit }) {
|
||||
const id = "modal" + Math.round(Math.random() * 100000);
|
||||
const modal = ref(null);
|
||||
|
||||
const triggerModal = (value, emitEvent = true) => {
|
||||
if (value == true) {
|
||||
modal.value.show();
|
||||
} else {
|
||||
modal.value.hide();
|
||||
if (emitEvent) {
|
||||
emit("hide");
|
||||
}
|
||||
}
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.body.append(document.getElementById(id));
|
||||
modal.value = new Modal(document.getElementById(id));
|
||||
document.getElementById(id).addEventListener("hidden.bs.modal", function () {
|
||||
triggerModal(false);
|
||||
});
|
||||
triggerModal(props.modelValue, false);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.getElementById(id).remove();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
triggerModal(props.modelValue);
|
||||
}
|
||||
);
|
||||
|
||||
return { id, modal };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-xxl {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,319 +0,0 @@
|
||||
<template>
|
||||
<section
|
||||
:class="{ 'pagebuilder-fullscreen': fullscreen }"
|
||||
class="content card-body p-3"
|
||||
id="pagebuilder"
|
||||
>
|
||||
<div class="pagebuilder-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<button
|
||||
@click.prevent="fullscreen = !fullscreen"
|
||||
title="Tryb pełnoekranowy"
|
||||
class="btn btn-outline-primary btn-icon-sm"
|
||||
>
|
||||
<span class="material-icons-outlined">fullscreen</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
@click.prevent="
|
||||
modalLoad = !modalLoad;
|
||||
pageType = { name: null };
|
||||
"
|
||||
title="Wczytaj szablon do schowka"
|
||||
class="btn btn-outline-primary btn-icon-sm"
|
||||
>
|
||||
<span class="material-icons-outlined">find_replace</span>
|
||||
</button>
|
||||
<button
|
||||
@click.prevent="
|
||||
modalSave = !modalSave;
|
||||
pageType = { name: null };
|
||||
"
|
||||
title="Zapisz szablon do schowka"
|
||||
class="btn btn-outline-success btn-icon-sm"
|
||||
>
|
||||
<span class="material-icons-outlined">save</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
|
||||
układ z innej strony</button> -->
|
||||
</div>
|
||||
|
||||
<draggable
|
||||
:options="{ handle: '.box-move' }"
|
||||
v-model.value="comps"
|
||||
@start="drag = true"
|
||||
item-key="d"
|
||||
@end="
|
||||
drag = false;
|
||||
onChange();
|
||||
"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<PagebuilderSection
|
||||
:value="element"
|
||||
v-on:deleteSection="deleteSection"
|
||||
v-on:copy="copySection"
|
||||
@change="onChange"
|
||||
>
|
||||
</PagebuilderSection>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<b-modal
|
||||
class_other="modal-xl"
|
||||
v-model.value="modalSave"
|
||||
title="Zapisz szablon do schowka"
|
||||
v-on:onClose="modalSave = false"
|
||||
>
|
||||
<PagebuilderTemplateSave
|
||||
v-model.value="pageType"
|
||||
:szablon="value"
|
||||
>
|
||||
</PagebuilderTemplateSave>
|
||||
<div>
|
||||
<button
|
||||
@click.prevent="modalSaveSave"
|
||||
title="Zapisz do schowka"
|
||||
class="btn btn-success mr-1"
|
||||
:disabled="!pageType.name"
|
||||
>
|
||||
Zapisz do schowka
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<b-modal
|
||||
class_other="modal-xl"
|
||||
v-model.value="modalLoad"
|
||||
title="Wczytaj szablon ze schowka"
|
||||
v-on:onClose="modalLoad = false"
|
||||
>
|
||||
<div>
|
||||
<PagebuilderTemplateLoad
|
||||
v-model.value="pageType"
|
||||
@input="modalLoadClick"
|
||||
></PagebuilderTemplateLoad>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<b-modal
|
||||
class_other="modal-xl"
|
||||
v-model.value="modalCopy"
|
||||
v-on:onClose="modalCopy = false"
|
||||
>
|
||||
<PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary mr-1"
|
||||
:disabled="!pageType.id"
|
||||
@click.prevent="changeBody"
|
||||
>
|
||||
Skopiuj układ i treść
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<b-modal
|
||||
class_other="modal-xl"
|
||||
v-model.value="modalAddSection"
|
||||
title=" Dodaj sekcję"
|
||||
v-on:onClose="modalAddSection = false"
|
||||
hide-footer
|
||||
>
|
||||
<div>
|
||||
<DropdownSectionGrid @choose="addSection"> </DropdownSectionGrid>
|
||||
</div>
|
||||
<div></div>
|
||||
</b-modal>
|
||||
<div class="text-center">
|
||||
<!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
|
||||
class="btn btn-block btn-primary mt-4"
|
||||
@click.prevent="
|
||||
modalAddSection = !modalAddSection;
|
||||
optionx = false;
|
||||
"
|
||||
>
|
||||
Dodaj sekcję
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
import grid from "./grid.js";
|
||||
import MagicoModal from "./MagicoModal.vue";
|
||||
import PagebuilderSection from "./PagebuilderSection.vue";
|
||||
import DropdownSectionGrid from "./DropdownSectionGrid.vue";
|
||||
import PagebuilderTemplateSave from "./PagebuilderTemplateSave.vue";
|
||||
import PagebuilderTemplateLoad from "./PagebuilderTemplateLoad.vue";
|
||||
|
||||
export default {
|
||||
name: "MagicoPagebuilder",
|
||||
emits: ["update:modelValue"],
|
||||
components: {
|
||||
"b-modal": MagicoModal,
|
||||
PagebuilderSection,
|
||||
draggable,
|
||||
DropdownSectionGrid,
|
||||
PagebuilderTemplateSave,
|
||||
PagebuilderTemplateLoad,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
fullscreen: false,
|
||||
grid: grid,
|
||||
namex: "body", //podmieniane przez name
|
||||
drag: false,
|
||||
optionx: "",
|
||||
comps: [],
|
||||
modalAddSection: false,
|
||||
modalCopy: false,
|
||||
pageType: { id: false },
|
||||
modalSave: false,
|
||||
modalLoad: false,
|
||||
};
|
||||
},
|
||||
props: ["name", "modelValue", "showcopy", "lang"],
|
||||
mounted: function () {
|
||||
//var trimmed = $("#body_pagebuilder").val().replace((/ |\r\n|\n|\r/gm),"");
|
||||
var trimmed = this.modelValue; //.replace((/{2} |\r\n|\n|\r/gm), "");
|
||||
try {
|
||||
this.comps = JSON.parse(trimmed);
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
this.comps = [
|
||||
{
|
||||
label: "1 kolumna ",
|
||||
name: "col_1",
|
||||
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
|
||||
},
|
||||
];
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
if (this.name) this.namex = this.name;
|
||||
else this.namxe = "body";
|
||||
},
|
||||
watch: {
|
||||
// whenever question changes, this function will run
|
||||
comps: function (newQuestion) {
|
||||
console.log("nq", newQuestion);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onChange: function () {
|
||||
this.$emit("update:modelValue", JSON.stringify(this.comps));
|
||||
this.$emit("change");
|
||||
},
|
||||
copySection: function (item) {
|
||||
this.comps.push(JSON.parse(JSON.stringify(item)));
|
||||
this.onChange();
|
||||
},
|
||||
deleteSection: function (item) {
|
||||
this.comps.splice(this.comps.indexOf(item), 1);
|
||||
this.onChange();
|
||||
},
|
||||
addSection: function (it) {
|
||||
this.modalAddSection = false;
|
||||
this.comps.push(JSON.parse(JSON.stringify(it)));
|
||||
this.onChange();
|
||||
},
|
||||
modalSaveSave: function () {
|
||||
console.log(this.pageType);
|
||||
var data = {
|
||||
id: this.pageType.id,
|
||||
name: this.pageType.name,
|
||||
source: this.modelValue,
|
||||
description: this.pageType.description,
|
||||
};
|
||||
if (this.$pagebuilder.axios) {
|
||||
this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
|
||||
this.pageType = {};
|
||||
this.modalSave = false;
|
||||
});
|
||||
} else {
|
||||
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
|
||||
}
|
||||
},
|
||||
modalLoadClick: function () {
|
||||
this.pageType.body = this.pageType.source;
|
||||
this.changeBody();
|
||||
},
|
||||
changeBody() {
|
||||
var t = this;
|
||||
var value = this.pageType.body;
|
||||
var trimmed = value;
|
||||
try {
|
||||
//this.comps.forEach((item)=>{
|
||||
// this.deleteSection(item);
|
||||
//})
|
||||
this.comps = [];
|
||||
setTimeout(function () {
|
||||
t.comps = JSON.parse(trimmed);
|
||||
t.onChange();
|
||||
}, 300);
|
||||
//this.comps =JSON.parse(trimmed);
|
||||
} catch (e) {
|
||||
this.comps = [
|
||||
{
|
||||
label: "1 kolumna ",
|
||||
name: "col_1",
|
||||
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
this.modalCopy = false;
|
||||
this.modalSave = false;
|
||||
this.modalLoad = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
#pagebuilder {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.pagebuilder-fullscreen {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
min-height: 100vh;
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pagebuilder-fullscreen .pagebuilder-body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 95vh;
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
import MagicoPagebuilder from "./MagicoPagebuilder.vue";
|
||||
|
||||
export default {
|
||||
install: (app) => {
|
||||
app.component("MagicoPagebuilder", MagicoPagebuilder);
|
||||
|
||||
console.log(app);
|
||||
app.config.globalProperties.$pagebuilder = {
|
||||
items: {
|
||||
core_section_text: {
|
||||
label: "Pole nagłowek",
|
||||
svg_off: "",
|
||||
},
|
||||
core_section_textarea: {
|
||||
label: "Pole tekstowe",
|
||||
svg_off: "",
|
||||
},
|
||||
core_section_html: {
|
||||
label: "Pole HTML",
|
||||
svg_off: "",
|
||||
},
|
||||
core_section_image: {
|
||||
label: "Obrazek",
|
||||
svg_off: "",
|
||||
},
|
||||
},
|
||||
axios: null,
|
||||
registerPlugin(name, item, component) {
|
||||
this.items[name] = item;
|
||||
if(component){
|
||||
app.component(name, component);
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
style="min-height: 100px"
|
||||
class="pagebuilder-column"
|
||||
:class="value.name"
|
||||
>
|
||||
<b-modal
|
||||
v-model.value="modalAddBox"
|
||||
class_other="modal-xl"
|
||||
v-on:onClose="modalAddBox = false"
|
||||
title="Dodaj widżet"
|
||||
>
|
||||
<div>
|
||||
<DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<b-modal
|
||||
v-model="modalColumnsSettings"
|
||||
title="Ustawienia kolumny"
|
||||
size="sm"
|
||||
v-on:onClose="modalColumnsSettings = false"
|
||||
>
|
||||
<div>
|
||||
<div class="from-group">
|
||||
<label>Klasa kolumny</label>
|
||||
<input
|
||||
@input="onChange"
|
||||
v-model="value.class"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
@click="modalColumnsSettings = false"
|
||||
class="btn btn-outline-secondary"
|
||||
>
|
||||
Zapisz i zamknij
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
<draggable
|
||||
:options="{ handle: '.box-move' }"
|
||||
v-model="value.items"
|
||||
@start="drag = true"
|
||||
@end="
|
||||
drag = false;
|
||||
onChange();
|
||||
"
|
||||
group="people"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
|
||||
<component
|
||||
@itemRemoved="removeItem"
|
||||
:key="index"
|
||||
v-bind:is="element.name"
|
||||
v-bind:value="element"
|
||||
v-model="value.items[index]"
|
||||
@update:model-value="onChange"
|
||||
@change="onChange"
|
||||
></component>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
|
||||
<div
|
||||
class="posistion-relative"
|
||||
:class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
|
||||
>
|
||||
<div class="flex-fill mr-0 pr-0">
|
||||
<button
|
||||
class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
|
||||
@click.prevent="modalAddBox = !modalAddBox"
|
||||
title="Dodaj widget"
|
||||
>
|
||||
<i class="material-icons-outlined">add_circle_outline</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-0 pl-0">
|
||||
<a
|
||||
title="Ustawienia kolumny"
|
||||
class="btn-icon-sm"
|
||||
@click.prevent="modalColumnsSettings = !modalColumnsSettings"
|
||||
><i
|
||||
style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
|
||||
class="material-icons-outlined"
|
||||
>create</i
|
||||
></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
import MagicoModal from "./MagicoModal.vue";
|
||||
import SectionText from "./plugin/SectionText.vue";
|
||||
import SectionTextarea from "./plugin/SectionTextarea.vue";
|
||||
import SectionHtml from "./plugin/SectionHtml.vue";
|
||||
import SectionImage from "./plugin/SectionImage.vue";
|
||||
|
||||
import DropdownSectionSection from "./DropdownSectionSection.vue";
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
|
||||
},
|
||||
props: { value: Object },
|
||||
emits: ["update:modelValue"],
|
||||
components: {
|
||||
draggable,
|
||||
"b-modal": MagicoModal,
|
||||
core_section_textarea: SectionTextarea,
|
||||
core_section_text: SectionText,
|
||||
core_section_html: SectionHtml,
|
||||
core_section_image: SectionImage,
|
||||
|
||||
DropdownSectionSection,
|
||||
},
|
||||
methods: {
|
||||
onChange: function () {
|
||||
this.$emit("change");
|
||||
},
|
||||
rand: function () {
|
||||
return "component" + Math.random() * 100;
|
||||
},
|
||||
removeItem(item) {
|
||||
this.value.items.indexOf(item);
|
||||
this.value.items.splice(this.value.items.indexOf(item), 1);
|
||||
|
||||
this.onChange();
|
||||
},
|
||||
clickAdd: function (item) {
|
||||
console.log(item);
|
||||
this.modalAddBox = false;
|
||||
var a = { name: item, open: true };
|
||||
this.value.items.push(a);
|
||||
this.onChange();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.pagebuilder-column-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagebuilder-column-hover-padding {
|
||||
padding: 17px;
|
||||
}
|
||||
|
||||
.pagebuilder-column:hover .pagebuilder-column-hover {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pagebuilder-column:hover .pagebuilder-column-hover-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
|
||||
<div class="col-sm-12">
|
||||
<div class="row p-0 mt-3 me-2">
|
||||
<PagebuilderContent
|
||||
class="col-sm-12"
|
||||
v-for="(column, index) in value.columns"
|
||||
:value="column"
|
||||
:key="index"
|
||||
@change="onChange"
|
||||
></PagebuilderContent>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="pb_section_options position-absolute"
|
||||
style="top: 12px; right: 14px; width: 20px"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
title="Przenieś sekcje"
|
||||
class="box-settings-icon box-move"
|
||||
><i class="material-icons-outlined">sort</i></a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
title="Duplikuj sekcje"
|
||||
@click.prevent="copySection"
|
||||
class="box-settings-icon box-copy text-warning"
|
||||
><i class="material-icons-outlined">file_copy</i></a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
title="Ustawienia sekcji"
|
||||
@click.prevent="toggleSettings"
|
||||
class="box-settings-icon box-settings text-secondary"
|
||||
><i class="material-icons-outlined">settings</i></a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
title="Usuń sekcje"
|
||||
@click.prevent="deleteSection"
|
||||
class="box-settings-icon box-delete text-danger"
|
||||
><i class="material-icons-outlined">delete</i></a
|
||||
>
|
||||
<b-modal
|
||||
v-model="show_settings"
|
||||
title="Ustawienia sekcji"
|
||||
@onClose="ustawieniaSave()"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div class="form-group mb-2">
|
||||
<label class="w-100 col-form-label"> Klasa sekcji </label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="value.class"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label>Margines górny</label>
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
v-model="value.margin_top"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="basic-addon1"
|
||||
>px</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-2">
|
||||
<label>Margines dolny</label>
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
v-model="value.margin_bottom"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="basic-addon1"
|
||||
>px</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
@click.prevent="ustawieniaSave"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import grid from "./grid.js";
|
||||
import MagicoModal from "./MagicoModal.vue";
|
||||
import PagebuilderContent from "./PagebuilderContent.vue";
|
||||
export default {
|
||||
props: { value: Object },
|
||||
emits: ["update:modelValue", "copy", "deleteSection"],
|
||||
components: {
|
||||
"b-modal": MagicoModal,
|
||||
PagebuilderContent,
|
||||
},
|
||||
data: function () {
|
||||
return { items: grid, value2: "", show_settings: false };
|
||||
},
|
||||
methods: {
|
||||
changeSelect: function () {
|
||||
this.onChange();
|
||||
},
|
||||
onChange: function () {
|
||||
this.$emit("change");
|
||||
},
|
||||
deleteSection: function () {
|
||||
this.$emit("deleteSection", this.value);
|
||||
},
|
||||
copySection: function () {
|
||||
this.$emit("copy", this.value);
|
||||
},
|
||||
toggleSettings: function () {
|
||||
this.show_settings = !this.show_settings;
|
||||
},
|
||||
ustawieniaSave: function () {
|
||||
this.show_settings = false;
|
||||
this.onChange();
|
||||
},
|
||||
rand: function (index) {
|
||||
return "column" + index + Math.random() * 100;
|
||||
},
|
||||
},
|
||||
mounted: function () {},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#pagebuilder {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.pb_section {
|
||||
background-color: #fff;
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-icon-sm,
|
||||
.btn.drp-icon-sm {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 6px 6px;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.material-icons-outlined {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="form form-group">
|
||||
<div class="ms-3">
|
||||
<div class="mb-3" v-for="item, ii in items" :key="ii" :value="item">{{ item.name }} <button
|
||||
class="btn btn-outline-primary" @click="itemselected = item; changeSelect()">Wczytaj</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-show="items.length == 0"><i>Brak zapisanych szablonów</i></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
this.getPost();
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
items: [],
|
||||
itemselected: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect() {
|
||||
this.$emit('update:modelValue', this.itemselected);
|
||||
},
|
||||
getPost() {
|
||||
if (this.$pagebuilder.axios) {
|
||||
this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
|
||||
this.items = response.data.data;
|
||||
});
|
||||
} else {
|
||||
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="form-group mb-3">
|
||||
<label
|
||||
v-if="id < 1"
|
||||
class="col-4"
|
||||
>Tworzysz nowy szablon</label
|
||||
>
|
||||
<label
|
||||
v-if="id > 0"
|
||||
class="col-4"
|
||||
>Nadpiszesz istniejacy szablon</label
|
||||
>
|
||||
<div class="col-8">
|
||||
<b
|
||||
v-if="id > 0"
|
||||
class=""
|
||||
>{{ name2 }}</b
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form form-group mb-3">
|
||||
<label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
|
||||
<select
|
||||
v-model="itemselected"
|
||||
@change="changeSelect"
|
||||
class="form-control"
|
||||
>
|
||||
<option :value="{ new: 1 }">Stwórz nowy szablon</option>
|
||||
<option
|
||||
:key="ii"
|
||||
v-for="(item, ii) in items"
|
||||
:value="item"
|
||||
>
|
||||
Nadpisz: {{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-show="itemselected.new == 1">
|
||||
<div class="form form-group mb-3">
|
||||
<label class="w-100">Nazwa szablonu</label
|
||||
><input
|
||||
@change="change"
|
||||
class="form-control"
|
||||
type="text"
|
||||
v-model="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form form-group mb-3">
|
||||
<label class="w-100">Opis</label
|
||||
><input
|
||||
@change="change"
|
||||
class="form-control"
|
||||
type="text"
|
||||
v-model="description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
this.getPost();
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
items: [],
|
||||
itemselected: { new: 1 },
|
||||
name: "",
|
||||
description: "",
|
||||
id: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit("update:modelValue", {
|
||||
id: this.id,
|
||||
name: this.name,
|
||||
description: this.description,
|
||||
});
|
||||
},
|
||||
changeSelect() {
|
||||
this.id = this.itemselected.id;
|
||||
this.name = this.itemselected.name;
|
||||
this.name2 = this.itemselected.naem;
|
||||
this.description = this.itemselected.description;
|
||||
this.change();
|
||||
},
|
||||
getPost() {
|
||||
if (this.$pagebuilder.axios) {
|
||||
this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
|
||||
this.items = response.data.data;
|
||||
});
|
||||
} else {
|
||||
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,117 +0,0 @@
|
||||
export default {
|
||||
col_1: {
|
||||
label: "1 kolumna ",
|
||||
name: "col_1",
|
||||
class: "",
|
||||
columns: [{ name: "col-md-12", items: [] }],
|
||||
},
|
||||
col_2: {
|
||||
label: "2 kolumny po 6 ",
|
||||
name: "col_2",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-6", items: [] },
|
||||
{ name: "col-md-6", items: [] },
|
||||
],
|
||||
},
|
||||
col_4_8: {
|
||||
label: "2 kolumny 2 i 8 ",
|
||||
name: "col_4_8",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-4", items: [] },
|
||||
{ name: "col-md-8", items: [] },
|
||||
],
|
||||
},
|
||||
col_8_4: {
|
||||
label: "2 kolkumny 8 i 2 ",
|
||||
name: "col_8_4",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-8", items: [] },
|
||||
{ name: "col-md-4", items: [] },
|
||||
],
|
||||
},
|
||||
col_2_10: {
|
||||
label: "2 kolumny 2 i 10 ",
|
||||
name: "col_2_10",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-10", items: [] },
|
||||
],
|
||||
},
|
||||
col_10_2: {
|
||||
label: "2 kolkumny 10 i 2 ",
|
||||
name: "col_10_2",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-10", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
],
|
||||
},
|
||||
col_3: {
|
||||
label: "3 kolumny po 4 ",
|
||||
name: "col_3",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-4", items: [] },
|
||||
{ name: "col-md-4", items: [] },
|
||||
{ name: "col-md-4", items: [] },
|
||||
],
|
||||
},
|
||||
col_3_6_3: {
|
||||
label: "3 kolumny: 3 ,6, 3 ",
|
||||
name: "col_3_6_3",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-6", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
],
|
||||
},
|
||||
col_6_3_3: {
|
||||
label: "3 kolumny: 6,3,3 ",
|
||||
name: "col_6_3_3",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-6", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
],
|
||||
},
|
||||
col_3_3_6: {
|
||||
label: "3 kolumny: 3,3,6 ",
|
||||
name: "col_3_3_6",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-6", items: [] },
|
||||
],
|
||||
},
|
||||
col_4: {
|
||||
label: "4 kolumny po 3 ",
|
||||
name: "col_4",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
{ name: "col-md-3", items: [] },
|
||||
],
|
||||
},
|
||||
col_6: {
|
||||
label: "6 kolumn po 2 ",
|
||||
name: "col_6",
|
||||
class: "",
|
||||
columns: [
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
{ name: "col-md-2", items: [] },
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div class="row m-0 p-0 align-items-center">
|
||||
<div class="col-sm-12 col-md-6 p-0">
|
||||
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
|
||||
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-6 p-0 text-end">
|
||||
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
|
||||
class="material-icons-outlined">create</i></a>
|
||||
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
|
||||
v-on:hide="onCloseModal">
|
||||
<div class="mb-4">
|
||||
<div class="form-group">
|
||||
<textarea rows="40" class="form-control" v-model="text"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
|
||||
langs.saveclose
|
||||
}}</button></div>
|
||||
</b-modal>
|
||||
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
||||
class="material-icons-outlined">delete</i></a>
|
||||
</div>
|
||||
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
},
|
||||
props: {
|
||||
modelValue: Object
|
||||
},
|
||||
mounted: function () {
|
||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
||||
if (this.modelValue.open) this.modalBox = true;
|
||||
console.log('mounted html');
|
||||
this.$emit('update:modelValue',this.modelValue);
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
saveclose: "Zapisz",
|
||||
label: "Pole HTML",
|
||||
close: "Zamknij"
|
||||
},
|
||||
height: window.innerHeight - window.innerHeight / 4,
|
||||
modalBox: false,
|
||||
text: '',
|
||||
name: 'core_section_html',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ctext: function () {
|
||||
return this.modelValue.text?this.modelValue.text.replace(/<(?:.|\n)*?>/gm, ''):'';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.modelValue);
|
||||
},
|
||||
onCloseModal: function () {
|
||||
this.modalBox = false;
|
||||
this.$emit('update:modelValue', {
|
||||
name: this.name,
|
||||
text: this.text,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,200 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div class="row m-0 p-0 align-items-center">
|
||||
|
||||
<div class="col-sm-12 col-md-6 p-0">
|
||||
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
|
||||
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-6 p-0 text-end">
|
||||
<a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"><i
|
||||
class="material-icons-outlined">create</i></a>
|
||||
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
||||
class="material-icons-outlined">delete</i></a>
|
||||
</div>
|
||||
<b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
|
||||
<div>
|
||||
<div class="p-0 m-0">
|
||||
<div class="form-group ">
|
||||
<label class="w-100 col-form-label">{{ langs.label }}</label>
|
||||
<div class="input-group mb-3">
|
||||
<input class="form-control" type="text" v-model="text" />
|
||||
<button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group ">
|
||||
<label class="w-100 col-form-label">{{ langs.title }}</label>
|
||||
<input class="form-control" type="text" v-model="title" />
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<label class="w-100 col-form-label">{{ langs.alt }}</label>
|
||||
<input class="form-control" type="text" v-model="alt" />
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<label class="w-100 col-form-label">Legenda obrazka</label>
|
||||
<input class="form-control" type="text" v-model="figcaption" />
|
||||
</div>
|
||||
<div class="form-group ">
|
||||
<label class="w-100 col-form-label">{{ langs.scaling }}</label>
|
||||
<select v-model="scale" class="form-select">
|
||||
<option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.modelValue }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="w-100 col-form-label">{{ langs.href }}</label>
|
||||
<input class="form-control" type="text" v-model="href" />
|
||||
</div>
|
||||
|
||||
<fieldset class="mt-3" v-show="scale == 'tak'">
|
||||
<legend>{{ langs.proportions }}</legend>
|
||||
Brak możliwości skalowania obrazków z zewnętrznego serwera.
|
||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.width
|
||||
}}</label><input class="form-control" v-model="width"></div>
|
||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.height
|
||||
}}</label><input class="form-control" v-model="height"></div>
|
||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
|
||||
}}</label><select class="form-select" v-model="ratio">
|
||||
<option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
|
||||
</select></div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
|
||||
@click.prevent="onCloseModal">{{
|
||||
langs.saveclose
|
||||
}}</button></div>
|
||||
</b-modal>
|
||||
|
||||
<div v-if="text">
|
||||
<img :src="text" style="width:100px;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: Object,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
saveclose: "Zapisz",
|
||||
label: "Obrazek",
|
||||
close: "Zamknij",
|
||||
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
||||
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
||||
scaling: "Skalowanie",
|
||||
scalingyes: "Tak",
|
||||
scalingno: "Nie",
|
||||
proportions: "Proporcje",
|
||||
height: "Wysokość",
|
||||
width: "Szerokość",
|
||||
ratio: "Radio",
|
||||
href: "Adres URL",
|
||||
alt: "Tekst alternatywny",
|
||||
title: "Tytuł",
|
||||
},
|
||||
modalBox: false,
|
||||
items: [],
|
||||
text: '',
|
||||
name: '',
|
||||
alt: '',
|
||||
href: '',
|
||||
title: '',
|
||||
width: 1800,
|
||||
height: 600,
|
||||
ratio: 'crop',
|
||||
figcaption: '',
|
||||
ratios: ['crop', 'auto', 'width', 'height'],
|
||||
scales: [{
|
||||
"key": "nie",
|
||||
"value": "Nie"
|
||||
}, {
|
||||
"key": "tak",
|
||||
"value": "Tak"
|
||||
}],
|
||||
scale: "Nie"
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('mount image', this.modelValue);
|
||||
this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
|
||||
this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
|
||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
||||
this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
|
||||
this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
|
||||
this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
|
||||
this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
|
||||
this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
|
||||
this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
|
||||
|
||||
if (this.modelValue.open) this.modalBox = true;
|
||||
},
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
},
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.modelValue);
|
||||
},
|
||||
chooseImage: function () {
|
||||
if (this.$filechooser) {
|
||||
let vm = this;
|
||||
this.$filechooser.open({
|
||||
chooseCallback: function (ev) {
|
||||
vm.text = ev.publicUrl
|
||||
}
|
||||
})
|
||||
}else{
|
||||
alert('No FileChooser implemented')
|
||||
}
|
||||
},
|
||||
onCloseModal: function () {
|
||||
this.modalBox = false;
|
||||
this.$emit('update:modelValue', {
|
||||
name: this.name,
|
||||
text: this.text,
|
||||
height: this.height,
|
||||
width: this.width,
|
||||
ratio: this.ratio,
|
||||
scale: this.scale,
|
||||
alt: this.alt,
|
||||
href: this.href,
|
||||
title: this.title,
|
||||
figcaption: this.figcaption,
|
||||
})
|
||||
},
|
||||
setText: function (item) {
|
||||
this.text = 'files/images/' + item;
|
||||
this.$emit('update:modelValue', {
|
||||
name: this.name,
|
||||
text: this.text,
|
||||
height: this.height,
|
||||
width: this.width,
|
||||
ratio: this.ratio,
|
||||
scale: this.scale,
|
||||
alt: this.alt,
|
||||
href: this.href,
|
||||
title: this.title,
|
||||
figcaption: this.figcaption,
|
||||
})
|
||||
},
|
||||
modalOpen: function () {
|
||||
this.modalBox = !this.modalBox;
|
||||
//this.getItems();
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div class="row m-0 p-0 align-items-center">
|
||||
<div class="col-sm-12 col-md-6 p-0 mb-0">
|
||||
<span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
|
||||
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-6 p-0 text-end">
|
||||
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
|
||||
class="material-icons-outlined">create</i></a>
|
||||
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
||||
class="material-icons-outlined">delete</i></a>
|
||||
</div>
|
||||
<div class="ms-2">
|
||||
<strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
|
||||
<strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
|
||||
</div>
|
||||
<b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="w-100 col-form-label">{{ langs.content }}</label>
|
||||
<input class="form-control" type="text" v-model="text" />
|
||||
</div>
|
||||
<div class="form-grou mb-2">
|
||||
<label class="w-100 col-form-label">{{ langs.type }}</label>
|
||||
<select class="form-select" v-model="h_type">
|
||||
<option value="">{{ langs.typeplaintext }}</option>
|
||||
<option value="h1">{{ langs.typeheader }} 1</option>
|
||||
<option value="h2">{{ langs.typeheader }} 2</option>
|
||||
<option value="h3">{{ langs.typeheader }} 3</option>
|
||||
<option value="h4">{{ langs.typeheader }} 4</option>
|
||||
<option value="h5">{{ langs.typeheader }} 5</option>
|
||||
<option value="h6">{{ langs.typeheader }} 6</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="w-100 col-form-label">Wyrównanie</label>
|
||||
<div class="">
|
||||
<button v-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
|
||||
:class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<span class="material-icons-outlined">format_align_left</span>
|
||||
</button>
|
||||
<button v-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
|
||||
:class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<span class="material-icons-outlined">format_align_center</span>
|
||||
</button>
|
||||
<button v-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
|
||||
:class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<span class="material-icons-outlined">format_align_right</span>
|
||||
</button>
|
||||
<button v-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
|
||||
:class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<span class="material-icons-outlined">format_align_justify</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
|
||||
langs.saveclose
|
||||
}}</button></div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
},
|
||||
props: {
|
||||
modelValue: Object
|
||||
},
|
||||
emits:['update:modelValue'],
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
label: "Tekst",
|
||||
close: "Zaknij",
|
||||
content: "Treść",
|
||||
type: "Typ",
|
||||
typeplaintext: "Tekst",
|
||||
typeheader: "Nagłowek",
|
||||
saveclose: "Zapisz"
|
||||
},
|
||||
modalBox: false,
|
||||
text: '',
|
||||
name: '',
|
||||
h_type: '',
|
||||
align: 'left',
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
||||
this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
|
||||
this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
|
||||
if (this.modelValue.open) this.modalBox = true;
|
||||
console.log('mounted text');
|
||||
this.$emit('update:modelValue', this.modelValue);
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.modelValue);
|
||||
},
|
||||
onCloseModal: function () {
|
||||
this.modalBox = false;
|
||||
this.$emit('update:modelValue', {
|
||||
name: this.name,
|
||||
text: this.text,
|
||||
h_type: this.h_type,
|
||||
align: this.align,
|
||||
})
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
this.modalBox = false;
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="row m-0 p-0 align-items-center">
|
||||
<div class="col-sm-12 col-md-6 p-0">
|
||||
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
|
||||
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-6 p-0 text-end">
|
||||
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
|
||||
class="material-icons-outlined">create</i></a>
|
||||
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
|
||||
v-on:hide="onCloseModal">
|
||||
<div class="mb-4">
|
||||
<div class="form-group">
|
||||
<editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
|
||||
langs.saveclose
|
||||
}}</button></div>
|
||||
</b-modal>
|
||||
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
||||
class="material-icons-outlined">delete</i></a>
|
||||
</div>
|
||||
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
import tinymceConfig from '../tinymce/config.js'
|
||||
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
export default {
|
||||
emits:['update:modelValue'],
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
|
||||
'editor': Editor // <- To jest TINYMCE
|
||||
},
|
||||
props: {
|
||||
modelValue: Object
|
||||
},
|
||||
mounted: function () {
|
||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
||||
if (this.modelValue.open) this.modalBox = true;
|
||||
console.log('mounted textarea');
|
||||
this.$emit('update:modelValue', this.modelValue);
|
||||
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
saveclose: "Zapisz",
|
||||
label: "Pole tekstowe",
|
||||
close: "Zamknij"
|
||||
},
|
||||
height: window.innerHeight - window.innerHeight / 4,
|
||||
modalBox: false,
|
||||
text: '',
|
||||
name: 'core_section_textarea',
|
||||
vtinymce: Object.assign(tinymceConfig, {
|
||||
file_picker_callback: (callback) => {
|
||||
if (this.$filechooser) {
|
||||
this.$filechooser.open({
|
||||
chooseCallback: function (ev) {
|
||||
console.log('filePathChosed', ev)
|
||||
callback(ev.publicUrl);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}),
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modalBox: function () {
|
||||
if (this.modalBox) {
|
||||
document.addEventListener('focusin', (e) => {
|
||||
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
console.log('focus');
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
ctext: function () {
|
||||
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.modelValue);
|
||||
},
|
||||
onCloseModal: function () {
|
||||
this.modalBox = false;
|
||||
this.$emit('update:modelValue', {
|
||||
name: this.name,
|
||||
text: this.text,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -1,16 +0,0 @@
|
||||
import PagebuilderSectionPlugin from "../../../magico-section/src/components/PagebuilderSectionPlugin.vue";
|
||||
|
||||
export function useSections() {
|
||||
console.log('DUPA',PagebuilderSectionPlugin);
|
||||
function register(vm) {
|
||||
vm.registerPlugin(
|
||||
"SectionX1",
|
||||
{
|
||||
label: "Sekcja 1",
|
||||
svg_off: ``,
|
||||
},
|
||||
PagebuilderSectionPlugin
|
||||
);
|
||||
}
|
||||
return { register };
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
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,
|
||||
|
||||
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
/* Import TinyMCE */
|
||||
import 'tinymce/tinymce';
|
||||
|
||||
/* Default icons are required. After that, import custom icons if applicable */
|
||||
import 'tinymce/icons/default';
|
||||
|
||||
/* Required TinyMCE components */
|
||||
import 'tinymce/themes/silver';
|
||||
// import 'tinymce/models/dom';
|
||||
|
||||
/* Import a skin (can be a custom skin instead of the default) */
|
||||
import 'tinymce/skins/ui/oxide/skin.css';
|
||||
|
||||
// /* Import plugins */
|
||||
import 'tinymce/plugins/advlist';
|
||||
import 'tinymce/plugins/code';
|
||||
import 'tinymce/plugins/emoticons';
|
||||
import 'tinymce/plugins/emoticons/js/emojis';
|
||||
import 'tinymce/plugins/link';
|
||||
import 'tinymce/plugins/lists';
|
||||
import 'tinymce/plugins/table';
|
||||
|
||||
|
||||
import 'tinymce/plugins/advlist'
|
||||
import 'tinymce/plugins/autolink'
|
||||
import 'tinymce/plugins/lists'
|
||||
import 'tinymce/plugins/link'
|
||||
import 'tinymce/plugins/image'
|
||||
import 'tinymce/plugins/anchor'
|
||||
import 'tinymce/plugins/media'
|
||||
import 'tinymce/plugins/pagebreak'
|
||||
import 'tinymce/plugins/searchreplace'
|
||||
import 'tinymce/plugins/wordcount'
|
||||
import 'tinymce/plugins/visualblocks'
|
||||
import 'tinymce/plugins/visualchars'
|
||||
import 'tinymce/plugins/code'
|
||||
import 'tinymce/plugins/insertdatetime'
|
||||
import 'tinymce/plugins/nonbreaking'
|
||||
import 'tinymce/plugins/save'
|
||||
import 'tinymce/plugins/table'
|
||||
import 'tinymce/plugins/directionality'
|
||||
import 'tinymce/plugins/emoticons'
|
||||
// import 'tinymce/plugins/colorpicker'
|
||||
import 'tinymce/plugins/codesample'
|
||||
import 'tinymce/plugins/charmap'
|
||||
import 'tinymce/plugins/autoresize'
|
||||
/* Import premium plugins */
|
||||
/* NOTE: Download separately and add these to /src/plugins */
|
||||
/* import './plugins/checklist/plugin'; */
|
||||
/* import './plugins/powerpaste/plugin'; */
|
||||
/* import './plugins/powerpaste/js/wordimport'; */
|
||||
|
||||
/* content UI CSS is required */
|
||||
|
||||
|
||||
/* Initialize TinyMCE */
|
||||
export function render() {
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
10
src/main.js
10
src/main.js
@@ -1,10 +0,0 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import MagicoPagebuilder from "./components/MagicoPagebuilderPlugin.js";
|
||||
import { useSections } from "./components/registerSections";
|
||||
|
||||
const app = createApp(App).use(MagicoPagebuilder).mount("#app");
|
||||
|
||||
const { register: sectionRegister } = useSections();
|
||||
sectionRegister(app.$pagebuilder);
|
||||
Reference in New Issue
Block a user