rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): create tinymce wrapper component

Browse Source 
configs have also been created
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-09-25 19:40:30 -04:00
parent 1ecaf7fd1d
commit 1b14d2b702
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 172 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/baseEditor.vue Normal file
View 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
View 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'
}