VUE引入CKEditor方法

最近在做一个CMS系统,然后找了几个插件,最后在ueditor和CKEditor挑选的,为什么没有选择百度的ueditor呢?

总之就是issue太多了,百度爸爸不想在搞这个麻烦了。然后就用了CKEditor.

引入的时候在网上搜了好多文章,用了各种姿势,全部都找不到依赖,有各种各样的问题。然后就去研究了官方文档。

具体步骤如下

1.先引入包

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

官方给了两种因与方法,script标签直接引入和ES6 import引入,我个人比较喜欢import的方式,所以这里介绍ES6方法

2.在main,js中引入依赖

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

Vue.use( CKEditor );

Vue.use( CKEditor );是为了确保你在全局都可以使用

3,在想要使用富文本编辑的页面使用

<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>

这样你就会得到一个富文本编辑的窗口,大概长这样

 

creditor的API很多,可以按需配置,有比较完全系统的API文档,大家可以根据自己的需求去配置。

附上官方API地址给各位大佬https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

 

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值