editor configuration
This commit is contained in:
parent
395a6439eb
commit
600bb47260
2 changed files with 120 additions and 23 deletions
|
|
@ -1,10 +1,11 @@
|
|||
import type { Editor } from "grapesjs";
|
||||
import type { AddComponentTypeOptions, BlockProperties, Editor } from "grapesjs";
|
||||
|
||||
export function configureEditor(editor: Editor): void {
|
||||
editor.Panels.getPanel("devices-c")?.set("visible", false);
|
||||
//editor.Panels.getPanel("devices-c")?.set("visible", false);
|
||||
editor.Panels.removeButton("devices-c", "set-device-mobile");
|
||||
editor.Panels.removeButton("devices-c", "set-device-desktop");
|
||||
editor.Panels.removeButton("views", "open-tm");
|
||||
editor.Panels.removeButton("views", "open-layers");
|
||||
editor.Panels.removeButton("options", "export-template");
|
||||
editor.Panels.removeButton("options", "preview");
|
||||
// editor.Panels.removeButton("options", "fullscreen");
|
||||
|
|
@ -18,27 +19,6 @@ export function configureEditor(editor: Editor): void {
|
|||
editor.BlockManager.remove("sect37");
|
||||
editor.BlockManager.remove("text-sect");
|
||||
|
||||
editor.DomComponents.addType("heading", {
|
||||
model: {
|
||||
defaults: {
|
||||
tagName: "h1",
|
||||
content: "Heading",
|
||||
},
|
||||
},
|
||||
isComponent(el) {
|
||||
return el.tagName === "H1";
|
||||
},
|
||||
});
|
||||
editor.BlockManager.add("heading-block", {
|
||||
label: "Heading",
|
||||
content: { type: "heading" },
|
||||
category: "Text",
|
||||
media: `
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z"></path>
|
||||
</svg>
|
||||
`,
|
||||
});
|
||||
editor.BlockManager.get("text").set("category", "Text");
|
||||
editor.BlockManager.get("quote").set("category", "Text");
|
||||
editor.BlockManager.get("link").set("category", "Text");
|
||||
|
|
@ -46,4 +26,119 @@ export function configureEditor(editor: Editor): void {
|
|||
editor.BlockManager.get("sect50").set("category", "Struktur");
|
||||
editor.BlockManager.get("sect30").set("category", "Struktur");
|
||||
editor.BlockManager.get("divider").set("category", "Struktur");
|
||||
editor.BlockManager.add("heading1-block", heading1_block);
|
||||
editor.BlockManager.add("heading2-block", heading2_block);
|
||||
editor.BlockManager.add("heading3-block", heading3_block);
|
||||
editor.BlockManager.add("list_start", list_start_block);
|
||||
editor.DomComponents.addType("list_end", list_end_block.type);
|
||||
editor.BlockManager.add("list_end", list_end_block.block);
|
||||
editor.BlockManager.add("list-block", list_block);
|
||||
editor.BlockManager.add("list-inner-block", list_inner_block);
|
||||
}
|
||||
|
||||
const heading1_block: BlockProperties = {
|
||||
label: "Heading1",
|
||||
category: "Text",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<h1 class="heading">Heading 1</h1>
|
||||
`,
|
||||
};
|
||||
|
||||
const heading2_block: BlockProperties = {
|
||||
label: "Heading2",
|
||||
category: "Text",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<h2 class="heading">Heading 2</h2>
|
||||
`,
|
||||
};
|
||||
|
||||
const heading3_block: BlockProperties = {
|
||||
label: "Heading3",
|
||||
category: "Text",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<h3 class="heading">Heading 3</h3>
|
||||
`,
|
||||
};
|
||||
|
||||
const list_start_block: BlockProperties = {
|
||||
label: "Anfang WDH",
|
||||
category: "Struktur",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<liststart style="font-style: italic; display: block;">
|
||||
WDH Start: LISTENNAME
|
||||
</liststart>
|
||||
`,
|
||||
};
|
||||
|
||||
const list_end_block: { type: AddComponentTypeOptions; block: BlockProperties } = {
|
||||
type: {
|
||||
model: {
|
||||
defaults: {
|
||||
tagName: "listend",
|
||||
content: "WDH ENDE",
|
||||
editable: false,
|
||||
},
|
||||
},
|
||||
isComponent(el) {
|
||||
return el.tagName === "listend";
|
||||
},
|
||||
},
|
||||
block: {
|
||||
label: "Ende WDH",
|
||||
content: { type: "list_end" },
|
||||
category: "Struktur",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
||||
</svg>
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
||||
const list_block: BlockProperties = {
|
||||
label: "Liste",
|
||||
category: "Struktur",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<ul>
|
||||
<li>Element</li>
|
||||
</ul>
|
||||
`,
|
||||
};
|
||||
|
||||
const list_inner_block: BlockProperties = {
|
||||
label: "Listenelement",
|
||||
category: "Text",
|
||||
media: `
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
||||
</svg>
|
||||
`,
|
||||
content: `
|
||||
<li>Element</li>
|
||||
`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -101,6 +101,8 @@ export default defineComponent({
|
|||
height: "100%",
|
||||
width: "100%",
|
||||
fromElement: true,
|
||||
telemetry: false,
|
||||
showDevices: false,
|
||||
deviceManager: {
|
||||
devices: [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue