vue-ckeditor-custom

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/ckeditor5-vue@5.0.1

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;
}