Question

在 Laravel/Inertia 组件中使用 CKEditor

2021-08-26

1044

components ckeditor laravel-8 inertiajs

我想在我的 Laravel/Inertia 项目中使用 Ckeditor，但我无法让它工作。我从 LaraTips 找到了一个教程，但那是为 VueJS-2 编写的。我正在使用最新版本的 Inertia，它使用 VueJS-3。

我想在单独的组件中使用 Ckeditor，它（有点）有效，但我无法让旧数据显示在编辑器中。我收到错误“未捕获（在承诺中）TypeError：无法读取 Proxy.modelValue（app.js:29）中未定义的属性‘setData’” 我做错了什么？

这是我的组件：

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

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    export default {
        data() {
            return {
                text: "",
                editor: ClassicEditor,
                editorConfig: {
                    // The configuration of the editor.
                },
            }
        },
        props: {
            modelValue: {}
        },
        
        setup() {
            
        },
        watch: {
            modelValue: {
                immediate: true,
                handler(modelValue) {
                    this.text = modelValue;
                }
            },

            text(text) {
                this.$emit('update:modelValue', text);
            }
        },
    }
</script>

有什么建议吗？

Answer 1

我正在做同样的教程（我使用的是 vueJS-3）。

这可能对你有用：

在 app.js 中包含 CKEditor：

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use( CKEditor)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

在 Components/CkEditor.vue 中检查你发出了什么查找这个 this.$emit("input", text);

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

<script>
import ClasicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    props: {
        value: {},
    },
    data() {
        return {
            text: "",
            editor: ClasicEditor,
            editorConfig: {
                // The configuration of the editor.
            },
        };
    },

    watch: {
        value:{
            inmediate: true,
            handler(value){
                this.text = value;
            }
        },
        text(text) {
            this.$emit("input", text);
        },
    },
};
</script>

让我知道这是否对你有用

Answer 2

我查看了这里的答案，下面是对我有用的：

希望这有帮助！:)

我正在使用 laravel/inertia 和 vue 3。

app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { createPinia } from 'pinia';
import { _t } from './Utilities/translations';
import CKEditor from '@ckeditor/ckeditor5-vue';

const appName =
    window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        ),
    setup({ el, app, props, plugin }) {
        const vue_app = createApp({ render: () => h(app, props) });
        vue_app.use(plugin);
        vue_app.use(ZiggyVue, Ziggy);
        vue_app.use(createPinia());

        // Register all base components globally
        const components = import.meta.globEager('./Components/Base/*.vue');

        for (const path in components) {
            let componentName;

            if (path.split) {
                const split_componentName = path.split('/').pop();

                if (split_componentName) {
                    componentName = split_componentName.replace(/\.\w+$/, '');
                    vue_app.component(componentName, components[path].default);
                }
            }
        }

        vue_app.config.globalProperties.$_t = _t;

        vue_app.use(CKEditor);

        vue_app.mount(el);

        return vue_app;
    }
});

InertiaProgress.init({ color: '#4B5563' });

CKEditor 组件：

<template>
    <div id="app">
        <ckeditor
            v-model="editor_data"
            :editor="editor"
            :config="editor_config"
        ></ckeditor>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from '@vue/reactivity';
import * as editor from '@ckeditor/ckeditor5-build-classic';

const editor_data = ref('');
const editor_config = {};
</script>