CKEditor5与vue.js和laravel的集成_Laravel_Vue.js_Ckeditor

CKEditor5与vue.js和laravel的集成

laravel vue.js ckeditor

CKEditor5与vue.js和laravel的集成,laravel,vue.js,ckeditor,Laravel,Vue.js,Ckeditor,我试图上传ckeditor到我的项目，但我尝试了7个小时，它并没有消失。我搜索了谷歌，从30个软件包（npm）安装，我做了教程，然后慢慢放弃。请帮助，我需要为包含id=“description”的所有视图全局配置所见即所得编辑器我有这样的想法：组件编辑器.vue <template> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic

我试图上传ckeditor到我的项目，但我尝试了7个小时，它并没有消失。我搜索了谷歌，从30个软件包（npm）安装，我做了教程，然后慢慢放弃。请帮助，我需要为包含id=“description”的所有视图全局配置所见即所得编辑器

我有这样的想法：组件编辑器.vue

<template>

</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import VueCkeditor from 'vue-ckeditor5'

    export default {
        components: {
            'vue-ckeditor': VueCkeditor.component
        },
        data(){
            return {
                value1: 'hello',
                value2: 'world',
                editors: {
                    classic: ClassicEditor
                }
            }
        },
        template: 
        `<vue-ckeditor type="classic" v-model="value1" :editors="editors"></vue-ckeditor>`
    }
</script>

这些作品都是来自于美国的教程

请帮我运行这个所见即所得编辑器。非常感谢……：*

我将从头到尾介绍如何使用laravel和vuejs运行ckeditor 5，只需按照以下步骤操作即可

-1将CKEditor与npm一起安装在laravel

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

-2在app.js文件中添加此代码

import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

-3在app.js中为ckeditor创建一个组件

Vue.component('ck-editor', require('./components/ckeditor.vue').default);

-4将此代码添加到您的ckeditor.vue文件中

<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
        <button v-on:click="emptyEditor()">Empty the editor</button>
        <br><br>
         <h2>Editor display html code </h2>
         <br>
         <div>{{editorData}}</div>
         <h2>Editor display html Result </h2> 
         <br>
         <button v-on:click="displayEditorResult()">display result </button>
         <br><br>
         
        <div id="resultingText"></div>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        
        data() {
            return {
                
                editor: ClassicEditor,
                editorData: 'ckeditor 5 for laravel and vuejs',
                editorConfig: {
                    // The configuration of the editor.
                },
             

            };
        },
       
           mounted(){
                    
                    console.log('Component mounted.')
                },
                methods: {
            emptyEditor() {
                this.editorData = '';
            },
            displayEditorResult(){
                document.getElementById('resultingText').innerHTML = this.editorData;
            }
        }

    }
</script>


清空编辑器



编辑器显示html代码


{{editorData}}
编辑器显示html结果


显示结果



从“@ckeditor/ckeditor5 build classic”导入ClassicEditor；
导出默认值{
数据（）{
返回{
编者：ClassicEditor，
editorData:“用于laravel和vuejs的ckeditor 5”，
编辑配置：{
//编辑器的配置。
},
};
},
安装的（）{
console.log（'组件已安装'）
},
方法：{
空编辑器（）{
this.editorData=''；
},
displayEditorResult（）{
document.getElementById（'resultingText'）。innerHTML=this.editorData；
}
}
}

-5创建刀片文件并添加此代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ckeditor 5  wyswyg</title>
    <link rel="stylesheet" href="/css/app.css">

</head>
<body>
<div id="app">
    <ck-editor></ck-editor>
    
</div>

<script src="/js/app.js"></script>
<script>

</script>
</body>
</html>


ckeditor 5 wyswyg

最后运行代码，它将显示CKEditor 5

希望我的回答能帮助你

<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
        <button v-on:click="emptyEditor()">Empty the editor</button>
        <br><br>
         <h2>Editor display html code </h2>
         <br>
         <div>{{editorData}}</div>
         <h2>Editor display html Result </h2> 
         <br>
         <button v-on:click="displayEditorResult()">display result </button>
         <br><br>
         
        <div id="resultingText"></div>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        
        data() {
            return {
                
                editor: ClassicEditor,
                editorData: 'ckeditor 5 for laravel and vuejs',
                editorConfig: {
                    // The configuration of the editor.
                },
             

            };
        },
       
           mounted(){
                    
                    console.log('Component mounted.')
                },
                methods: {
            emptyEditor() {
                this.editorData = '';
            },
            displayEditorResult(){
                document.getElementById('resultingText').innerHTML = this.editorData;
            }
        }

    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ckeditor 5  wyswyg</title>
    <link rel="stylesheet" href="/css/app.css">

</head>
<body>
<div id="app">
    <ck-editor></ck-editor>
    
</div>

<script src="/js/app.js"></script>
<script>

</script>
</body>
</html>