vue实现ckedit

在网上搜到了好多写法，也试了好几种写法，都没写成，

在这实现一个简单的在线编辑器

首先安装依赖

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

 在main.js中导入编辑器模块

import Vue from ‘vue‘;
import CKEditor from ‘@ckeditor/ckeditor5-vue‘;

Vue.use( CKEditor );

 vue页面实现

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

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

    export default {
        name: ‘app‘,
        data() {
            return {
                editor: ClassicEditor,
                editorData: ‘<p>请输入公告内容...</p>‘,
                editorConfig: {}
            };
        }
    }
</script>

设置行高

<style>
.ck-editor__editable { min-height: 100px; }
</style>

 

 

参考文章 http://www.mamicode.com/info-detail-2686991.html