CODEWITHSUNDEEP
javascriptlaravelvue.jsckeditorinertiajs
Vajra37
Vajra37

Reputation: 33

How to show data inside my text editor component

I'm starting to use Laravel + Inertia, so I'm having tons of problems to get what I want since I'm new with Vue.

In this particular case I'm using CKEditor 5 to save my posts into my DB.

The problem comes when I want to use the edit function of my controller, cause I don't manage to get my post saved in the DB into my CKEDitor. Instead of that, CKEditor comes empty without the content inside the editor.

How can I achieve to show the data that I previously saved? If I show it in a plain variable it works, but inside the ckeditor component, it doesn't.

This doesn't work:


<ckeditor id="description" tag-name="textarea" 
            :editor="editor"
            :config="editorConfig"
            @ready="onEditorReady"
            @focus="onEditorFocus"
            @blur="onEditorBlur"
            @input="onEditorInput"
            @destroy="onEditorDestroy"> {{project.description}}</ckeditor>

This works:


<div> 
    {{project.description}}
</div>

My script:

<script>

import AppLayout from '@/Layouts/AppLayout'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
  name: 'app',       
  components: {
      AppLayout,
      ckeditor: CKEditor.component
  },
  props: {
    project: Object,
    priority: Object,
    responsible: Object
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: '',
      editorConfig: {
        ckfinder: {
          uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images&responseType=json',
          openerMethod: 'popup',
        },
        language: 'es',
      },
    };
  },
  methods: {
    onReady( editor )  {
    // Insert the toolbar before the editable area.
    editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
      );
    },
      destroyApp() {
          app.$destroy();
      },
      onEditorReady( editor ) {
          console.log( 'Editor is ready.', { editor } );
      },
      onEditorFocus( event, editor ) {
          console.log( 'Editor focused.', { event, editor } );
      },
      onEditorBlur( event, editor ) {
          console.log( 'Editor blurred.', { event, editor } );
      },
      onEditorInput( data, event, editor ) {
          console.log( 'Editor data input.', { event, editor, data } );
      },
      onEditorDestroy( editor ) {
          console.log( 'Editor destroyed.', { editor } );
      }
  }
}

</script>

Upvotes: 0

Views: 639

Answers (1)

Vajra37
Vajra37

Reputation: 33

Was more simple that I imagined...

I just had to add the v-model to the component and the editorData in the script:

Vue:

<ckeditor id="description" tag-name="textarea" v-model="editorData"
            :editor="editor"
            :config="editorConfig" >  
          </ckeditor>

Script:

data() {
    return {
      editor: ClassicEditor,
      editorData: this.project.description,
      editorConfig: {
        ckfinder: {
          uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images&responseType=json',
          openerMethod: 'popup',
        },
        language: 'es',
      },
    };
  },

Hope it helps to another person with the same issue.

Upvotes: 1

Related Questions