diff --git a/application/views/CisRouterView/CisRouterView.php b/application/views/CisRouterView/CisRouterView.php index c51ca40c3..fdf31ed31 100644 --- a/application/views/CisRouterView/CisRouterView.php +++ b/application/views/CisRouterView/CisRouterView.php @@ -10,6 +10,7 @@ $includesArray = array( 'primevue3' => true, 'skipID' => '#fhccontent', 'vuedatepicker11' => true, + 'tinymce5' => true, 'customCSSs' => array( 'public/css/components/verticalsplit.css', 'public/css/components/searchbar/searchbar.css', diff --git a/public/js/apps/Cis/Cis.js b/public/js/apps/Cis/Cis.js index d4f846f25..43be92e9a 100644 --- a/public/js/apps/Cis/Cis.js +++ b/public/js/apps/Cis/Cis.js @@ -9,6 +9,7 @@ import MylvStudent from "../../components/Cis/Mylv/Student.js"; import Profil from "../../components/Cis/Profil/Profil.js"; import Raumsuche from "../../components/Cis/Raumsuche/Raumsuche.js"; import CmsNews from "../../components/Cis/Cms/News.js"; +import NewsItemForm from "../../components/Cis/Cms/NewsItemForm.js"; import CmsContent from "../../components/Cis/Cms/Content.js"; import Info from "../../components/Cis/Mylv/Semester/Studiengang/Lv/Info.js"; import RoomInformation, {DEFAULT_MODE_RAUMINFO_DESKTOP, DEFAULT_MODE_RAUMINFO_MOBILE} from "../../components/Cis/Mylv/RoomInformation.js"; @@ -148,6 +149,12 @@ const router = VueRouter.createRouter({ component: CmsNews, props: true }, + { + path: `/CisVue/Cms/News/Create`, + name: 'NewsItemCreate', + component: NewsItemForm, + props: true + }, { path: `/Cis/MyLv/:studiensemester?`, name: 'MyLv', diff --git a/public/js/components/Cis/Cms/NewsItemContentForm.js b/public/js/components/Cis/Cms/NewsItemContentForm.js new file mode 100644 index 000000000..7f9eb9d83 --- /dev/null +++ b/public/js/components/Cis/Cms/NewsItemContentForm.js @@ -0,0 +1,85 @@ + +import FormInput from "../../Form/Input.js"; + +export default { + name: "NewsItemContentForm", + components: { + FormInput, + }, + props: { + config: { + type: Object, + default: () => ({}) + } + }, + methods: { + initTinyMCE() { + const vm = this; + tinymce.init({ + target: this.$refs.editor.$refs.input, //Important: not selector: to enable multiple import of component + //height: 800, + //plugins: ['lists'], + //toolbar: " blocks | bold italic underline | alignleft aligncenter alignright alignjustify", + toolbar: 'styleselect | bold italic underline | alignleft aligncenter alignright alignjustify', + style_formats: [ + {title: 'Blocks', block: 'div'}, + {title: 'Paragraph', block: 'p'}, + {title: 'Heading 1', block: 'h1'}, + {title: 'Heading 2', block: 'h2'}, + {title: 'Heading 3', block: 'h3'}, + {title: 'Heading 4', block: 'h4'}, + {title: 'Heading 5', block: 'h5'}, + {title: 'Heading 6', block: 'h6'}, + ], + autoresize_bottom_margin: 16, + + setup: (editor) => { + vm.editor = editor; + + editor.on('input', () => { + const newContent = editor.getContent(); + vm.notizData.text = newContent; + }); + }, + }); + }, + }, + mounted() { + this.initTinyMCE(); + }, + template: /*html*/ ` +