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@4.0.1

2.- In main.js file

import MpTemplatesPlugin from 'vue-ckeditor-custom';
import CKEditor from '@ckeditor/ckeditor5-vue'
import '../node_modules/vue-ckeditor-custom/dist/style.css';
...
aoo.use(CKEditor);
app.use(MpTemplatesPlugin, {
    //Si su proyecto no usa los servicios de primevue true | false
    useServices: true,
    //Si su proyecto no usa las directivas de primevue true | false
    addDirectives: true,
    //Si su proyecto no usa los componentes de primevue true | false
    addPrimeVueComponents: true,
  });

Publicar en npm

• cambiar version

• npm run build

• npm login

• npm publish

Componentes

• CKEditorCustom

<CKEditorCustom
  v-model="value"
  :config="configCKeditor"
  :format="{ name: 'letter', width: '290mm', height: '330mm' }"
  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
• margins, { top, left, right , botton }, para indicar los margenes
• restricted, Boolean modo restringido

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