<!--
 * @FileDescription：CKEditor 5
 * @Date: 2023-11-13
 * @LastEditTime: 2023-11-13
-->
<script setup lang="ts">
import { reactive, shallowRef } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// import type { EditorConfig } from '@ckeditor/ckeditor5-core';
// const fs = require('fs');



const editorGf = shallowRef<any>({});
const editorState = reactive({
    editor: ClassicEditor,
    editorData: '<p>这是一行文字。</p>',
    editorConfig: {
        // The configuration of the editor.
        // https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
        placeholder: '请输入...',
        language: 'zh-cn',
        toolbar: ['undo', 'redo', '|', 'heading', 'bold', 'italic', 'blockQuote', 'link', 'indent', 'outdent', 'numberedList', 'bulletedList'],
    }
})

function onReady(editor: any) {
    editorGf.value = editor;
    console.log('onReady=', editorGf.value);
    const names = editorGf.value?.ui.componentFactory.names();
    console.log('工具栏项=', Array.from(names));

}

function filechange(event: any) {
    const files = event.target.files;
    console.log('files', files);

}
function clikeMe() {
    // const dir = '../ck-editor5';

    // // list all files in the directory
    // fs.readdir(dir, (err: any, files: any) => {
    //     if (err) {
    //         throw err;
    //     }

    //     // files object contains all files names
    //     // log them on console
    //     files.forEach((file: any) => {
    //         console.log(file);
    //     });
    // })
}
</script>
<template>
    <div>
        <div>
            <p>快速开始：<br> https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html</p>
            <p>CKEditor 5 rich text editor component for Vue.js： <br> https://www.npmjs.com/package/@ckeditor/ckeditor5-vue
            </p>
        </div>
        <div class="container q-pa-md">
            <div>
                <ckeditor :editor="editorState.editor" v-model="editorState.editorData" :config="editorState.editorConfig"
                    @ready="onReady">
                </ckeditor>
            </div>
        </div>
        <div>
            <p>其它</p>
            <button @click="clikeMe">点我</button>
            <input type="file" id="fileInput" webkitdirectory directory multiple @change="filechange">
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 500px;
    background-color: #ececec;
}
</style>
