Vue2 安装简单使用 ckeditor5 classic

Tahn

已于 2022-07-30 00:35:51 修改

阅读量1.6k

点赞数 4

分类专栏： ckeditor 文章标签： vue

于 2022-07-29 23:29:53 首次发布

本文链接：https://blog.csdn.net/weixin_45591598/article/details/126065641

版权

ckeditor 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了在Vue中使用CKEditor5的相关内容，包括安装方法，通过ES6模块导入，页面使用时editor、v-model、config指令的作用，还提及若要设置界面语言（如中文），可从/node_modules/@ckeditor/ckeditor5-build-classic/build/translations导入所需语言包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

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

通过使用ES6模块导入

// main.js全局引用
import CKEditor from '@ckeditor/ckeditor5-vue2';
Vue.use( CKEditor );

页面使用

editor 指令指定编辑器生成（编辑器构造函数）
v-model 指令启用开箱即用的双向数据绑定
config 指令可帮助您将配置传递给编辑器实例

<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: null,
                editorConfig: {
                    
                }
            };
        }
    }
</script>

如果需要设置界面语言（中文为例）

语言包在/node_modules/@ckeditor/ckeditor5-build-classic/build/translations，导入你想要的语言包就行啦！！！

import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js' // CKEditor界面语言---简体中文