CKEditor5 與 vue.js 和 laravel 的集成

Question

我正在嘗試將 ckeditor 上傳到我的項目，但是我嘗試了 7 個小時，但它並沒有消失。 我搜索了google，從30個包安裝（npm），我用教程做的，慢慢放棄了。 請幫忙，我需要為所有包含 id = "description" 的視圖全局配置所見即所得編輯器。

我有類似的東西：組件 CKeditor.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>

查看create.blade.php：

<ckeditor type="classic" v-model="value1" class="form-control" rows="5" name="description" id="description" placeholder="Description" maxlength="3000"></ckeditor>

應用程序.js：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

require('./bootstrap');

Vue.component('ckeditor', require('./components/CKeditor.vue').default);

window.Vue = require('vue');
window.onload = function () {
    const app = new Vue({
        el: '#app'
    });
}

作品來自https://github.com/igorxut/vue-ckeditor5的教程

請幫我運行這個所見即所得的編輯器。 非常感謝... :*

Answer 1

我會從頭到尾告訴你如何使用 laravel 和 vuejs 運行 ckeditor 5 只需按照以下步驟操作即可

-1 使用 npm 在 Laravel 中安裝 CKEditor

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>

-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

希望我的回答能幫到你

CKEditor5 與 vue.js 和 laravel 的集成

問題描述

1 個解決方案

解決方案1
3 已采納 2020-07-07 20:41:46

CKEditor5 與 vue.js 和 laravel 的集成

問題描述

1 個解決方案

解決方案1 3 已采納 2020-07-07 20:41:46

解決方案1
3 已采納 2020-07-07 20:41:46