mp-vue-editor

MP-VUE-EDITOR-VITE

MP plugin plantillas setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Recommended IDE Setup

• VS Code + Volar

How to use

1.- Install component

$ npm i mp-vue-editor
$ npm i @ckeditor/ckeditor5-vue@4.0.1

2.- In main.js file

import MpTemplatesPlugin from 'mp-vue-editor';
import CKEditor from '@ckeditor/ckeditor5-vue'
import '../node_modules/mp-vue-editor/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

eventos

• TagList

<TagList :list="listTags" @click-one="(tag) => tag"></TagList>

componentes que soporta primevue

• PrimeCkEditor (en desarrollo)

<PrimeCkEditor></PrimeCkEditor>

propiedades que recibe

• v-model

• 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

• jsonInfo, objeto json con la información para convertirlos a tags

• showToolbar: mostrar todo el toolbar con las opciones

• showPdf: mostrar el botton de 'vista pdf'

• showPageConfig: mostrar el botton de 'configurar pagina'

• showTags: mostrar el botton de 'tags', para visualizar el sidebar

• pdfUrl, url de la base64 o la url del pdf a cargar

• margins, { top, left, right , botton }, para indicar los margenes

• restricted, Boolean modo restringido

• PrimeCkEditorTags (en desarrollo)

<PrimeCkEditorTags></PrimeCkEditorTags>

propiedades que recibe

• v-model
• 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
• jsonInfo, objeto json con la información para convertirlos a tags
• showToolbar: mostrar todo el toolbar con las opciones
• showPageConfig: mostrar el botton de 'configurar pagina'
• showTags: mostrar el botton de 'tags', para visualizar el sidebar
• pdfUrl, url de la base64 o la url del pdf a cargar
• 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 'mp-vue-editor' {
  const MpTemplatesPlugin: any;
  export default MpTemplatesPlugin;
}