feat(components): create tinymce wrapper component
configs have also been created
This commit is contained in:
parent
1ecaf7fd1d
commit
1b14d2b702
GPG Key ID:
924A5F6AF051E87C
36
components/baseEditor.vue
Normal file
36
components/baseEditor.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import TinymceEditor from "@tinymce/tinymce-vue"
|
||||||
|
import {useDark} from "@vueuse/core"
|
||||||
|
import { NamePath } from "ant-design-vue/es/form/interface";
|
||||||
|
import {Field as VeeField} from "vee-validate"
|
||||||
|
import tinymce from "tinymce"
|
||||||
|
const props = defineProps<{
|
||||||
|
name: string;
|
||||||
|
init: any;
|
||||||
|
label: string;
|
||||||
|
val?: string;
|
||||||
|
width?: number;
|
||||||
|
dark?: boolean;
|
||||||
|
wrapCol?: any;
|
||||||
|
}>()
|
||||||
|
onMounted(() => {
|
||||||
|
// if(typeof navigator != undefined) {
|
||||||
|
// tinymce.init({...props.init, selector: `textarea[${props.name}]`})
|
||||||
|
// }
|
||||||
|
|
||||||
|
})
|
||||||
|
// const isDark = useDark()
|
||||||
|
// console.log("darky")
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<vee-field :name="props.name" v-slot="{errorMessage, field, value}" :value="val">
|
||||||
|
<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :name="props.name" :label="props.label" :value="val">
|
||||||
|
<tinymce-editor v-bind="field" width="100%" cloud-channel="6-dev" api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
|
||||||
|
:init="{...props.init,
|
||||||
|
skin: props.dark ? 'oxide-dark' : 'oxide',
|
||||||
|
content_css: props.dark ? 'dark' : 'default'}"/>
|
||||||
|
</a-form-item>
|
||||||
|
</vee-field>
|
||||||
|
</ClientOnly>
|
||||||
|
</template>
|
||||||
136
lib/client/editorConfig.ts
Normal file
136
lib/client/editorConfig.ts
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
export const fancy = {
|
||||||
|
branding: false,
|
||||||
|
selector: 'textarea#txt',
|
||||||
|
menubar: false,
|
||||||
|
elementpath: false,
|
||||||
|
formats: {
|
||||||
|
bold: {
|
||||||
|
inline: 'b'
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
inline: 'i'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
inline: 'u'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
schema: 'html5',
|
||||||
|
custom_colors: true,
|
||||||
|
style_formats: [
|
||||||
|
// { title: 'Image formats' },
|
||||||
|
{
|
||||||
|
title: 'Blocks',
|
||||||
|
items: [
|
||||||
|
{ title: 'p', block: 'p' },
|
||||||
|
{ title: 'div', block: 'div' },
|
||||||
|
{ title: 'pre', block: 'pre' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Image",
|
||||||
|
items: [
|
||||||
|
{ title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
|
||||||
|
{ title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
|
||||||
|
{ title: 'Rounded corners', styles: { 'border-radius': '0.7em'} }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ title: 'Code/Monospace', selector: "p,div,h1,h2,h3,h4,h5,h6", classes: [ 'font-mono' ] },
|
||||||
|
],
|
||||||
|
toolbar_groups: {
|
||||||
|
alignment: {
|
||||||
|
icon: 'align-left',
|
||||||
|
tooltip: "Alignment",
|
||||||
|
items: "alignleft aligncenter alignright | alignjustify"
|
||||||
|
},
|
||||||
|
heading: {
|
||||||
|
icon: 'format',
|
||||||
|
tooltip: 'Header',
|
||||||
|
items: 'h1 h2 h3 h4 h5 h6'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toolbar: "undo redo | paste | bold italic underline | hr image link | forecolor styles | heading alignment | code",
|
||||||
|
contextmenu: 'bold italic underline | hr | link | image | paste',
|
||||||
|
external_plugins: {
|
||||||
|
"mentions": "/plugins/mentions/plugin.min.js"
|
||||||
|
},
|
||||||
|
plugins:
|
||||||
|
`advlist autolink lists link image charmap preview anchor searchreplace visualblocks advcode fullscreen insertdatetime media table help wordcount save mentions`.split(" ")
|
||||||
|
}
|
||||||
|
export const comment = {
|
||||||
|
branding: false,
|
||||||
|
height: 200,
|
||||||
|
menubar: false,
|
||||||
|
elementpath: false,
|
||||||
|
formats: {
|
||||||
|
bold: {
|
||||||
|
inline: 'b'
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
inline: 'i'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
inline: 'u'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
external_plugins: {
|
||||||
|
"mentions": "/plugins/mentions/plugin.min.js"
|
||||||
|
},
|
||||||
|
schema: 'html5',
|
||||||
|
plugins:
|
||||||
|
`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help save mentions`.split(" "),
|
||||||
|
toolbar: 'bold italic underline | link',
|
||||||
|
contextmenu: 'bold italic underline | paste | link'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const story = {
|
||||||
|
branding: false,
|
||||||
|
selector: 'textarea#txt',
|
||||||
|
height: 500,
|
||||||
|
menubar: false,
|
||||||
|
elementpath: false,
|
||||||
|
formats: {
|
||||||
|
bold: {
|
||||||
|
inline: 'b'
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
inline: 'i'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
inline: 'u'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
content_css: ["/test.css", "/quickfix.css"],
|
||||||
|
schema: 'html5',
|
||||||
|
plugins:
|
||||||
|
`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table advcode help wordcount save`.split(" "),
|
||||||
|
toolbar: 'undo redo | paste |' +
|
||||||
|
'bold italic underline | hr | alignleft aligncenter ' +
|
||||||
|
'alignright alignjustify | ' +
|
||||||
|
'| code',
|
||||||
|
contextmenu: 'bold italic underline | hr | paste | link'
|
||||||
|
}
|
||||||
|
export const bare = {
|
||||||
|
branding: false,
|
||||||
|
height: 200,
|
||||||
|
menubar: false,
|
||||||
|
elementpath: false,
|
||||||
|
formats: {
|
||||||
|
bold: {
|
||||||
|
inline: 'b'
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
inline: 'i'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
inline: 'u'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
schema: 'html5',
|
||||||
|
external_plugins: {
|
||||||
|
"mentions": "/plugins/mentions/plugin.min.js"
|
||||||
|
},
|
||||||
|
plugins:
|
||||||
|
`advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table advcode help save mentions`.split(" "),
|
||||||
|
toolbar: 'bold italic underline | hr link',
|
||||||
|
contextmenu: 'bold italic underline | paste | hr link'
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user