vue-ckeditor-custom
v0.1.6
Published
component vue3 ckeditor5 custom settings
Downloads
89
Keywords
Readme
vue-ckeditor-custom
MP componente vue ckeditor setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Como usar
1.- Install component
npm i vue-ckeditor-custom
npm i @ckeditor/[email protected]
2.- In main.js file
import VueCkEditorCustom from 'vue-ckeditor-custom';
import '/node_modules/vue-ckeditor-custom/dist/style.css';
import CKEditor from '@ckeditor/ckeditor5-vue'
...
app.use(CKEditor);
app.use(VueCkEditorCustom);
Publicar en npm
#cambiar version
npm login
npm publish
Componentes
- CKEditorCustom
<CKEditorCustom
v-model="value"
:config="configCKeditor"
:format="{ name: 'letter', width: '290mm', height: '330mm' }"
:isReadOnly="false"
orientacion="horizontal"
>
<template #header></template>
</CKEditorCustom>
propiedades que recibe
- v-model: contenido en html
- pageContent: all config page
- config: configuracion estandar del ckeditor
- orientacion, 'horizontal' o 'Vertical'
- format: puede ser de tipo 'letter' o de tipo 'legal', tambien hay que mandar el el with y height para modificar el tamañao de hoja con css
- isReadOnly: Habilitar o deshabilitar edicion del componente
- margins, { top, left, right , botton }, para indicar los margenes
- restricted, Boolean modo restringido
slot
- loading: loading content
integrar con TypeScritp
- crear el archivo
typings.d.ts
dentro de src/ - insertar el contenido
declare module '@ckeditor/ckeditor5-vue' {
const CKEditor: any;
export default CKEditor;
}
declare module 'vue-ckeditor-custom' {
const MpTemplatesPlugin: any;
export default MpTemplatesPlugin;
}