0.0.25 • Published 1 year ago
mp-vue-editor v0.0.25
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
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;
}
0.0.24
2 years ago
0.0.25
1 year ago
0.0.23
2 years ago
0.0.22
2 years ago
0.0.21
2 years ago
0.0.20
2 years ago
0.0.19
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago