码迷,mamicode.com
首页 > 其他好文 > 详细

ckeditor5富文本编辑器在vue中的使用

时间:2019-05-23 16:57:01      阅读:510      评论:0      收藏:0      [点我收藏+]

标签:tor   org   editor   文件   方式   ble   tar   vuejs   构建   

安装依赖:

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

要创建编辑器实例,必须首先将编辑器构建和组件模块导入应用程序的根文件中(例如,main.js在由Vue CLI生成时)。然后,使用以下Vue.use()方法启用组件:

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

Vue.use( CKEditor );

在组件中的具体使用方式如下:

<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>Content of the editor.</p>,
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

设置ckeditor5输入区域的高度:

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

技术图片

ckeditor5富文本编辑器在vue中的使用

标签:tor   org   editor   文件   方式   ble   tar   vuejs   构建   

原文地址:https://www.cnblogs.com/miaosen/p/10912538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!