CODEWITHSUNDEEP
vuejs2ckeditor5
ExeCiety
ExeCiety

Reputation: 71

how to use code sample in ckeditor 5 vue?

i want to use the sample code feature in my ckeditor 5 vue, but i can't find it. Can anyone give me an example or how? enter image description here

in my app js

...
import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
...

and my vue file

<template>
    ...
    <ckeditor :editor="editor" v-model="CKValue" :config="editorConfig"></ckeditor>
    ...
</template>

<script>
    import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
    export default {
        data() {
            return {
                CKValue: "",
                editor: ClassicEditor,
                editorConfig: {}
            }
        },
    }
</script>

Upvotes: 2

Views: 4539

Answers (1)

Alvin Indra
Alvin Indra

Reputation: 65

You can see a sample code here https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

Like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Vue.js Component – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
        textarea {
            width: 100%;
            height: 100px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
    <script src="../dist/ckeditor.js"></script>

    <div id="app">
        <h1>CKEditor 5 – Vue.js Component – development sample</h1>

        <ckeditor
            editor="classic"
            tag-name="textarea"
            v-model="editorData"
            :editor="editor"
            :config="editorConfig"
            :disabled="editorDisabled"
            @ready="onEditorReady"
            @focus="onEditorFocus"
            @blur="onEditorBlur"
            @input="onEditorInput"
            @destroy="onEditorDestroy"
        ></ckeditor>
        <button v-on:click="toggleEditorDisabled()">
            {{ editorDisabled ? 'Enable' : 'Disable' }} editor
        </button>
        <button v-on:click="destroyApp()">Destroy the app</button>

        <h2>Live editor data</h2>
        <textarea v-model="editorData"></textarea>
    </div>

    <script>
        Vue.use( CKEditor );
        const app = new Vue( {
            el: '#app',
            data: {
                editor: ClassicEditor,
                editorData: '<p>Hello world!</p>',
                editorConfig: { toolbar: [ 'heading', '|', 'bold', 'italic' ] },
                editorDisabled: false
            },
            methods: {
                toggleEditorDisabled() {
                    this.editorDisabled = !this.editorDisabled;
                },
                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>
</body>
</html>

Upvotes: 1

Related Questions