Salve salve, blz?
OBS: Laravel, inertia e vue3 com tailWind
Criar componente Ckeditor.vue
<script setup>
import { onMounted, ref, watch } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// import ClassicEditor from '@ckeditor/ckeditor5-build-superbuild';
import { component as CKEditor } from '@ckeditor/ckeditor5-vue';
// import { Essentials } from '@ckeditor/ckeditor5-essentials';
// import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
// import { Link } from '@ckeditor/ckeditor5-link';
// import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
// import { Indent } from '@ckeditor/ckeditor5-indent';
// import { List } from '@ckeditor/ckeditor5-list';
// import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
// import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
// import { TextTransformation } from '@ckeditor/ckeditor5-typing';
// // import { Alignment } from '@ckeditor/ckeditor5-alignment';
// import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
// import {
// Image,
// ImageCaption,
// ImageStyle,
// ImageToolbar,
// ImageUpload
// } from '@ckeditor/ckeditor5-image';
const oProps = defineProps({
modelValue: {
type: String,
},
editorConfig: {
type: Object,
default: {
// plugins: [
// Essentials,
// Bold,
// Italic,
// Link,
// Paragraph,
// Indent,
// List,
// PasteFromOffice,
// Table,
// TableToolbar,
// TextTransformation,
// // Alignment,
// Autoformat,
// Image,
// ImageCaption,
// ImageStyle,
// ImageToolbar,
// ImageUpload,
// ]
// toolbar: {
// items: [
// 'bold',
// 'italic',
// 'link',
// 'undo',
// 'redo',
// 'imageUpload', // <-- Added image upload button
// 'indent',
// 'outdent',
// 'numberedList',
// 'bulletedList',
// 'pasteFromOffice',
// 'table',
// 'alignment',
// 'autoformat'
// ]
// },
// image: { // <-- Image configuration
// toolbar: [
// 'imageTextAlternative',
// '|',
// 'imageStyle:full',
// 'imageStyle:side'
// ],
// styles: [
// 'full',
// 'side'
// ]
// }
// toolbar: [ 'bold', 'italic', '|', 'link' ]
// Configurações do CKEditor, se necessário
/*
toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
heading: {
options: [
{model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{model: 'heading1', title: 'Heading 1', class: 'ck-heading_heading1'},
{model: 'heading2', title: 'Heading 2', class: 'ck-heading_heading2'}
]
}
*/
},
},
readOnly: {
type: Boolean,
default: false
}
});
const editorData = ref(oProps.modelValue ?? '');
const emit = defineEmits(['update:modelValue']);
watch(editorData, () => {
emit('update:modelValue', editorData.value)
}
);
</script>
<template>
<div>
<CKEditor :editor="ClassicEditor" :config="editorConfig" v-model="editorData"
class=" border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
:class="{ 'bg-gray-200 text-gray-400': readOnly }" :readonly="readOnly"></CKEditor>
</div>
</template>
No arquivo que deseja utilizar:
import CkEditor from '@/Components/CkEditor.vue';
<div>
<InputLabel for="description" value="Atendimento" />
<CkEditor id="description" v-model="oForm.description" ></CkEditor>
<InputError class="mt-2" :message="oForm.errors.description" />
</div>
Gostou? Compartilhe com seus amigos e deixe um comentário! 😎
Um abraço, e até a próxima