add pagebuilder

2023-08-17 11:33:13 +02:00
parent e04312836a
commit 01e86b071a
5 changed files with 149 additions and 16 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <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>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.1",
+    "@tinymce/tinymce-vue": "^4",
    "axios": "^1.4.0",
+    "bootstrap": "^5.3.1",
    "bootstrap-icons": "^1.10.5",
-    "vuedraggable": "^4.1.0",
-    "vue": "^3.3.4"
+    "tinymce": "^6.6.2",
+    "vue": "^3.3.4",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.2",
--- a/src/components/SectionElement.vue
+++ b/src/components/SectionElement.vue
@@ -7,9 +7,7 @@
          v-for="(template, key) in name_templates"
          :key="key"
          class="badge badge-secondary mr-1"
-          @click="
-            saveElement(element, true)
-          "
+          @click="saveElement(element, true)"
          >{{ template }}</span
        >
      </div>
@@ -33,9 +31,7 @@
          v-for="(template, key) in key_templates"
          :key="key"
          class="badge badge-secondary mr-1"
-          @click="
-            saveElement(element, true)
-          "
+          @click="saveElement(element, true)"
          >{{ template }}</span
        >
      </div>
@@ -113,7 +109,7 @@
        v-model="element.text"
        @input="saveElement(element, true)"
      ></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 v-else-if="element.type == 'variable' && editMode">
      <label>Label zmiennej:</label>
@@ -133,9 +129,7 @@
          v-for="(template, key) in name_templates"
          :key="key"
          class="badge badge-secondary mr-1"
-          @click="
-            saveElement(element, true)
-          "
+          @click="saveElement(element, true)"
          >{{ template }}</span
        >
      </div>
@@ -275,9 +269,10 @@
 <script>
 import FileChooserInput from './FileChooserInput.vue'
 import { randId } from './helper'
-import draggable from 'vuedraggable'
+import tinymceConfig from './tinymce/config.js'
+import Editor from '@tinymce/tinymce-vue'
 export default {
-  components: { draggable, FileChooserInput },
+  components: {  FileChooserInput,Editor },
  props: ['modelValue', 'indexes', 'editMode'],
  methods: {
    saveElement: function (el, mode = false) {
@@ -292,7 +287,7 @@ export default {
      minimodal: false,
      value: '',
      id: randId('post'),
-      vtinymce: {},
+      vtinymce: { ...tinymceConfig },
      element: {},
      name_templates: ['Nagłowek', 'Podnagłówek', 'Opis', 'Tekst', 'Obrazek', 'Ikona'],
      key_templates: ['head', 'text', 'image', 'icon'],
--- a/src/components/tinymce/config.js
+++ b/src/components/tinymce/config.js
@@ -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,
+    
+    
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -221,6 +221,13 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz#16ab6c727d8c2020a5b6e4a176a243ecd88d8d69"
  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":
  version "4.2.3"
  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"
  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:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"