CKEditor 5 editor with Vue3
Installation
<script setup>
import Editor from '@nadalnguyen/ckeditor5-upload-video'
import { ref } from 'vue'
import UploadAdapter from './imageUpload'
import { reactive } from 'vue'
const emits = defineEmits(['input'])
const props = defineProps({
content: {
type: String,
default: '',
},
})
const editor = reactive(Editor)
const editorData = ref(props.content)
const editorConfig = reactive({
mediaEmbed: {
elementName: 'video',
previewsInData: true,
extraProviders: [
{
name: 'NadalProvider',
url: [/(.*?)/],
html: (match) => {
const src = match.input
return (
'
' +
'' +
'' +
'
'
)
},
},
],
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
},
extraPlugins: [MyCustomUploadAdapterPlugin],
})
function MyCustomUploadAdapterPlugin(editor) {
const myeditor = editor
// eslint-disable-next-line no-underscore-dangle
myeditor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader, myeditor.config._config.type)
}
}
const contentChange = (text) => {
emits('input', text)
}
</script>