Etiqueta: vuejs

despues de luchar un tiempo finalmente puedo escribir un post explicando esto

para mi no fue fácil entender la documentación para entender como lograrlo, así que despues de muchas pruebas y error lo logré.

necesitamos hacer dos cosas

primero, necesitamos descarga o clonar el código fuente de ckeditor, en mi caso, ckeditor-4, despues, nos movemos dentro de la carpeta /dev y luego a la carpeta /builder y ejecutamos ./build para tener una copia local de ckeditor.

ahora, copiamos la carpeta generada dentro de la carpeta /release a nuestra app. en mi caso, la dejé dentro de la carpeta /public en mi proyecto vue.

ahora, copio dentro de la carpeta /ckeditor/plugins mis propios plugins.

entonces desde mis componentes lo llamo así

<ckeditor :editor-url="editorUrl" :config="editorConfig" v-model="myModel"></ckeditor>

la variable editorUrl contiene la ruta hacia mi ckeditor que se encuentra dentro de la carpeta /public (/js/ckeditor)

import CKEditor from 'ckeditor4-vue';
export default {
  name: 'myComponent',
  data () {
    return {
      editorConfig: {
        extraPlugins: 'myplugin1, myplugin2',
        toolbar: [ [ 'Bold', 'MyPlugin1', 'Italic', 'MyPlugin2' ] ]
      },
      editorUrl: '/js/ckeditor/ckeditor.js'
    }
  },
  ...,
  components: {
    ckeditor: CKEditor.component
  },
}

si no se usa el atributo editor-url y solo agregamos los extraPlugins, el editor intentará obtener los plugins desde su propio CDN, entonces, nosotros cambiamos este comportamiento “generando nuestro CDN local”.